Content Security Policy (CSP) | Frontend Practical Guide

Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`api.HTMLIFrameElement.csp` 実験的	61	79			61
HTML 属性
`csp` 実験的	61	79			61
DOM API
`securitypolicyviolation_event` securitypolicyviolation イベントは、コンテンツセキュリティポリシーに違反があった場合に発行されます。	76	79	93	15.4	76	15.4
`securitypolicyviolation_event` securitypolicyviolation イベントは、コンテンツセキュリティポリシーに違反したときに発生します。	41	15	63	10	41	10
`nonce` nonce は HTMLElement インターフェイスのプロパティで、特定の読み取りを続行できるかどうかを決定するためにコンテンツセキュリティポリシーで使用される一度だけの暗号化番号を返します。	61	79	75	15.4	61	15.4
`SecurityPolicyViolationEvent` SecurityPolicyViolationEvent インターフェイスは Event から継承し、コンテンツセキュリティポリシー (CSP) が違反された場合に、Element/securitypolicyviolationevent、Document/securitypolicyviolationevent、または WorkerGlobalScope/securitypolicyviolation_event で送信される securitypolicyviolation イベントのイベントオブジェクトを表します。	41	15	63	10	41	10
`blockedURI` SecurityPolicyViolationEvent インターフェイスの BlockedURI 読み取り専用プロパティは、コンテンツセキュリティポリシー (CSP) に違反するためにブロックされたリソースの URI を表す文字列です。	41	15	63	10	41	10
`columnNumber` SecurityPolicyViolationEvent インターフェイスの columnNumber 読み取り専用プロパティは、コンテンツセキュリティポリシー (CSP) 違反が発生したドキュメントまたはワーカースクリプトのソースファイル行内の文字位置です。	41	15	63	10	41	10
`disposition` SecurityPolicyViolationEvent インターフェイスの性質読み取り専用プロパティは、違反したコンテンツセキュリティポリシー (CSP) がユーザーエージェントによってどのように処理されるように構成されているかを示します。	56	79	63	15	56	15
`documentURI` SecurityPolicyViolationEvent インターフェイスの documentURI 読み取り専用プロパティは、コンテンツセキュリティポリシー (CSP) 違反が発生したドキュメントまたはワーカーの URI を表す文字列です。	41	15	63	10	41	10
`effectiveDirective` SecurityPolicyViolationEvent インターフェイスの activeDirective 読み取り専用プロパティは、違反されたコンテンツセキュリティポリシー (CSP) ディレクティブを表す文字列です。	41	15	63	10	41	10
`lineNumber` SecurityPolicyViolationEvent インターフェイスの lineNumber 読み取り専用プロパティは、コンテンツセキュリティポリシー (CSP) 違反が発生したドキュメントまたはワーカースクリプト内の行番号です。	41	15	63	10	41	10
`originalPolicy` SecurityPolicyViolationEvent インターフェイスのoriginalPolicy 読み取り専用プロパティは、適用によって違反が明らかになったコンテンツセキュリティポリシー (CSP) を含む文字列です。	41	15	63	10	41	10
`referrer` SecurityPolicyViolationEvent インターフェイスのリファラー読み取り専用プロパティは、コンテンツセキュリティポリシー (CSP) に違反したリソースのリファラーを表す文字列です。これは URL または null になります。	41	15	63	10	41	10
`sample` SecurityPolicyViolationEvent インターフェイスのサンプル読み取り専用プロパティは、コンテンツセキュリティポリシー (CSP) 違反の原因となったリソースのサンプルを表す文字列です。	59	79	63	15	59	15
`SecurityPolicyViolationEvent` SecurityPolicyViolationEvent() コンストラクターは、新しい SecurityPolicyViolationEvent オブジェクトを作成します。	41	15	63	10	41	10
`sourceFile` SecurityPolicyViolationEvent インターフェイスの sourceFile 読み取り専用プロパティは、コンテンツセキュリティポリシー (CSP) 違反が発生したスクリプトの URL を表す文字列です。	41	15	63	10	41	10
`statusCode` SecurityPolicyViolationEvent インターフェイスの statusCode 読み取り専用プロパティは、コンテンツセキュリティポリシー (CSP) 違反が発生したウィンドウまたはワーカーの HTTP ステータスコードを表す数値です。	41	15	63	10	41	10
`violatedDirective` SecurityPolicyViolationEvent インターフェイスのoracledDirective 読み取り専用プロパティは、違反されたコンテンツセキュリティポリシー (CSP) ディレクティブを表す文字列です。	41	15	63	10	41	10
`worker_support` 労働者で利用可能	56	15	63		56
`securitypolicyviolation_event` securitypolicyviolation イベントは、ウェブワーカーの中でコンテンツセキュリティポリシーの違反が発生したときに発行されます。	41	15	63	10	41	10
その他
`html.elements.meta.http-equiv.content-security-policy` http-equiv="コンテンツセキュリティポリシー"	≤59	12	1	≤10.1	≤59	≤10.3
`html.global_attributes.nonce` nonce グローバル属性は、これは暗号化ノンス ("number used once") を定義するコンテンツ属性で、コンテンツセキュリティポリシーが指定された要素に対して読み取りを許可するかどうかを決定するために使用することができます。	61	79	75	15.5	61	15.5
`http.headers.Content-Security-Policy` HTTP の Content-Security-Policy レスポンスヘッダーは、ウェブサイト管理者が、あるページにユーザーエージェントが読み込みを許可されたリソースを管理できるようにします。いくつかの例外を除いて、大半のポリシーにはサーバーオリジンとスクリプトエンドポイントの指定を含んでいます。これはcross-site scripting攻撃を防ぐのに役立ちます。	25	14	23	7	25	7
`http.headers.Content-Security-Policy-Report-Only` HTTP の Content-Security-Policy-Report-Only response headerは、セキュリティポリシーを強制することなく、コンテンツセキュリティポリシー (CSP) 違反とその効果を監視するのに役立ちます。このヘッダーを使用することで、特定の Content-Security-Policy が適用・強制される前に、違反を検査または修復することができます。	25	14	23	7	25	7
`http.headers.Content-Security-Policy.base-uri` HTTP の Content-Security-Policy の base-uri ディレクティブは、文書の base 要素で使用することができる URL を制限します。この値が存在しない場合は、任意の URI が許可されます。このディレクティブが存在しない場合、ユーザーエージェントは base 要素の値を使用します。	40	79	35	10	40	9.3
`http.headers.Content-Security-Policy.child-src` HTTP の Content-Security-Policy (CSP) における child-src ディレクティブは、ウェブワーカーと frame や iframe などの要素を使用して読み込んだ、埋め込まれた閲覧コンテキストに対して有効なソースを定義しています。ワーカーでは、準拠しないリクエストは、ユーザーエージェントによって致命的なネットワークエラーとして扱われます。	40	15	45	10	40	9.3
`http.headers.Content-Security-Policy.connect-src` HTTP の Content-Security-Policy (CSP) における connect-src ディレクティブは、スクリプトインターフェイスを使用して読み込むことができる URL を制限します。以下の API が制限の対象となります。	25	14	50	7	25	7
`http.headers.Content-Security-Policy.default-src` HTTP の Content-Security-Policy (CSP) における default-src ディレクティブは、他の CSP のfetch directiveの代替として提供します。以下のディレクティブがいずれかが存在しないと、ユーザーエージェントは default-src ディレクティブを探して、この値を使用します。	25	14	23	7	25	7
`http.headers.Content-Security-Policy.font-src` HTTP の Content-Security-Policy (CSP) における font-src ディレクティブは、 @font-face によって読み込まれるフォントの有効なソースを指定します。	25	14	23	7	25	7
`http.headers.Content-Security-Policy.form-action` HTTP の Content-Security-Policy (CSP) における form-action ディレクティブは、指定のコンテキストからフォームの送信先として使用される URL を制限します。	40	15	36	10	40	9.3
`http.headers.Content-Security-Policy.frame-ancestors` HTTP の Content-Security-Policy (CSP) である frame-ancestors ディレクティブは frame、iframe、object 、embed などを使ってページを埋め込むことのできる親を指定します。	40	15	58	10	40	9.3
`http.headers.Content-Security-Policy.frame-src` HTTP の Content-Security-Policy (CSP) における frame-src ディレクティブは、 frame や iframe のような要素を使用して埋め込まれた閲覧コンテキストの読み込みに有効なソースを指定します。	25	14	23	7	25	7
`http.headers.Content-Security-Policy.img-src` HTTP の Content-Security-Policy における img-src ディレクティブは、画像やファビコンの有効なソースを指定します。	25	14	23	7	25	7
`http.headers.Content-Security-Policy.manifest-src` HTTP の Content-Security-Policy: manifest-src ディレクティブは、どのマニフェストがリソースに適用されるかを指定します。	40	79	41	11	40	11
`http.headers.Content-Security-Policy.media-src` HTTP の Content-Security-Policy (CSP) における media-src ディレクティブは、 audio および video 要素を使用して読み込むメディアの有効なソースを指定します。	25	14	23	7	25	7
`http.headers.Content-Security-Policy.meta-element-support` <meta>`要素のサポート	25	≤18	45	7	25	7
`http.headers.Content-Security-Policy.object-src` HTTP の Content-Security-Policy の object-src ディレクティブは、 object や embed 要素の有効なソースを指定します。	25	14	23	7	25	7
`http.headers.Content-Security-Policy.report-sample` ソース値	59	79	63	15.4	59	15.4
`http.headers.Content-Security-Policy.report-to` Content-Security-Policy の report-to ディレクティブは、 CSP 違反の報告に使用するエンドポイントの名前を示します。	70	79	149	16.4	70	16.4
`http.headers.Content-Security-Policy.sandbox` HTTP の Content-Security-Policy (CSP) における sandbox ディレクティブは、 iframe の sandbox 属性と同様に、要求されたリソースに対してサンドボックスを有効にします。これは、ポップアップの防止、プラグインやスクリプトの実行の防止、同一オリジンポリシーの強制などを含むページ操作の制限を適用します。	25	14	50	7	25	7
`http.headers.Content-Security-Policy.script-src` HTTP の Content-Security-Policy (CSP) における script-src ディレクティブは、 JavaScript の情報なソースを指定します。これは script 要素の中に直接読み込まれる URL だけでなく、インラインのスクリプトイベントハンドラー (onclick) やスクリプト実行のトリガーとなりうる XSLT スタイルシートのようなものも含まれます。	25	14	23	7	25	7
`http.headers.Content-Security-Policy.script-src-attr` HTTP の Content-Security-Policy (CSP) における script-src-attr ディレクティブは、JavaScript でインラインイベントハンドラーを指定する際に、有効なソースを指定します。	75	79	108	15.4	75	15.4
`http.headers.Content-Security-Policy.script-src-elem` HTTP の Content-Security-Policy (CSP) における script-src-elem ディレクティブは、 JavaScript の script 要素の有効なソースを指定します。	75	79	108	15.4	75	15.4
`http.headers.Content-Security-Policy.script-src.external_scripts` ハッシュ付き外部スクリプト	59	79	116	15.6	59	15.6
`http.headers.Content-Security-Policy.script-src.wasm-unsafe-eval` WebAssemblyの実行を許可するソース式	97	97	102	16	97	16
`http.headers.Content-Security-Policy.strict-dynamic` strict-dynamic`ソース値	52	79	52	15.4	52	15.4
`http.headers.Content-Security-Policy.style-src` HTTP の Content-Security-Policy (CSP) における style-src ディレクティブは、スタイルシートの有効なソースを指定します。	25	14	23	7	25	7
`http.headers.Content-Security-Policy.style-src-attr` HTTP の Content-Security-Policy (CSP) における style-src-attr ディレクティブは、個々の DOM 要素に適用されるインラインスタイルのための有効なソースを指定します。	75	79	108	15.4	75	15.4
`http.headers.Content-Security-Policy.style-src-elem` HTTP の Content-Security-Policy (CSP) における style-src-elem ディレクティブは、スタイルシート style 要素と rel="stylesheet" を持つ link 要素の有効なソースを指定します。	75	79	108	26.2	75	26.2
`http.headers.Content-Security-Policy.unsafe-hashes` unsafe-hashes`ソース値	69	79	109	15.4	69	15.4
`http.headers.Content-Security-Policy.worker_support` 労働者支援	56	79	50	10	56	10
`http.headers.Content-Security-Policy.worker-src` HTTP の Content-Security-Policy (CSP) における worker-src ディレクティブは、 Worker, SharedWorker, ServiceWorker スクリプトの有効なソースを指定します。	59	79	58	15.5	59	15.5

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline'; img-src *;">

実務での使いどころ

Content Security Policy (CSP) の活用

Experimental: これは実験的な機能です。

注意点

古いブラウザでは対応していない場合がある。

対応ブラウザ

基本構文

実務での使いどころ

Content Security Policy (CSP) の活用

注意点

アクセシビリティ

参考リンク