みなさん、 ScrapboxUserScript書いてますか？

UserScriptはとても便利ですが、いろいろやろうとすると制約の壁にぶつかることが多くあります

今回はScrapboxの制約を理解し、それを破るうまいこと回避して目的を達成する方法について書き記したいと思います

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 です

でもVercelに建てた外部APIを叩きに行きたい、そんな時はTampermonkeyを使った外部UserScriptによって回避することができます

例: tweet2image-proxy

GM_xmlhttpRequest はこの制約を飛び越えることができるので、 unsafeWindow でwindowにセットすれば問題なくリクエストを行えます

こんな便利な機能ですが、きちんとセキュリティへの対策も施されています

CSP超えアクセスは、UserScriptの @connect に設定されているホストにしか行えないようになっています

tweet-card-proxyのトップにも書かれており、 tweet2image.vercel.app のみを許可しています

@connect に記載されていないホストへのアクセスをこの関数から行おうとすると、きちんと確認画面が出るようになっています

つまり、導入時に @connect 欄をきちんと見ておけば安心ということ

また、 https://storage.googleapis.com が許可されているということは、静的なアセット類であればGCSに乗っければアクセス可能になります

注意点として、GCS側にCORSの設定が必要です。これを設定せずに雑にテストするとキャッシュが残っちゃって面倒なので（実話）事前にやっておくようにしましょう

外部の便利なライブラリを読みたい、けどなんか読み込めない… code: に書くしかないのか…

そんなことはありません

Scrapboxは、 cdnjs.cloudflare.com www.google-analytics.com maps.googleapis.com helpfeel-tweaks.helpfeel.com js.stripe.com のホストであればscriptを読み取れます

つまり、https://cdnjs.comにあるライブラリであればなんでも読み込むことができるのです

dayjs とかも当然普通に呼べるようになります

ここにないアプリであっても、codeに埋め込むぐらいなら先述の GM_xmlhttpRequest でドカンすることもできそうです

試してはいない

何か他にあったらTwitterまで教えてください

おわり