Help us understand the problem. What is going on with this article?

Content-Security-Policyの概要メモ

Content Security Policy(CSP)

概要

  • GoogleTagManagerのカスタムHTMLタグ、カスタムJavaScript変数を制限するために調べた時のメモ。

基本仕様

  • ホワイトリストを使用して許可する対象をクライアント(ブラウザなど)に指示する。
    • ホワイトリストに設定されたリソースだけ実行およびレンダリングさせることができる。
  • ホワイトリストはディレクティブで設定する
  • デフォルトでインラインコードとeval()は有害とみなす
    • 'unsafe-inline' もしくは 'unsafe-eval'で明示的に有効化する必要がある

設定方法

  • HTTPヘッダー
Content-Security-Policy: [ディレクティブ] [オリジン] [オリジン]; [ディレクティブ] [オリジン] [オリジン]; ...
  • metaタグ
<meta http-equiv="Content-Security-Policy" content="[ディレクティブ] [オリジン] [オリジン]; [ディレクティブ] [オリジン] [オリジン]; ...">

ディレクティブの書き方例

script-src https://host1.com https://host2.com;

オリジンの指定方法

名称
スキーム data:, https:
ホスト名 example.com
完全修飾URI https://example.com:443
ワイルドカード *://*.example.com:*
スキーム、ポート、ホスト名の一番左端のみに限定

オリジンに指定できるキーワード

  • これらのキーワードにはシングルクォーテーションが必要
キーワード 説明
'none' 何も一致しない = 全て無効化
'self' 現在のオリジンと一致する
サブドメインは除外
'unsafe-inline' インラインJavaScriptおよびCSSを許可する
'unsafe-eval' evalなどのtext-to-JavaScriptの仕組みを許可する

ディレクティブについて

ディレクティブ 説明
script-src スクリプト関連の権限を制限する
base-uri <base>要素に表示できるURLを制限する
child-src ワーカーと組み込みのフレームコンテンツのURLを制限する
connect-src XHR, WebSockets, EventSourceを経由して接続できるオリジンを制限する
font-src ウェブフォントを配信できるオリジンを制限する
form-action <form>タグからの送信の有効なエンドポイントを制限する
frame-ancestors 現在のページに組み込める参照元を制限する
<frame>,<iframe>,<embed>,<applet>タグに適用される
img-src 画像を読み込み可能なオリジンを制限する
media-src 動画と音声を配信できるオリジンを制限する
object-src Flashなどのプラグインの種類を制限する
plugin-types ページで起動できるプラグインの種類を制限する
report-uri コンテンツセキュリティポリシーが違反された時にレポートを送信するURLを指定する
style-src スタイルシートのscript-srcに相当する
upgrade-insecure-requests ユーザーエージェントに支持してURLスキーマを書き直し、HTTPをHTTPSに変更する
default-src 未指定の-srcディレクティブの大半に対してデフォルトを定義する

デフォルト

  • デフォルトではディレクティブ に制限はない
  • default-srcを設定することで、自動的に-srcで終わるディレクティブがdefault-srcのオリジンに設定される

実装の詳細

  • 使用するヘッダーによらずポリシーはページごとに定義される

インラインコードは有害とみなす

  1. 以下の2つだけではインラインスクリプトの注入に対処できない

    • CSPは明確にホワイトリストに登録されたオリジンに基づいている
    • 特定のリソースだけ受け入れてそれ以外を拒否する
  2. 以下を含むインラインスクリプトを完全に禁止する

    • インラインイベントハンドラ
    <a onclick="[JAVASCRIPT]">
    
    • javascript: URL
  3. 適切なaddEventListener()に置き換える必要がある

  4. どうしてもインラインスクリプトを使用したい場合はオリジンに'unsafe-inline'を指定する

    script-src 'unsafe-inline';
    

CSP1の対応状況

CSP2でのみ使用できるオリジン指定

  • nonce
    • 暗号化された値を用意し、CSPとscriptタグに設定する
// CSPの設定
script-src 'nonce-1234567890'
<!--  HTMLの設定 -->
<script nonce="1234567890" >
    alert('Hello');
</script>

参照

コンテンツ セキュリティ ポリシー

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away