ScrapboxのUserScriptは、なぜ外部リソースを読み込めな（い/かった）のか

簡単にまとめると三つの壁があった。ブラウザ・サーバーのうち、ブラウザから近い処理から順に書く

概要

Scrapboxのサービス提供者が、スクリプトが接続できるURLを厳しく制限していた

最大の難関

回避方法

Content Security Policyがより寛容な項目を使って通信する

例えば画像srcにリクエスト内容を書き、レスポンスを画像から読み出すなど

node-bitmap-proxyやjs-fetch-proxyなどによって実現できる

拡張機能を利用して制約を無効にする

概要

テキスト情報のデータは、本来テキスト関係のデータが読み込まれない要素に読み込むことは原則できないという制約

たとえば、Content-Type: text/htmlのデータを画像要素に読み込むことはできない

読み込みエラーになるのではなく、そもそも読み込みが開始されない

後方互換性のためにもう少し詳しい場合わけなどがある

回避方法

ヘッダー情報を読み込み先要素と正しく対応するように設定することで回避可能

概要

接続先のサイトが、異なるオリジンで利用することを許可していない場合がある

回避方法

ヘッダ情報をプロキシサーバーなどで書き換えることで回避可能

cors-anywhereなどが有名