【Windows】ブラウザのcross-originエラーを回避する方法【Chrome・Edge】

Windows
2023.05.28

はじめに

APIテストやsvg画像の表示確認など、ローカルPCのブラウザを普通に開くだけではできないため、ラウザをcross-originモードで開いて実施しています。

Chrome・Edgeのcross-originエラーを回避する方法を記載します。

ブラウザをcross-originエラーを回避する方法

Chromeをcross-originモードで開く

Chromeをcross-originモードで開く方法です。

  1. 開いているChromeを全て閉じます。(これが面倒なのでEdgeで実施することをオススメします)
  2. Windowsボタン＋Rで「ファイル名を指定して実行」を表示
  3. 「名前(O):」へ以下を入力し「OK」を押下
"C:\Program Files\Google\Chrome\Application\chrome.exe" -allow-file-access-from-files

「”C:\Program File。。。」の部分はインストールフォルダへ変更してください。

  1. 開いたChromeへhtmlファイルをドラッグ＆ドロップ

Edgeをcross-originモードで開く

Edgeをcross-originモードで開く方法です。

  1. 開いているEdgeは閉じなくてOK
  2. Windowsボタン＋Rで「ファイル名を指定して実行」を表示
  3. 「名前(O):」へ以下を入力し「OK」を押下
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --disable-web-security --user-data-dir="C://Chrome dev session"

「”C:\Program File。。。」の部分はインストールフォルダへ変更してください。

  1. 開いたEdgeへhtmlファイルをドラッグ＆ドロップ

実施結果

サポートされていないコマンドライン フラグ –disable-web-security を使用しています。これにより、安定性およびセキュリティに関するリスクが生じます。

と表示されれば、cross-originモードで開けています。

cross-originのエラーが発生せずにAPIテスト等が出来る状態になっています。

Cross-Originとは

そもそもCross-Origin（略称: CORS）とは、ウェブセキュリティのコンセプトで、ウェブページの一つのドメイン（オリジン）から別のドメインのリソースにアクセスする際に適用されるポリシーおよび仕組みを指します。ウェブページが異なるオリジンのリソースにアクセスしようとすると、ブラウザはセキュリティ上の理由からデフォルトでアクセスを拒否します。CORSは、これらのセキュリティポリシーを管理および緩和するために使用されます。

以下は、Cross-Originの主な概念と関連要素です：

  1. オリジン (Origin): オリジンは、ウェブページが読み込まれた場所を示す情報です。オリジンは通常、プロトコル（HTTP、HTTPSなど）、ホスト名、およびポート番号で構成されます。例えば、”https://www.example.com” と “https://api.example.com” は異なるオリジンです。
  2. Same-Origin Policy: ウェブブラウザはデフォルトでSame-Origin Policyを適用し、異なるオリジン間のリソースへのアクセスを制限します。これはセキュリティを確保するための重要な原則です。
  3. Cross-Origin HTTPリクエスト: ウェブページが異なるオリジンのリソースにアクセスするために行うHTTPリクエストは、Cross-Origin HTTPリクエストと呼ばれます。主なタイプには以下が含まれます。
    • CORSリクエスト: Cross-Origin Resource Sharing（CORS）は、ウェブサーバーがブラウザに対して、異なるオリジンからのリクエストを許可するためのヘッダーを送信する仕組みです。
    • JSONPリクエスト: JSONP（JSON with Padding）は、異なるオリジンのデータを取得するために使用される方法で、スクリプト要素を通じてデータをロードします。
  4. CORSヘッダー: サーバーサイドは、CORSリクエストを許可するために特定のHTTPヘッダーをレスポンスに追加します。これらのヘッダーは、ブラウザに対してクライアントからのリクエストを許可するかどうかを示します。
  5. プリフライトリクエスト: プリフライトリクエストは、ブラウザが実際のリクエストを送信する前に、リクエストの許可をサーバーから取得するために送信される特別なリクエストです。これには、OPTIONSメソッドを使用して、許可を確認するための情報が含まれます。

Cross-Originのポリシーと仕組みは、セキュリティ攻撃を防ぐために非常に重要ですが、ウェブアプリケーションが異なるオリジンのサービスと連携する必要がある場合にも役立ちます。CORSを正しく設定することで、セキュリティと機能の両方を実現できます。

まとめ

ブラウザのcross-originエラーを回避する方法を説明しました。

APIテストを実施したいのにcross-originのエラーが発生してしまう場合、svg画像の表示確認したいにできない場合にはこの方法で解消します。

コメント

タイトルとURLをコピーしました