WEBサイトに拡張機能が仕込んだPOST値およびレスポンス値を、サイト運営者に秘匿することはできますか？

Question

実現したいこと

WEBサイト上で GAS への POST を fetch() で実行するにあたって、そのPOST値およびレスポンス値を秘匿したいです。

前提・状況

Chrome 拡張機能を作っています。

どのWEBサイトでも「保存」ボタンをappend()し、クリックすると一部テキストを GAS に POST し、GAS は Notion に保存する。という機能です。

各WEBサイト上で fetch() して GAS へ POST する流れを想定していますが、その GAS は自分用なのでキーの検証機能を実装しようと考えました。

そこで不安がよぎりました。

不安・疑問

WEBサイト運営者は、そのサイト上のPOST値やレスポンス値を把握できるのでしょうか？

例えば MutationObserver() が「DOMツリーの変化を監視する」ように、「POST値やレスポンス値を監視する」みたいなことがもしできるのであれば、私が POST するキーは運営者にバレバレになってしまいますよね。

この不安から生じた疑問が、タイトルの通り、POST値およびレスポンス値を、サイト運営者に秘匿する方法です。

（もちろん、そもそもサイト運営者がこれらの値を確認する方法などない。ということでしたら解決です。）

該当のソースコード

考えている fetch() の流れです。もしサイト運営者がPOST値を監視できるのであれば、この GAS_KEY はあまり効果がありませんよね・・。

const requestData = {
	data1: 'data1',
	data2: 'data2',
};
const GAS_KEY = 'gas_key';
const requestOptions = {
	method: 'POST',
	body: JSON.stringify(requestData),
	headers: {
		'Authorization': GAS_KEY,
		'Content-Type': 'application/x-www-form-urlencoded',
	}
};
const gasEndpointUrl = 'https://script.google.com/macros/s/●●/exec';
fetch(gasEndpointUrl, requestOptions)
	.then(response => response.json())
	.then(data => {
		console.log('data:', data);
	})
	.catch(error => {
		console.error('error:', error);
	});

検索したこと

「POST　監視　JavaScript」で検索するとページが行う通信を監視したい。 というご質問がありました。

やっぱりできてしまうのか？！と一瞬焦りましたが、これはサイト運営者が自ら設置した <form> についての話題のようで、今回のように運営者でない拡張機能側の値には当てはまらなそうだと思われました。

しかしこの事例だけでは当然判断がつかず、さりとて他に有効な検索ワードも思いつきません。

考えたこと

CSRF 対策として使われる仕組みが転用できるかもと考えました。

つまり POST にキーを持たせるだけでなく、GAS 実行の都度異なる値のトークンを発行し、そのトークンを拡張機能側で受け取って都度 POST に含める仕組みです。

この仕組みは、POST値の監視しかできないのであれば有効に思われますが、しかしPOST値の監視だけでなくレスポンス値の監視もできるのであれば、やはり効果がないだろうという結論に至りました。

補足情報（FW/ツールのバージョンなど）

バージョンなど特筆すべき補足は特にございませんが、質問内容に不足情報などあればご指摘頂ければ幸いです。

直接的な正解に限らず、有効な検索ワードを貼って頂くだけでもうれしいです。（私がそれで理解できずさらに質問を重ねてしまうやもしれませんが・・）

どうぞ宜しくお願い致します。

Comments

[tmp]

あなたの例で上げたページのメソッドのオーバーライドついては、問題ないってことですか？
WEBサイト運営者が仕掛けるってのは、あまり考えられないですが、過去にできことならなんでも、してしまうサイトもありますからね。
例「Ad4U」で検索してみよう。こんな悪質なサイトもあるのですから気を付けた方がいいのか・・余計な心配なのか

[kiringiraffe]

コメントありがとうございます。

> あなたの例で上げたページのメソッドのオーバーライドついては、問題ないってことですか？

すみません、どこを指していらっしゃるのかわかりませんでした。

> 例「Ad4U」で検索してみよう。

この方法すごいですね。勉強になりました。

Answer 1

既に別回答でも言われていますが、fetch 自体は上書き可能です。

ブラウザ環境では fetch はnative codeとして定義されており、基本的には window (グローバルオブジェクト) に生えています。
ですので、下記の通り fetch の利用を妨害することができます。

window.fetch // => ƒ fetch() { [native code] }

window.fetch = 3;

window.fetch // => 3

---

また、任意のコードで差し替えることが出来るため、ここで通信内容を監視（どこかに投げて保存とか）も出来るでしょう。

console.log('--- 上書き前 ---');
console.log((await window.fetch('https://www.google.com', {key:'秘密にしたいキー'})).status); //※https://www.google.comで開発者ツール開いて実験してます

window.originalFetch = window.fetch;
window.fetch = function() { console.log(arguments); return window.originalFetch(...arguments) };

console.log('--- 上書き後 ---');
console.log((await window.fetch('https://www.google.com', {key:'秘密にしたいキー'})).status);

--- 上書き前 ---
200
--- 上書き後 ---
Arguments(2) ['https://www.google.com', {…}, callee: ƒ, Symbol(Symbol.iterator): ƒ]
  0: "https://www.google.com"
  1: {key: '秘密にしたいキー'}
200

---

以下はちゃんと深堀してはいないですが、toString の中身を確認すれば fetch 上書きの検出はできるのかも？という可能性の提示です。

console.log('--- 上書き前 ---');
console.log(window.fetch.toString());
console.log(window.fetch.toString.toString());

window.originalFetch = window.fetch;
window.fetch = function() { console.log(arguments); return window.originalFetch(...arguments) };
console.log('--- 上書き後 ---');
console.log(window.fetch.toString());
console.log(window.fetch.toString.toString());

window.fetch.toString = function() { return 'function fetch() { [native code] }'; }      // chrome
window.fetch.toString = function() { return `function fetch() {\n    [native code]\n}`}; // firefox
console.log('--- toString偽装後 ---');
console.log(window.fetch.toString());
console.log(window.fetch.toString.toString());

--- 上書き前 ---
function fetch() { [native code] }
function toString() { [native code] }
--- 上書き後 ---
function() { console.log(arguments); return window.originalFetch(...arguments) }
function toString() { [native code] }
--- toString偽装後 ---
function fetch() { [native code] }
function() { return 'function fetch() { [native code] }'; }

--- 上書き前 ---
function fetch() {
    [native code]
}
function toString() {
    [native code]
}
--- 上書き後 ---
function() { console.log(arguments); return window.originalFetch(...arguments) }
function toString() {
    [native code]
}
--- toString偽装後 ---
function fetch() {
    [native code]
}
function() { return `function fetch() {\n    [native code]\n}`}

検出例で示した通り、単純な上書き＆偽装なら fetch#toString だけでなく fetch.toString#toString まで確認すれば native code か否か検出できます。
ただ、ググるともっと複雑なことして偽装してるパターンもあるらしくこれ以上はよく分かりませんでした。

というわけで、toStringの文字列比較等で上書き確認済みなら安全……とは言い切れませんが、参考程度に。

Comments

[kiringiraffe]

具体的なコードをありがとうございます。なるほど。fetch がどこから生えているのかを考えれば上書きの可否についても思い至れたのですね。toString() で文字列に変更するという工夫も見たことがないアプローチで大変勉強になりました。

Answer 2

サービスワーカを使うと通信のプロクシができるので、fetch API を通さないような通信でもページ内で起きていれば捕まえることができるはずです。
レスポンスを参照することもできます。やったことはないですが、レスポンスを偽装することもできる？のかな？ レスポンスの偽装を試してみましたが、可能ではありました。
[Javascript] Service Worker 初心者入門、概要から使い方まで │ Web備忘録

Answer 3

各WEBサイト上で fetch() して GAS へ POST する流れを想定していますが

そもそも論として「自分のサイトへ第三者が書き込んだソースによって行われる通信を監視する」必要性がある場面を想像することが難しいのですが、たとえばfetchそのものを監視できるようなものに差し替えることは理屈の上では可能です。

fetchをページ内のコンテキストではなく、拡張機能サイドで行う、という手段は取れないのでしょうか？

Comments

[kiringiraffe]

ご回答ありがとうございます。

> fetchをページ内のコンテキストではなく、拡張機能サイドで行う、という手段は取れないのでしょうか？

とりあえず fetch() は拡張機能に書くつもりです。具体的には User JavaScript and CSS に書くつもりです。

User JavaScript and CSS
https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

尚、ここに書くことが、ページ内のコンテキストにあたるのかどうか？をよく理解できておりません。（コンテキストという概念に今はじめて触れました。）

そして「拡張機能に書いた場合に、そのPOST値やレスポンス値はWEBサイト運営者が拾おうと思えばできるのではないか」という不安が生じており、今回の疑問となった次第です。

もし「そもそもWEBサイト運営者がこれらの値を確認する方法などない」ということでしたら解決なのですが、いかがでしょうか？

[maisumakun]

> User JavaScript and CSS

こちらの拡張機能は、書いた内容を「ページ内」に適用してしまうもののようです。

[kiringiraffe]

なるほど。拡張機能によってコンテキストを分けるタイプと分けないタイプがあるのですね。これは詳しくないと分かりませんね。ありがとうございます。

Answer 4

隠匿するテキストをjavascriptで圧縮してパスワードを設定すれば良いのではないでしょうか。
参考サイト
なお、検証はしていません。

考え方は間違っていないはずなので検討頂けると幸いです。

Comments

[kiringiraffe]

ご回答ありがとうございます。２点よろしいでしょうか？

１つめ
やはりPOST値およびレスポンス値はWEBサイト運営者に筒抜けになるということでしょうか？ではWEBサイト運営者がそれを把握するにはどのような方法があるのか教えて頂いてもよろしいでしょうか？
「MutationObsrver()という方法でDOMを監視できるように、●●という方法でPOST値を監視できる」といった情報を知りたいと思っております。そういった方法を知れれば対策が絞れてくるためです。

２つめ
そういった方法を私は知らぬせいもあり、ご提示の方法がなぜ対策になりうるのか理解できませんでした。例えばPOST値になんらかのデータが含まれるわけですが、そのデータにパスワードがかかっていたとしても、GAS側では既定の処理に基づきパスワードを解除することになりますよね。
つまりPOST値を監視したりして拾った者は、そのPOST値の正しい値やパスワードを知らずともGASが実行できてしまう（GASが規定の処理に則ってパスワードを解除する）のではないかと懸念しております。

恐れ入りますが以上の点につきましてご返答頂けましたら幸いです。宜しくお願い致します。

[ea_staytune]

>POST値およびレスポンス値はWEBサイト運営者に筒抜けになるということでしょうか？
出来ると責任を持って断言出来ませんが、出来るという前提で対策を講じるべきです。
方法は、ネットワークパケットの解析とWEBサーバのログの２種類は確実です。

>つまりPOST値を監視したりして拾った者は、そのPOST値の正しい値やパスワードを知らずともGASが実行できてしまう（GASが規定の処理に則ってパスワードを解除する）のではないかと懸念しております。
パスワード付きのzipファイルは監視側がパスワードを知らないと解析は出来ません
また、仮にzipファイルがパスワード無しで解析出来た場合は、違う方法での暗号化を検討する事となります。

[kiringiraffe]

ご返答ありがとうございます。

> 方法は、ネットワークパケットの解析とWEBサーバのログの２種類は確実です。

拡張機能がPOSTした値はブラウザがPOSTしているのではと思うのですが、WEBサイト運営者のサーバーがPOSTしていることになるのでしょうか？

> パスワード付きのzipファイルは監視側がパスワードを知らないと解析は出来ません

仰る通りですが、監視側がパスワードを知ったり解析できたりする必要がないということを懸念しているのです。（パスワードを知らなくても解析するのはGASのプログラムですので。）