🌐

CORSエラーについて調べてみた

に公開
JavaScript
http
Security
CORS
web開発
tech

エラーの内容

  • 開発中に以下のエラーに遭遇したのでメモとして残す
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at

オリジンとは

  • オリジン＝スキーム （プロトコル）、 ホスト （ドメイン）、 ポート番号 の組み合わせ
  • http://example.com:80ならhttpがプロトコルでexample.comがホスト、80がポート番号

同一オリジンポリシーとは

  • 同一オリジンポリシー（Same-Origin Policy、SOP） は、ウェブブラウザがセキュリティを確保するために採用している重要なセキュリティモデルの一つです。このポリシーは、異なる「オリジン」間でのリソースやデータへのアクセスを制限することで、悪意のある攻撃（例：クロスサイトスクリプティング（XSS）、クロスサイトリクエストフォージェリ（CSRF））からユーザーを保護します。

許可される操作

  • 同一オリジン内では、以下のような操作が自由に行えます

    • JavaScriptから同じオリジンのAPIにアクセスしてデータを取得・送信する。
    • 同じオリジン内でiframeを使用してコンテンツを埋め込む。
    • 同じオリジンのスタイルシートやスクリプトを適用する。

制限される操作

  • 異なるオリジン間では、以下のような操作が制限されます：

    • https://www.example.com から https://api.anotherdomain.com へのJavaScriptによる直接的なデータ取得。
    • http://www.example.com から https://www.example.com（プロトコルが異なるため）への直接的なデータアクセス。
    • https://www.example.com:443 から https://www.example.com:8443（ポートが異なるため）への直接的なアクセス。

CORSとは

  • ウェブブラウザが異なるオリジン（ドメイン、プロトコル、またはポートが異なる場合）間でリソースを安全に共有するための仕組み

CORSヘッダーの利用

  • CORSヘッダーは、ウェブブラウザが異なるオリジン間でのリソース共有を制御するために使用されるHTTPヘッダーです。これらのヘッダーを適切に設定することで、セキュリティを保ちながら必要なデータの共有が可能になります。以下は指定の例。
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

Discussion