<meta http-equiv="content-security-policy" content="">

更新日
仕様 HTML Living Standard / Content Security Policy 3
分類 メタデータ・コンテンツ
利用場所 head要素の子要素として / head要素の子要素となるnoscript要素本文参照
内容 無し(空要素)

meta要素http-equiv="content-security-policy" を追加すると、コンテンツセキュリティポリシー(CSP)を指定することができます。

この指定により、文書に読み込まれる各種リソースに対して制限をかけられるようになります。(他に、ナビゲーションに関連する制限なども行うことができます)

  • CSPは、このページで説明するmeta要素の他に、Content-Security-Policy HTTPヘッダーでも指定することができます。

<meta http-equiv="content-security-policy" content="default-src 'self'">

属性
任意属性
http-equiv="" 指示の種類 content-security-policy コンテンツセキュリティポリシー(CSP)
任意属性(http-equiv を指定している場合は必須
content="" 指示の内容 指示のリスト 指示名と値で構成される指示内容(本文参照)

指示の書式

CSPの指示内容は、指示名(指示の対象)とを半角スペースで区切って記述します。

次の例では、default-src が指示名、'self' が値になります。

content="default-src 'self'"

指示名と値のセットが複数ある場合は、次のようにセミコロン; )で区切って記述します。

content="default-src 'self'; font-src https://example.com/"

次のように、1つの指示名に対して複数の値を指定することもできます。値は半角スペースで区切って記述します。

content="default-src 'self' https://example.com/"

定義されている指示名

CSPでは以下の指示名が定義されています。

指示名 対象
フェッチ指示(Fetch Directives)
child-src Workerの実行コンテキストと、入れ子にされたブラウジング・コンテキストiframe要素など)のソース
connect-src スクリプトインターフェイスを使用して読み込まれるURL
default-src 他のフェッチ指示用の既定値(この指示で指定した値は、フェッチ指示全体の既定値となります)
font-src @font-faceで読み込まれるフォントのソース
frame-src 入れ子にされたブラウジング・コンテキスト(iframe要素など)のソース
img-src 画像(img要素など)のソース
manifest-src アプリケーションマニフェストのソース
media-src メディア(video要素audio要素track要素)のソース
object-src プラグインコンテンツ(embed要素object要素など)のソース
prefetch-src プリフェッチ、またはプリレンダリングされる内容のソース
script-src JavaScriptのソース(JavaScript全体が対象)
script-src-elem JavaScriptのソース(script要素が対象)
script-src-attr JavaScriptのソース(インラインのイベントハンドラが対象)
style-src スタイルシートのソース(スタイルシート全体が対象)
style-src-elem スタイルシートのソース(style要素rel="stylesheet"が指定されたlink要素が対象)
style-src-attr スタイルシートのソース(style属性の値が対象)
他の指示(Other Directives)
webrtc WebRTCを介して接続を確立できるかどうか(値は allow または block
worker-src Worker、SharedWorker、ServiceWorkerのソース
文書指示(Document Directives)
base-uri base要素に指定されるURL
sandbox その文書にiframe要素のsandboxと同様の効果を適用する(meta要素では使用不可
ナビゲーション指示(Navigation Directives)
form-action フォームの送信先となるURL(form要素、フォーム部品のformaction属性)
frame-ancestors その文書がiframe要素、embed要素、object要素などによって埋め込まれる際の祖先となるURL(meta要素では使用不可
navigate-to a要素、form要素(form-action未指定時)、window.location、window.openなどによってナビゲーションを開始できるURL
報告指示(Reporting Directives)
report-uri CSP違反報告の送信先となるURL(非推奨meta要素では使用不可
report-to CSP違反報告の送信先となるグループ名
  • meta要素では使用不可と記載されている指示名は、Content-Security-Policy HTTPヘッダーでのみ指定することができます。

値の指定方法

CSPには様々な値の指定方法がありますが、その中からいくつかをピックアップして以下に掲載します。

  • 以下は、フェッチ指示(リソースの読み込みを許可するかどうか)に関する指定例です。
意味
'self' 自身のオリジンに置かれたリソースを許可 ※一重引用符が必要
'none' どこに置かれたリソースも拒否 ※一重引用符が必要
* どこに置かれたリソースも許可
https: https:で始まるURLに置かれたリソースを許可 ※末尾にコロンが必要
example.com
*.example.com
https://example.com/
https://*.example.com/
特定のホストに置かれたリソースを許可(アスタリスク( * )はワイルドカード指定、https://を付けて絞り込むことも可能)
https://example.com/dir/ 特定のディレクトリに置かれたリソースを許可
https://example.com/file.js 特定のリソースを許可
'nonce-xxx' 暗号ノンスが一致するリソースを許可(nonce属性とともに使用)

指示の指定例

次の例は、すべてのリソースに対し、自身のサイトからの読み込みだけを許可しています。(外部サイトからの読み込みは拒否)

  • default-src で指定された値(この例では 'self')は、フェッチ指示全体の既定値となります。
content="default-src 'self'"

次の例は、自身のサイトからの読み込みだけを許可しつつ、フォントに限っては特定のホストからの読み込みを許可しています。

  • これは、個別に指定した指示(この例では font-src)によって既定値を上書きしていることになります。
content="default-src 'self'; font-src https://example.com/"

次の例は、自身のサイトからの読み込みだけを許可しつつ、画像に限ってはどこに置かれたものでも読み込みを許可しています。

content="default-src 'self'; img-src *"

次の例は、すべてのリソースに対し、自身のサイトと特定のホストからの読み込みを許可しています。

content="default-src 'self' *.example.com"

次の例は、JavaScriptは自身のサイトからの読み込みを許可し、メディアとプラグインコンテンツは読み込みを拒否しています。

content="script-src 'self'; media-src 'none'; object-src 'none'"

次の例は、入れ子にされたブラウジング・コンテキストに対し、https:~に置かれたコンテンツのみ読み込みを許可しています。(http:~に置かれたコンテンツは拒否)

content="frame-src https:"

要素の利用場所に関して

meta要素によるCSPの指定は、そのmeta要素よりも前に現れるコンテンツには適用されません。

<head>

<!-- これ以前には適用されない -->
<meta http-equiv="content-security-policy" content="default-src 'self'">
<!-- これ以降に適用される -->

<title>文書のタイトル</title>

</head>

そのため、CSPを指定する際には、そのmeta要素をできるだけ始めの方に配置することが強く推奨されています。

使用例

リソースの読み込みを拒否した例

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-security-policy" content="default-src 'none'">

<title>読み込みを拒否</title>

</head>
<body>

<h1>読み込みを拒否</h1>

<p>対応しているブラウザでは、以下の画像は読み込まれません。</p>

<p><img src="image/csp.png" alt="Content Security Policy" width="300" height="90"></p>

...

</body>
</html>

表示例

サンプル画面へ新規ウィンドウで表示