fetch通信をデベロッパーツールで非表示にしたい。

Question

外部のapiを使用してサイトの構築をしています。
最近になってfetchでの通信URLがデベロッパーツールで丸見えになっていることが発覚しました。

様々なやり方を検索する中でデベロッパーツールによるfetch通信の状態を非表示にする方法があると聞きました。
ただやり方が全くわかりません。

バニラjavascriptでできるものなのでしょうか？

丸投げで申し訳ないのですが方法があれば教えていただきたいです。
よろしくお願いいたします。

要約：fetchリクエストURLにapiキーが含まれているためデベロッパーツールでは通信状況を見れないようにしたい

Comments

[hoshi-takanori]

無理でしょうね。というか、秘匿すべき情報なら URL に含めるべきではないし、URL に含まれてる (API 提供元がそうしてる) なら丸見えでも特に問題はないってことでは…。

[退会済みユーザー]

> fetchリクエストURLにapiキーが含まれているためデベロッパーツールでは通信状況を見れないようにしたい

今は、

ユーザー (ブラウザ) ⇔ 外部 API

というようになっているということですか？ であれば、無理です。構成を、

ユーザー (ブラウザ) ⇔ あなたのサイト ⇔ 外部 API

としてはいかがでしょう？

Answer 1

クライアントサイトだけでは無理です。
自アプリケーションにサーバーサイドも絡める。
そのAPIへのリクエスト自体をサーバーサイドから投げる。
Javascriptからはそのサーバーサイドへのリクエスト送ってレスポンス受け取るのみ（勝手に使われないようにパスワードとかキーなど何かしらで照合したほうがよい）

Comments

[m.ts10806]

あぁ、すでにコメントで言及されていた

Answer 2

ご指摘いただいたようにサーバーサイド（php）で動かそうとしていますが勉強不足故時間がかかっています。実装できるまではconsole.clearで通信履歴を消そうと思います。

非表示にできないものだったのですね。
今後のためにもphpも学んでみようと思います。
ご協力ありがとうございました。