CSP: style-src unsafe-inline

OWASP ZAPで「CSP: style-src unsafe-inline」というアラートが報告された場合、これはContent Security Policy (CSP)の設定でunsafe-inlineが使用されていることを示しています。unsafe-inlineはインラインスタイルの適用を許可するため、セキュリティリスクを高めます。この問題を解消するための手段を以下に示します。

1. CSPの理解

Content Security Policy (CSP) は、ウェブページのリソース読み込みを制御するためのセキュリティ機能です。style-srcディレクティブでunsafe-inlineを使用すると、インラインスタイルの適用を許可してしまい、XSS攻撃のリスクが高まります。

2. `unsafe-inline`の代替手段

2.1. 外部スタイルシートの使用

インラインスタイルを外部スタイルシートに移動することで、unsafe-inlineを使用せずにスタイルを適用できます。

Before:

<style>
  body {
    background-color: #f0f0f0;
  }
</style>

After:

外部スタイルシートファイル（例：styles.css）を作成します。

/* styles.css */
body {
  background-color: #f0f0f0;
}

外部スタイルシートをHTMLにリンクします。

<link rel="stylesheet" href="path/to/styles.css">

2.2. ハッシュの使用

どうしてもインラインスタイルを使用する必要がある場合、スタイルのハッシュをCSPに追加することで、特定のインラインスタイルのみを許可することができます。ハッシュはSHA-256、SHA-384、またはSHA-512を使用して生成します。

Example:

インラインスタイルのハッシュを生成します（例：SHA-256）。

echo -n "body { background-color: #f0f0f0; }" | openssl dgst -sha256 -binary | openssl base64
# 結果: c2FtcGxlSGFzaA==

CSPヘッダーにハッシュを追加します。

<style>
  body {
    background-color: #f0f0f0;
  }
</style>

生成したハッシュをCSPヘッダーに追加します。

Content-Security-Policy: style-src 'self' 'sha256-c2FtcGxlSGFzaA==';

2.3. Nonceの使用

各リクエストごとに一意のnonce（ナンス）を生成し、インラインスタイルにnonce属性を追加することで安全性を確保します。

サーバーサイドで一意のnonceを生成します。

<?php
$nonce = base64_encode(random_bytes(16));
?>

生成したnonceをCSPヘッダーに追加します。

<?php
header("Content-Security-Policy: style-src 'self' 'nonce-$nonce';");
?>

インラインスタイルにnonce属性を追加します。

<style nonce="<?php echo $nonce; ?>">
  body {
    background-color: #f0f0f0;
  }
</style>

3. CSPの適用

3.1. functions.phpに追加

WordPressテーマのfunctions.phpファイルにCSPヘッダーを追加します。

function add_csp_header() {
    $nonce = base64_encode(random_bytes(16));
    header("Content-Security-Policy: style-src 'self' 'nonce-$nonce';");
    echo "<style nonce='$nonce'>body { background-color: #f0f0f0; }</style>";
}
add_action('send_headers', 'add_csp_header');

3.2. .htaccessファイルの編集

Apacheサーバーを使用している場合、.htaccessファイルにCSPヘッダーを追加します。

<IfModule mod_headers.c>
    Header set Content-Security-Policy "style-src 'self' 'nonce-c2FtcGxlSGFzaA==';"
</IfModule>

4. CSPのテスト

設定を変更した後、ブラウザのデベロッパ