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

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

関連記事

Google

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

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

Web

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

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

ICTリテラシー

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

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

CSS

CSS: Individual transform properties が便利

CSS の Individual transform properties が便利です。

Web

robots.txt ファイルとは?

robots.txt ファイルとは?