ラボラジアン

Web技術の情報サイト（+ ICTリテラシーなど）

CSP と CORS の違い

投稿日：2021年11月18日

目次

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

関連記事

: Google Search Console で「ページ上で視認性の高い動画は検出されませんでした」というエラーが検知されたので対応しました

Google Search Console で「ページ上で視認性の高い動画は検出されませんでした」というエラーが検知されたので対応しました。

: ブラウザをキーボードで操作するための拡張機能 Vimium

ブラウザをキーボードで操作するための拡張機能 Vimium について説明します。

: 無料レンタルサーバーとDokuWiki で作る自分用情報サイト

本サイトにパソコン内に自分専用の情報データベースをつくるというページがあります。詳細はリンク先を見て頂くとして、本ページではこれに関連して、「自分専用の情報サイトを作る」ためのオススメの方法につい …

: CSS: Individual transform properties が便利

CSS の Individual transform properties が便利です。

: robots.txt ファイルとは？

robots.txt ファイルとは？

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