Web

CSP と CORS の違い

投稿日:

1. はじめに

CSP と CORS の違いをざっと確認するためのページです。

2. CSP と CORS の違い

CSP
  • Content Security Policy
  • 読み込む側のWebサーバーで設定する。
  • 内部及び外部ドメイン上の各種リソース読み込みを制限する機能。
  • インラインスクリプトも制限することができる。
  • ドメインの種類・リソースの種類などを指定することができる。
  • キーワード
    • Content-Security-Policy レスポンスヘッダ
    • Content-Security-Policy: default-src ‘self’
CORS
  • Cross-Domain Resource Sharing
  • 読み込まれる側のWebサーバーで設定する。
  • ドメイン単位で、XHR通信フォントの読み込みに対して許可もしくは拒否する。
  • キーワード
    • Origin リクエストヘッダ
    • Access-Control-Allow-Origin レスポンスヘッダ
    • preflightリクエスト

3. それぞれの HTTPヘッダ

CSP の HTTPレスポンスヘッダ

CSP の HTTPレスポンスヘッダ
  • リクエストしたページ自体のレスポンスヘッダに出力される。
  • リソースの種類毎に、許可する項目を指定する。

CORS の HTTPヘッダ

CORS のHTTPヘッダ
  • ページ内の各パーツを取得する際のリクエストヘッダとレスポンスヘッダに出力される。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順

目次1. AMP とは?なぜ、AMP が必要なのか?AMP フレームワーク1. AMP HTML2. AMP JS3. AMP キャッシュその他2. AMP for WordPress プラグインにつ …

DokuWiki

DokuWiki で閲覧専用ユーザーを作る手順

DokuWiki において、閲覧専用ユーザーを作成する手順を紹介します。 目次DokuWiki で、閲覧専用ユーザーを作成する手順1. 閲覧専用グループを追加する。2. ユーザーにグループを指定するお …

Web

AMP for WordPress プラグインを利用した AMP対応をやめる方法

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順 では、AMP for WordPress プラグインの利用方法について説明しましたが、今回のその逆 …

CSS

CSS の基礎

目次1. CSS とは?2. CSS のバージョン(分類)Cascading Style Sheets, level 1Cascading Style Sheets, level 2 (CSS2)Ca …

プライバシー

ウェブブラウザのサードパーティ・クッキーを無効にする方法

目次1. サードパーティ・クッキーとは?2. サードパーティ・クッキーを無効にする手順Chrome の場合Firefox の場合Microsoft Edge の場合Internet Explorer …