CORSとCSPの違いを完全解説！ウェブ安全の秘密と仕組みを中学生にもわかる言葉で

---

CORSとCSPの違いとは何かを徹底解説する

まずは前提を押さえましょう。ウェブページが別のドメインにある資源を取りに行くとき、ブラウザはみんな同じ origin の安全ルールを守ろうとします。ここで登場するのが CORS です。

CORS は Cross Origin Resource Sharing の略で、サーバが許可するかどうかをヘッダで伝える仕組み。つまり「このページはこのドメインの資源を使っていいですよ」という許可サインを返す役割を担います。許可がないとブラウザはリクエストをブロックします。プリフライトリクエストと呼ばれる事前確認のやりとりが走ることもあり、安全性を高めるための仕組みです。

一方で CSP は Content Security Policy の略で、ページが読み込むコンテンツそのものの安全性を守るための仕組みです。悪意あるスクリプトの実行や外部リソースの読み込みを制限することで XSS などの攻撃を防ぎます。ヘッダや meta でポリシーを設定します。

つまり、CORS は「誰が誰の資源を使えるか」という通信の許可を決め、CSP は「ページ内で何を実行して良いか」を決める security の設計図です。目的が異なるため設定場所や効果の現れ方も変わります。使い分けが大切です。

この二つを混同しないことがウェブ開発の第一歩 です。

CORSの仕組みと使い方をやさしく解説

CORS の基本は「サーバが許可を出すかどうか」です。ブラウザは cross-origin のリクエスト時に先に OPTIONS というプリフライトと呼ばれる確認を送ることがあります。サーバは Access-Control-Allow-Origin というヘッダで許可する origin を返します。複数の origin を許可したい場合は具体的な値を列挙したり、必要に応じてワイルドカード * を使いますが credentials を使う場合はワイルドカードは使えません。

具体例として、あなたのページが http://example.com で、API が http://api.example.org にあるとします。API 側のレスポンスに Access-Control-Allow-Origin: http://example.com が含まれていれば、ブラウザはリクエストを許可します。許可されていなければブロックされ、エラーがコンソールに出ます。

さらに重要なのが認証情報の扱いです。credentials を true にするとクッキーや認証ヘッダが含まれるため、Access-Control-Allow-Origin には具体的なドメインを指定し、ワイルドカードは使わない、というのが基本ルールです。これらの挙動を理解すると、第三者のウェブサイトから資源を安全に共有することができます。

CORS を正しく設定するにはサーバ側の設定が鍵です。クライアント側だけの設定で安全と思い込んでしまうと脆弱になります。現実の運用では、どの域からのリクエストを許可するのか、どの HTTP メソッドを許可するのか、どのヘッダを許容するのかを細かく決めることが大切です。

なお、CORS はあくまで「アプリケーションの通信の安全性」に関わる仕組みです。ページ内のコードの安全性を直接守るものではない点も覚えておきましょう。

able>項目概要役割クロスオリジンのリソース共有の許可を制御主な設定場所サーバのレスポンスヘッダ影響範囲ブラウザのリクエストの成否とアクセス可能性ble>

CSPとは何かをわかりやすく解説

CSP はページ上の実行コンテンツの出所と動作を決定します。例えば script-src のポリシーで「自己のドメインのみ許可」や「nonce を持つスクリプトのみ許可」といった制限を設け、インラインスクリプトの実行を禁止したり、外部リソースの出所を限定するだけで、XSS のような攻撃を未然に防ぐことができます。実装の方法としてはヘッダ Content-Security-Policy を設定する方法と、HTML の head に meta tag を置く方法があります。実務ではサーバのヘッダで一括管理するケースが多く、フォールバックとして meta tag を使う場面もあります。

重要なポイントは「信頼できるソースのみを許可する」という基本を徹底することです。inline のスクリプトを使わず、外部リソースの出所を限定するだけで、多くの攻撃を未然に防ぐことができます。

ただし過剰な制約は開発の自由度を下げるため、運用時には分析と調整が必要です。ポリシーを厳しくしすぎると正しく動かないこともあるので、徐々に適用していくのが良い方法です。

ピックアップ解説

ねえ、CORSの話、ただの専門用語に感じるかもしれないけど、実は普段のウェブ体験と深くつながっているんだ。ある日友だちのサイトが別のサイトの資源を借りようとするとき、相手サイトが貸してくれるかどうかを返事で決める。そんなやり取りを想像してみると、CORSは人と人の約束ごとみたいにも見える。実際にはカードを使うかのように、許可の表情がヘッダに現れる。つまり私たちがブラウザで何かを読み込むとき、遠く離れた別のドメインにお願いして良いかどうかを判断するのが CORS だ。これを理解すると API を公開するときの安全設計がぐんと楽になる。

---