たのしいScrapboxUserScript
UserScriptはとても便利ですが、いろいろやろうとすると制約の壁にぶつかることが多くあります
今回はScrapboxの制約を理解し、それを破るうまいこと回避して目的を達成する方法について書き記したいと思います
CORS制限
https://gyazo.com/f5b998ccfe72e99d1d20fc44ccf6cf3c
fetchやXMLHttpRequestで外部にリソースを取りに行きたい、でもなぜか阻まれる…
それもそのはず、ScrapboxにはCSPと言って、こう言ったセキュリティリスクとなるアクセスを阻む機能が適用され、条件にそぐわないアクセスはブロックされるようになっています 現時点で許可されているのは、self(https://scrapbox.io), https://i.gyazo.com, wss://scrapbox.io, https://upload.gyazo.com, https://gyazo.com, https://storage.googleapis.com, https://sentry.ioです
GM_xmlhttpRequestはこの制約を飛び越えることができるので、unsafeWindowでwindowにセットすれば問題なくリクエストを行えます
こんな便利な機能ですが、きちんとセキュリティへの対策も施されています
CSP超えアクセスは、UserScriptの@connectに設定されているホストにしか行えないようになっています
tweet-card-proxyのトップにも書かれており、tweet2image.vercel.appのみを許可しています
@connectに記載されていないホストへのアクセスをこの関数から行おうとすると、きちんと確認画面が出るようになっています
つまり、導入時に@connect欄をきちんと見ておけば安心ということ
また、https://storage.googleapis.comが許可されているということは、静的なアセット類であればGCSに乗っければアクセス可能になります 注意点として、GCS側にCORSの設定が必要です。これを設定せずに雑にテストするとキャッシュが残っちゃって面倒なので（実話）事前にやっておくようにしましょう script-src制限
外部の便利なライブラリを読みたい、けどなんか読み込めない…code:に書くしかないのか…
そんなことはありません
Scrapboxは、cdnjs.cloudflare.com www.google-analytics.com maps.googleapis.com helpfeel-tweaks.helpfeel.com js.stripe.comのホストであればscriptを読み取れます
つまり、にあるライブラリであればなんでも読み込むことができるのです dayjsとかも当然普通に呼べるようになります
ここにないアプリであっても、codeに埋め込むぐらいなら先述のGM_xmlhttpRequestでドカンすることもできそうです
試してはいない
何か他にあったらTwitterまで教えてください
おわり