---
title: "CSP nonceとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "CSP nonceの意味とHTML共有・AI生成サイト公開での影響を解説します。スクリプトが動かないトラブルの原因特定や、共有時に安全なコードを準備するための判断基準を提供します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-csp-nonce-html-share"
markdown: "https://giga-site.com/articles/what-is-csp-nonce-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# CSP nonceとは？HTML共有・AI生成サイトでの意味をやさしく解説

AI生成のHTMLをプレビューURLで共有したとき、ブラウザがスクリプトを実行しない・スタイルが当たらないというトラブルの裏側にCSP nonceが絡んでいることがあります。仕組みを把握しておくと、共有サービスの制約の中でコードをどう修正すればよいか判断できます。

> Source HTML: https://giga-site.com/articles/what-is-csp-nonce-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

CSP nonce（ノンス）とは、Content Security Policy の文脈で「このスクリプトまたはスタイルは信頼済み」とサーバーが証明するために使う使い捨てトークンです。サーバーがレスポンスごとにランダムな文字列（例: `abc123`）を生成し、HTTPヘッダーの CSP に `script-src 'nonce-abc123'` と書き、同時にHTML内の `<script nonce="abc123">` にも同じ値を付与することで、その script タグだけが実行を許可されます。

nonceが一致しない、あるいは nonce が付いていないインラインスクリプトはたとえ正規のコードでもブラウザがブロックします。AI生成HTMLにインラインの `<script>` が含まれている場合、共有サービスが CSP を付与していると nonce のないスクリプトが実行されなくなるため、ページが意図通りに動かない原因になります。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

ギガサイト便などのHTTP配信サービスがセキュリティ対策として CSP ヘッダーを設定している場合、アップロードしたHTMLの `<script>` タグに正しい nonce が付いていないとスクリプトがすべてブロックされます。この場合、ページは表示されるが JavaScript の動作がゼロになるという症状が出ます。

サービス側が nonce を動的に挿入してくれる仕組みを持っていれば問題は起きませんが、静的ファイル配信の場合は nonce を動的生成できないため、CSP の `script-src` に `'nonce-*'` ではなく外部スクリプトの URL をホワイトリストで記載する形式か、`'unsafe-inline'` を使う設定になっていることが多いです。共有前にサービスのドキュメントでCSPポリシーを確認しましょう。

## よくある誤解

「nonce はセキュリティを高める魔法の設定」と思われがちですが、同じ nonce 値をリクエストをまたいで使い回すと意味を失います。nonce は毎リクエストでサーバーが新しい値を生成しなければならず、静的HTMLファイルとは相性が悪い技術です。静的ファイル共有では nonce より `script-src` のURL指定や `integrity` 属性（SRI）のほうが現実的な選択肢です。

「CSP nonce を付ければ XSS は防げる」という過信も危険です。nonce はインラインスクリプトの実行可否を制御しますが、外部スクリプトの読み込みURLが信頼できない場合や DOM ベースの XSS は別の対策が必要です。AI生成コードをそのまま公開する際は nonce の有無だけでなく、コード全体のレビューも欠かせません。

## 安全に使うための注意点

AI生成HTMLを静的ファイルとして共有する場合、インラインスクリプトを外部 `.js` ファイルに切り出すことで nonce の問題を回避しやすくなります。外部ファイルは `script-src` に URL を列挙するか、`integrity` 属性でハッシュを指定するCSP形式で保護できます。ChatGPTやClaudeが生成したHTMLにインライン script が多い場合は、共有前にこの分離作業を行うことを推奨します。

共有後にブラウザのコンソールに「Refused to execute inline script because it violates the following Content Security Policy directive」と表示された場合、CSP nonce またはハッシュが合っていないサインです。この場合、サービスが出力するnonce値を確認してスクリプトタグに追加するか、インラインコードを外部ファイル化して再アップロードする対処を取ってください。

## よくある質問

### AI生成HTMLのインラインscriptがCSPでブロックされました。nonce を自分で書けばいいですか？

静的ファイル共有では nonce は毎リクエストでサーバーが生成する必要があります。自分でHTMLに固定値を書いても機能しないため、インラインスクリプトを外部jsファイルに分離し、script-src にそのURLを許可する方法を取るのが現実的です。

### CSP nonce と SRI（Subresource Integrity）はどう使い分ければいいですか？

nonce はインラインスクリプトの制御に使い、SRI は外部CDNから読み込むスクリプトの改ざん検知に使います。静的HTML共有では SRI のほうが導入しやすく、外部ライブラリのscriptタグにintegrity属性を付けるだけで対応できます。

### 共有サービスのCSPポリシーが原因でページが崩れているか、どう判断すればいいですか？

ブラウザの開発者ツールのコンソールに 'Content Security Policy' または 'CSP' を含むエラーが出ていれば確実です。同じHTMLをCSPなしのローカル環境で開いて正常に動くなら、共有サービス側のCSPが原因と断定できます。

## 関連記事

- [CSP Report-Onlyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-csp-report-only-html-share/index.md)
- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CSP nonceとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "CSP nonceの意味とHTML共有・AI生成サイト公開での影響を解説します。スクリプトが動かないトラブルの原因特定や、共有時に安全なコードを準備するための判断基準を提供します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-csp-nonce-html-share",
  "url": "https://giga-site.com/articles/what-is-csp-nonce-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "AI生成HTMLのインラインscriptがCSPでブロックされました。nonce を自分で書けばいいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "静的ファイル共有では nonce は毎リクエストでサーバーが生成する必要があります。自分でHTMLに固定値を書いても機能しないため、インラインスクリプトを外部jsファイルに分離し、script-src にそのURLを許可する方法を取るのが現実的です。"
      }
    },
    {
      "@type": "Question",
      "name": "CSP nonce と SRI（Subresource Integrity）はどう使い分ければいいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "nonce はインラインスクリプトの制御に使い、SRI は外部CDNから読み込むスクリプトの改ざん検知に使います。静的HTML共有では SRI のほうが導入しやすく、外部ライブラリのscriptタグにintegrity属性を付けるだけで対応できます。"
      }
    },
    {
      "@type": "Question",
      "name": "共有サービスのCSPポリシーが原因でページが崩れているか、どう判断すればいいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ブラウザの開発者ツールのコンソールに 'Content Security Policy' または 'CSP' を含むエラーが出ていれば確実です。同じHTMLをCSPなしのローカル環境で開いて正常に動くなら、共有サービス側のCSPが原因と断定できます。"
      }
    }
  ]
}
```