<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. |
特定のホストに置かれたリソースを許可（アスタリスク（ * ）はワイルドカード指定、https://を付けて絞り込むことも可能） |
https://example. |
特定のディレクトリに置かれたリソースを許可 |
https://example. |
特定のリソースを許可 |
'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>
- 表示例
