【入門編】CSPにおけるnonce（ナンス）を用いたインラインスクリプトの制御 – アプリケーションセキュリティ & 安全な開発防御ガイド

「泥棒を見分ける魔法の札」— CSPのnonceを使って、WebサイトをXSSから守り抜く方法

こんにちは！セキュリティの世界へようこそ。今日は、Web開発者なら一度は耳にする「XSS（クロスサイトスクリプティング）」という厄介な攻撃と、それを「魔法の札（nonce）」で封じ込める最新の防御術についてお話しします。

セキュリティと聞くと難しく感じるかもしれませんが、まずは「家の防犯」に例えて考えてみましょう。

—

1. XSSって、何が怖いの？

XSSとは、「あなたのWebサイトの信頼を悪用して、泥棒が自分のプログラムを勝手に実行させる攻撃」のことです。

例えば、あなたが作った掲示板に、悪い人がこんな書き込みをしたとします。

もし、掲示板を表示するプログラムがこの文字をそのまま画面に表示してしまうと、他のユーザーのブラウザは「おっ、これはサイト管理者が許可した大事な命令だな！」と勘違いして、そのスクリプトをこっそり実行してしまいます。これがXSSのメカニズムです。

鍵をかけていない家に泥棒が勝手に入り込み、リビングで好き勝手なことをするようなもの。これがXSSの恐ろしさです。

—

2. CSP（コンテンツセキュリティポリシー）という「最強の警備員」

この事態を防ぐために、現代のWebブラウザにはCSP（Content Security Policy）という仕組みがあります。これは、Webサイトが「どの場所から読み込んだスクリプトなら実行していいか」を定義する、ブラウザ宛の「警備指示書」です。

HTTPレスポンスヘッダーに以下のように設定します。

Content-Security-Policy: default-src ‘self’;

これは「自分のサーバーにあるファイル以外は実行させない」という、非常に厳格なルールです。でも、現実には「どうしてもHTMLの中に直接スクリプトを書きたい」という場面もありますよね。

そこで登場するのが、今回の主役「nonce（ナンス）」です。

—

3. 「nonce（ナンス）」は、信頼の証である「魔法の札」

nonceとは「Number used once（一度だけ使われる数字）」の略。これは、サーバーがページを表示するたびに生成する「使い捨ての通行証」のようなものです。

仕組みを例えると…

1. 家の玄関（サーバー）で、信頼できる家族（自分のプログラム）にだけ「今日限りの魔法の札（nonce）」を渡します。
2. 部屋の中（HTML）でスクリプトを実行しようとした時、ブラウザは「その札、持ってる？」と確認します。
3. 家族（正しいコード）は札を見せるので実行されます。
4. 泥棒（外部から紛れ込んだ悪いコード）は札を持っていないので、ブラウザから門前払いされます。

これなら、もし泥棒がスクリプトを書き込んでも、札がないので絶対に実行されません。

—

4. 実装してみよう！

では、実際にどのように実装するか見ていきましょう。

手順①：サーバー側でnonceを生成する

ページを生成するたびに、推測不可能なランダムな文字列（nonce）を作成します。

// Node.js (Express) の例
const crypto = require(‘crypto’);
app.use((req, res, next) => {
res.locals.cspNonce = crypto.randomBytes(16).toString(‘base64’);
// CSPヘッダーにnonceを埋め込む
res.setHeader(‘Content-Security-Policy’, script-src 'nonce-${res.locals.cspNonce}');
next();
});

手順②：HTML側で「札」を提示する

サーバーで生成したcspNonceを、実行させたい