Chrome拡張機能でCORSエラーを回避する方法
TL;DR（要約）
- 他サイトのHTTPステータスコード取得時にCORSエラーが発生
- Chrome拡張機能のバックグラウンドスクリプトを使用して解決
- 通常のウェブページでは不可能な方法だが、拡張機能では可能
背景
他サイトに飛んだ時のHTTPステータスコードを取得したかったのですが、CORSエラーで手が止まってしまいました。
CORSとは
あるオリジンで動いているWebアプリケーションに対して、別のオリジンのサーバーへのアクセスをオリジン間HTTPリクエストによって許可できる仕組み
なぜCORSエラーが存在するか
XSS（クロスサイトスクリプティング）・・・ユーザーが Web サイトにアクセスすることで不正なスクリプトが Client (Web ブラウザ) で実行されてしまう脆弱性
CSRF（クロスサイトリクエストフォージェリ）・・・ユーザーが既にログインしている別のセッションを悪用して、ユーザーの意図しない操作を行わせる
CORSエラーの意図がわかり、このエラーを回避したところでセキュリティの懸念が出てしまうことがわかりました。
直面した問題
出てきたCORSエラーログは以下です。
URLは差し替えました。
Access to fetch at 'https://hogehoge.com' from origin 'https://hogehoge.jp' has been blocked by CORS policy No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
和訳：
'https://hogehoge.com'からのフェッチにアクセスしようとしたところ、'[https://hogehoge.jp](https://hogehoge.jp)'のオリジンからはCORSポリシーによってブロックされました。リクエストされたリソースには'Access-Control-Allow-Origin'ヘッダーが存在していません。もし不透明なレスポンスがあなたのニーズを満たすならば、リクエストのモードを'no-cors'に設定してCORSを無効にした状態でリソースをフェッチしてください。
エラーが示す解決策
-
リクエストされたリソースに'Access-Control-Allow-Origin'ヘッダーをつける
-
もし不透明なレスポンスがあなたのニーズを満たすならば、リクエストのモードを'no-cors'に設定してCORSを無効にした状態でリソースをフェッチ
の二つです。
結論からいうとどちらもダメでした。
理由：1.'Access-Control-Allow-Origin'ヘッダーとは、リクエストを受けたウェブサーバーがクロスオリジンのリクエストに対し、どのオリジンからのアクセスからのアクセスを許可するか設定する所です。サーバーは他社のものなので、設定をいじることは出来ません。
理由：2. 'no-cors'モードでリクエストを行っても「不透明なレスポンス」が返ってきます。今回取得したHTTPステータスは読み取れません。それ以外にもヘッダー情報、レスポンスボディも読み取ることは出来ません。
最終的な解決方法
先輩にお聞きして、Chrome拡張機能はバックグラウンドスクリプトからfetchが可能なことがわかりました。
拡張機能は特別な権限をもち、通常のウェブページからよりも高いレベルのアクセス権をブラウザから与えられているそうです。
学んだこと
ChatGpt4Apiを使用して調べていましたが、Chrome拡張機能開発という前提条件が抜けていたため、欲しい情報に辿り着けませんでした。これからは、精度の高い情報が欲しい時には前提条件を細かく書いてみようと思います。
また、自社のサービスで別オリジンにfetchする機能がなかったか考えて、そのコードを見つけられるともう少し早かったかもしれないです。
参考資料
なんとなく CORS がわかる...はもう終わりにする。
content_script.jsとbackground.jsの間でデータをやりとりする 【自作chome拡張機能】