開発史
bitmap-proxyの発案〜挫折
従来から個人的なJavaScriptコードを多数書いていたyuki_minoh.iconは、ScrapboxでUserScriptを書き始め、すぐにどハマりする
じきに、どうにかCross Origin Resource Sharingが実現できないかと探究を始め、プロキシサーバーに注目
connect-srcが制約されていたため、Cross Origin Resource Sharingはほとんど不可能と考えられていた
cors-anywhereを常用していたことで、プロキシサーバー自体には親しんでいた
yuki_minoh.iconは、Scrapboxの画像のContent Security Policyが寛容なことに気づき、レスポンスを画像に埋め込めば通信が実現できるのでは、というアイデアを思いつく
概要
画像URLにリクエスト情報を埋め込み、サーバー側でそれをデコードして実行
レスポンスを画像に埋め込んで返却し、ブラウザで解読して情報を取得する
Google Apps Scriptを採用
2021年5月はじめごろ
ググってみたところ、ビットマップ画像ならヘッダー情報は54バイトで済み、簡単に実装できそうだという結論に至ったyuki_minoh.iconは、Proof of Conceptを開始する
画像エンコーダを実装
多分この時だったはず
しかし、Google Apps Scriptでは、どうしてもバイナリデータを提供することができず、挫折
特に常用していた経験があったため選んだ
このプロジェクトの最初の動機は、「本来画像を提供できないGoogle Apps Scriptでも、無理矢理バイナリをテキストにして、Content-Type: text/htmlのまま画像として読み込ませることで画像送受信を実現してやろう」という悪戯心で始まっていた
そのため、主なモチベーションを失ったyuki_minoh.iconは、しばらくこの話題から離れることになる
失敗の原因はCross Origin Read Blocking
画像をテキストだと言い張って画像要素に読み込ませようとしたため、当然ながらブロックされる
テキストのデータを画像にエンコードし、それをContent-Type: text/htmlのまま画像として読み込ませるという荒技を試みていた
この頃の名称はまだbitmap-proxyとして考えていた
node-bitmap-proxyの誕生とProof of Concept
2021年8月末〜
yuki_minoh.iconは、失敗した後もたびたび気にかかっていた「ScrapboxでのCross Origin Resource Sharingの実現」をもう一度試みるようになる
今回選択された実行環境はglitch
開発名がnode-bitmap-proxyとなる
画像エンコーダがGoogle Apps Script（≒JavaScript）で書かれていたため、Node.jsが動く必要があった
サーバーサイドにcors-anywhereを導入し、本格的なウェブサーバーの構成をとる
画像エンコーダとサーバーを一週間ほどかけて調整し、正常な読み込みを苦しみながら実装
Proof of Concept達成
苦労の原因はcors-anywhereの構成を詳しく理解する必要があったため
しかし、ソースコードのリファクタが必要だと感じたyuki_minoh.iconは、再びこのプロジェクトを保留
達成したのは実はブラウザからのリクエスト内容を、指定URLにバイパスするというだけで、元来のURLからのリクエスト情報のデコードは実装していなかった、というのもあった
実生活もめっちゃ忙しかった
node-bitmap-proxyから、js-fetch-proxyへ
2021年10月はじめ〜2021/10/06
サーバーサイドのリファクタリングに一定の目処が立つ
しかし、ブラウザ側のfetch関数の実装に難航
Server-side HTTP Requestを許容するか？それともWHATWGのWeb Fetch APIに基づく挙動にするか？を決めかねていた
Web Fetch APIはServer-side HTTP Requestに比べ、かなり制約が多い
そこでコンセプトが抽象化される
before
画像URLにリクエスト情報を埋め込み、サーバー側でそれをデコードして実行
レスポンスを画像に埋め込んで返却し、ブラウザで解読して情報を取得する
after
サーバーでブラウザからのHTTPリクエストを代理実行
通信手段は可能なものから適宜選ぶ
違い
通信方法は画像に限らない
リクエスト元に応じて、可能な手段を適宜実行する
Scrapboxなら画像
Server-side HTTP Request
より自由な通信を可能にして、ユースケースを拡大する
js-fetch-proxyの誕生