More Web Proxy on the site http://driver.im/

CSP と CORS の違い

※当サイトにはプロモーションが含まれています。

投稿日：2021年11月18日更新日：2023年9月8日

目次

1. はじめに
2. CSP と CORS の違い
3. それぞれの HTTPヘッダ

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 コメントをキャンセル

関連記事

: Firefox：ツールバー上の「ブックマークをインポートする」を隠す(非表示にする)
Firefox の話です。とある環境で、ツールバーの左端に「ブックマークをインポートする…」という項目が表示されていました。ツールバーを表示している場合の話です。めったに使うものでは …

: Chrome 77 デベロッパーツールの新機能
目次1. はじめに2. 主な新機能要素のスタイルをコピーするレイアウトシフト (layouts shifts) を表示するAudits パネルの Lighthouse 5.1OS テーマとの同期ブレー …

: DevToolsで、CSSの詳細度 (Specificity)が表示されるようになりました
DevToolsで、CSSの詳細度 (Specificity)が表示されるようになりました。

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

: robots.txt ファイルとは？
robots.txt ファイルとは？

PREV: Windows: gVim からクリップボードを利用する（キーボードのみ利用）
NEXT: 画面上に日付のないWebページの日付を調べる