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

メールアドレスが公開されることはありません。

関連記事

Chrome

ブックマークレットで画面上の色を取得する(Eye Dropper APIを利用)

画面上の色を取得するブックマークレットを紹介します。

CSS

Simple.css の使いみちについて

Simple.css の使いみちについて書いています。

Web

閲覧しているウェブページで利用されている HTTP のバージョンを確認する方法

ウェブブラウザで ウェブサイトを閲覧している際、HTTP のどのバージョンが使われているのか確かめる方法を紹介します。 目次Chrome の場合FirefoxEdge Chrome の場合 (1) ウ …

Web

【HTML】img 要素の srcset 属性 と sizes 属性について

目次1. デバイスピクセル比2. img 要素の srcset 属性 と sizes 属性3. sizes 属性4. srcset 属性x 単位で画像ファイルのサイズを指定する場合w 単位で画像ファイ …

HTML

HTML におけるコメントの書き方

HTML におけるコメントの書き方について説明します。 目次1. コメントとは?2. HTML におけるコメントの記述テキストの制限3. 仕様書 1. コメントとは? まず、「コメント」というのは、「 …