---
title: "CSP（コンテンツセキュリティポリシー）の基礎と考え方"
description: "ブラウザに「読み込んでよいリソース」を宣言してスクリプト実行を制御するCSPは、名前の難しさのわりに考え方はシンプルです。HTMLを共有・公開する場面でどう使うかを、実務感覚で理解したい方向けに基礎から解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/csp-for-shared-html"
markdown: "https://giga-site.com/articles/csp-for-shared-html/index.md"
category: "セキュリティ"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# CSP（コンテンツセキュリティポリシー）の基礎と考え方

CSPは、ページが読み込んでよいリソースをブラウザに宣言し、想定外のスクリプト実行を抑える仕組みです。名前は難しそうですが、考え方はシンプルです。この記事ではCSPの基礎と、共有HTMLでの実務的な向き合い方を解説します。

> Source HTML: https://giga-site.com/articles/csp-for-shared-html
> Article index: https://giga-site.com/articles/index.md

## CSPとは何か

CSP（Content Security Policy、コンテンツセキュリティポリシー）は、「このページではどこからのスクリプトや画像、スタイルを読み込んでよいか」をブラウザに伝える仕組みです。ポリシーに反する読み込みや実行はブラウザ側でブロックされます。

万一XSSの隙ができても、外部の不審なスクリプトの読み込みやinline実行を止められれば被害を抑えられます。CSPは脆弱性そのものを直すものではなく、被害を小さくする多層防御の一枚として位置づけられます。

## 基本のディレクティブ

CSPは「ディレクティブ（指示）」の組み合わせで表現します。代表的なものを押さえると、ポリシーの意図が読み取りやすくなります。

最初から細かく書こうとすると挫折しがちです。まずは既定の許可元を絞るdefault-srcを置き、必要なものだけを足していく引き算の発想が現実的です。

- default-src：他で指定がない場合の既定の許可元をまとめて決める
- script-src：スクリプトの読み込み元を限定する（XSS対策の要）
- style-src：スタイルシートの読み込み元を限定する
- img-src：画像の読み込み元を限定する
- frame-ancestors：このページを他サイトのiframeに埋め込めるかを制御する

## よくあるNG例と安全な直し方

CSP（コンテンツセキュリティポリシー）の基礎と考え方では、「検索に出さない」と「見られないようにする」を混同しないことが重要です。noindexやrobots.txtは検索エンジンへの指示であり、アクセス制限そのものではありません。

安全に共有するには、誰に見られると困るかを先に決め、URL共有だけで足りるのか、認証や期限が必要なのかを選びます。共有相手と機密度が決まったら、URLのみ・パスワード・メール認証・会社ドメイン認証のどれで渡すかを選びます。

- NG: 機密情報入りHTMLを認証なしURLで共有し、noindexだけで安心する
- OK: パスワード・メール認証・会社ドメイン認証で閲覧者を絞る
- NG: テスト用APIキーや社内URLをHTML内に残したまま渡す
- OK: 公開前に外部送信先、秘密情報、フォーム送信先を確認する

## inlineスクリプトとunsafe-inline

CSPの肝は、HTMLに直書きされたinlineスクリプトを既定で実行させない点にあります。これにより、注入されたスクリプトの実行を防ぎやすくなります。

ただし既存ページはinlineに依存していることが多く、そのままだと動かなくなります。安易にunsafe-inlineで全許可するとXSS対策の効果が薄れます。本来はnonceやhashで「許可するinlineだけ」を指定するのが望ましい方向です。

## 段階的に導入する手順

CSPはいきなり厳格にするより、観測してから絞るのが安全です。次の流れで進めると、表示崩れや機能停止を避けやすくなります。

1. まず現状ページが何をどこから読み込んでいるかを洗い出す
2. Content-Security-Policy-Report-Onlyで違反を記録だけする（ブロックしない）
3. 報告された違反を見て、正当な読み込み元を許可リストに加える
4. 問題がなくなったらReport-Onlyを外して実際に適用する
5. ページ変更のたびにポリシーを見直し、不要な許可を削る

## 共有HTMLとCSPの現実的な距離感

自分で運用する本番サイトなら、CSPはサーバのレスポンスヘッダで細かく制御できます。一方、レビューや確認のために他者から受け取ったHTMLを「とりあえず見せる」段階では、そこまで作り込む余裕がないことも多いはずです。

そうした場面では、コードの読み込み元を目視で点検しつつ、見せる相手と期間を絞る運用面の対策が現実的です。ギガサイト便はHTMLをドロップして即共有でき、URLのみ・パスワード・メール認証・会社ドメイン認証から閲覧範囲を選べます。CSPで守りきれない確認段階こそ、認証と公開期限で「誰にいつまで見せるか」を管理する価値があります。

## よくある質問

### CSPを入れればXSSは完全に防げますか？

完全ではありません。CSPは被害を抑える多層防御の一枚で、脆弱性そのものを直すものではありません。入力の扱いや出力のエスケープといった基本対策と組み合わせて初めて効果が高まります。

### CSPはどこに書きますか？

一般的にはサーバが返すContent-Security-Policyレスポンスヘッダで指定します。meta要素で書く方法もありますが、frame-ancestorsなど一部の指示はヘッダでないと効かないため、可能ならヘッダでの指定が推奨されます。

### Report-Onlyモードとは何ですか？

ポリシー違反を実際にブロックせず、記録だけする観測モードです。本番に影響を与えずにポリシーの妥当性を確認でき、誤って正当な読み込みを止めてしまう事故を避けながら段階的に導入できます。

### 確認用に共有するだけでもCSPは必要ですか？

あれば望ましいですが、確認段階では細かい設定が難しいこともあります。その場合は読み込み元の点検に加え、閲覧できる相手と期間を絞る運用で補うとよいでしょう。ギガサイト便の認証と公開期限がその役割を担えます。

### noindexを設定すれば認証は不要ですか？

不要ではありません。noindexは検索結果への表示を抑えるための指定で、URLを知っている人の閲覧を止める仕組みではありません。閲覧者を制限したい場合は認証が必要です。

## 関連記事

- [Content Security Policy(CSP)とは？不正スクリプトを防ぐ仕組み](https://giga-site.com/articles/what-is-csp/index.md)
- [共有HTMLに載せる情報を最小化する考え方](https://giga-site.com/articles/minimize-data-in-shared-html/index.md)
- [共有HTMLのデータ保管場所を気にすべき理由｜国内・国外サーバーと社内規程の確認](https://giga-site.com/articles/shared-html-data-residency-jp/index.md)
- [共有HTMLを閲覧した後ブラウザに残るキャッシュの危険性と消し方](https://giga-site.com/articles/browser-cache-after-shared-html/index.md)
- [共有HTMLに埋め込んだPDFやファイルから情報が漏れる落とし穴](https://giga-site.com/articles/pdf-embed-in-shared-html-risk/index.md)
- [共有HTMLの画像に残るExif・位置情報を消してから渡す](https://giga-site.com/articles/exif-geolocation-in-shared-images/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CSP（コンテンツセキュリティポリシー）の基礎と考え方",
  "description": "ブラウザに「読み込んでよいリソース」を宣言してスクリプト実行を制御するCSPは、名前の難しさのわりに考え方はシンプルです。HTMLを共有・公開する場面でどう使うかを、実務感覚で理解したい方向けに基礎から解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/csp-for-shared-html",
  "url": "https://giga-site.com/articles/csp-for-shared-html",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "セキュリティ",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "CSPを入れればXSSは完全に防げますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "完全ではありません。CSPは被害を抑える多層防御の一枚で、脆弱性そのものを直すものではありません。入力の扱いや出力のエスケープといった基本対策と組み合わせて初めて効果が高まります。"
      }
    },
    {
      "@type": "Question",
      "name": "CSPはどこに書きますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "一般的にはサーバが返すContent-Security-Policyレスポンスヘッダで指定します。meta要素で書く方法もありますが、frame-ancestorsなど一部の指示はヘッダでないと効かないため、可能ならヘッダでの指定が推奨されます。"
      }
    },
    {
      "@type": "Question",
      "name": "Report-Onlyモードとは何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ポリシー違反を実際にブロックせず、記録だけする観測モードです。本番に影響を与えずにポリシーの妥当性を確認でき、誤って正当な読み込みを止めてしまう事故を避けながら段階的に導入できます。"
      }
    },
    {
      "@type": "Question",
      "name": "確認用に共有するだけでもCSPは必要ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "あれば望ましいですが、確認段階では細かい設定が難しいこともあります。その場合は読み込み元の点検に加え、閲覧できる相手と期間を絞る運用で補うとよいでしょう。ギガサイト便の認証と公開期限がその役割を担えます。"
      }
    },
    {
      "@type": "Question",
      "name": "noindexを設定すれば認証は不要ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "不要ではありません。noindexは検索結果への表示を抑えるための指定で、URLを知っている人の閲覧を止める仕組みではありません。閲覧者を制限したい場合は認証が必要です。"
      }
    }
  ]
}
```