CSP: style-src unsafe-inline

概要

  • 脆弱性の名前: CSP: style-src unsafe-inline
  • 問題の要点: Content Security Policy (CSP) の style-src ディレクティブで unsafe-inline を使用しているため、インラインスタイルやスタイル属性の利用を許可してしまい、クロスサイトスクリプティング (XSS) 攻撃のリスクが高まる状態。
  • よくある発生シーン: CSP 設定の不備、レガシーなWebサイトの移行、フレームワークやライブラリの要件による設定など

背景

CSP は、Web ページが読み込むことができるリソースのオリジンを制限することで、XSS 攻撃のリスクを軽減するセキュリティ機能です。
unsafe-inline は、CSP の style-src ディレクティブで使用されるキーワードで、HTML 要素の style 属性や <style> タグによるインラインスタイルの利用を許可します。
インラインスタイルは、CSS ファイルから分離されていないため、攻撃者が悪意のあるスタイルを注入する可能性があります。
近年、Web アプリケーションの複雑化に伴い、CSP の重要性が高まっています。

セキュリティ上のリスク

  • クロスサイトスクリプティング (XSS) 攻撃による、Web サイトの改ざん、不正なコンテンツの表示。
  • ユーザーインターフェースの操作による、ユーザーの意図しない操作の実行。
  • 悪意のあるスタイルの適用による、マルウェア感染や情報漏洩。

対処方法の具体例

Apache2

誤った設定例

CSP ヘッダーで unsafe-inline を使用している例：

# 誤った例: unsafe-inline を使用
Header set Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline';"

正しい設定例

CSP ヘッダーで unsafe-inline を使用せずに、許可するスタイルのソースを明示的に指定する例：

# 正しい例: オリジンを明示的に指定
Header set Content-Security-Policy "default-src 'self'; style-src 'self' https://example.com;"

または、nonce を使用する例：

# 正しい例: nonce を使用
Header set Content-Security-Policy "default-src 'self'; style-src 'self' 'nonce-{random}';"

Nginx

誤った設定例

CSP ヘッダーで unsafe-inline を使用している例：

# 誤った例: unsafe-inline を使用
add_header Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline';";

正しい設定例

CSP ヘッダーで unsafe-inline を使用せずに、許可するスタイルのソースを明示的に指定する例：

# 正しい例: オリジンを明示的に指定
add_header Content-Security-Policy "default-src 'self'; style-src 'self' https://example.com;";

または、nonce を使用する例：

# 正しい例: nonce を使用
add_header Content-Security-Policy "default-src 'self'; style-src 'self' 'nonce-{random}';";

PHP

誤った設定例

CSP ヘッダーで unsafe-inline を使用している例：

<?php
// 誤った例: unsafe-inline を使用
header("Content-Security-Policy: default-src 'self'; style-src 'self' 'unsafe-inline';");
?>

正しい設定例

CSP ヘッダーで unsafe-inline を使用せずに、許可するスタイルのソースを明示的に指定する例：

<?php
// 正しい例: オリジンを明示的に指定
header("Content-Security-Policy: default-src 'self'; style-src 'self' https://example.com;");
?>

または、nonce を使用する例：

<?php
// 正しい例: nonce を使用
header("Content-Security-Policy: default-src 'self'; style-src 'self' 'nonce-{random}';");
?>

JavaScript

JavaScript 自体で CSP の設定を行うことはできません。CSP の設定は Web サーバーで行う必要があります。

AWS

正しい設定例

CloudFront を使用して CSP ヘッダーを設定する例：

  • CloudFront の Behavior で、カスタムヘッダーを追加し、Content-Security-Policy ヘッダーを設定します。
  • CSP ディレクティブで unsafe-inline を使用せず、許可するスタイルのソースを明示的に指定します。

検出方法

OWASP ZAP での出力例

  • Alert 名: CSP: style-src unsafe-inline
  • リスク: Middle
  • URL: CSP ヘッダーが設定されている URL
  • パラメータ: なし
  • 詳細: CSP ディレクティブで unsafe-inline が使用されているという情報

手動再現例

  1. Web ブラウザの開発者ツールを開き、Network タブを選択します。
  2. Web サイトにアクセスし、HTTP レスポンスヘッダーを確認します。
  3. Content-Security-Policy ヘッダーが存在し、style-src ディレクティブで unsafe-inline が使用されている場合、脆弱性が存在します。
curl -I https://example.com

上記コマンドを実行し、Content-Security-Policy ヘッダーに unsafe-inline が含まれている場合、脆弱性が存在する可能性があります。

まとめ

  • CVSS 基本値: 5.0 (Medium)
  • 運用チームや開発者が意識すべきポイント:
    • style-src ディレクティブで unsafe-inline を使用しない。
    • 許可するスタイルのソースを明示的に指定する。
    • nonce や hash を使用して、インラインスタイルを許可する。
    • CSP レポート URI を設定し、CSP 違反を監視する。
    • 定期的にペネトレーションテストを実施し、脆弱性を特定する。
  • 再発防止:
    • 開発プロセス全体でセキュリティを考慮する (Security by Design)。
    • コードレビューを実施し、CSP ヘッダーの設定誤りを早期に発見する。
    • 自動脆弱性診断ツールを導入し、定期的にスキャンを行う。
    • 開発者向けのセキュリティトレーニングを実施する。

補足資料・参考 URL

以上の対策と検出方法を活用して、CSP: style-src unsafe-inline のリスクを低減してください。