2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Content Security Policy(CSP)入門:XSS対策を強化するための基本ガイド

2
Posted at

Webアプリケーションのセキュリティ対策として、入力値の検証や出力時のエスケープはよく知られています。しかし、それだけではすべての攻撃を防げるわけではありません。

そこで重要になるのが Content Security Policy(CSP) です。

CSPはブラウザ側で実行されるセキュリティポリシーであり、不正なスクリプトやリソースの読み込みを制限することで、XSS(Cross-Site Scripting)などのリスクを軽減できます。

CSPとは?

Content Security PolicyはHTTPレスポンスヘッダーとして設定されるセキュリティ機能です。

例えば、以下のようなヘッダーを設定できます。

Content-Security-Policy:
default-src 'self';
script-src 'self';
style-src 'self';
img-src 'self' https:;

この設定では、

  • JavaScriptは同一オリジンのみ許可
  • CSSは同一オリジンのみ許可
  • 画像はHTTPS経由の取得を許可

というルールになります。


CSPが必要な理由

仮に悪意のあるJavaScriptがページへ挿入された場合でも、CSPによって実行を制限できる可能性があります。

例えば、

<script src="https://example-malicious.com/attack.js"></script>

のような外部スクリプトが挿入されても、許可されていないドメインであればブラウザが読み込みを拒否します。

このように、CSPは「最後の防御線」として機能します。


よく利用されるディレクティブ

default-src

すべてのリソースの基本ルールを定義します。

default-src 'self';

script-src

JavaScriptの読み込み元を制限します。

script-src 'self';

CDNを利用する場合は、必要なドメインのみを追加します。

script-src 'self' https://cdn.example.com;

style-src

CSSの取得元を制御します。

style-src 'self';

img-src

画像の取得元を指定します。

img-src 'self' https:;

connect-src

API通信やFetch、WebSocketなどの接続先を制御します。

connect-src 'self' https://api.example.com;

SPAやフロントエンドアプリケーションでは特に重要な設定です。


nonceの活用

インラインスクリプトを安全に利用したい場合は、nonceを利用できます。

Content-Security-Policy:
script-src 'self' 'nonce-random123';

HTML側では同じ値を指定します。

<script nonce="random123">
console.log("Hello");
</script>

これにより、許可されたスクリプトだけが実行されます。


Report-Onlyモード

本番環境へ導入する前に、

Content-Security-Policy-Report-Only

を利用すると、安全に影響範囲を確認できます。

ポリシー違反があっても処理はブロックされず、レポートだけを収集できます。

運用開始前の検証には非常に便利です。


導入時の注意点

CSPを厳しく設定しすぎると、正規のJavaScriptやCSSまで読み込めなくなることがあります。

そのため、

  • 利用中のCDNを確認する
  • 外部フォントの取得元を整理する
  • API通信先を洗い出す
  • レポートを確認しながら段階的に適用する

といった進め方がおすすめです。


実務での活用例

近年のデジタルサービスでは、パフォーマンスだけでなくセキュリティもユーザー体験の重要な要素になっています。

例えば、JLPH のようなオンラインデジタルプラットフォームを参考に考えると、ログイン画面やアカウント管理機能などでは、安全なスクリプト実行環境を維持することが求められます。CSPをはじめとするブラウザセキュリティ機能を適切に構成することで、より堅牢なWebアプリケーション設計につながります。


まとめ

Content Security Policyは、XSS対策を強化するための重要なセキュリティ機能です。

入力値の検証やエスケープと組み合わせることで、多層的な防御を実現できます。

まずは Report-Onlyモード を利用して既存サイトへの影響を確認し、その後に段階的な導入を進めることで、安全性と互換性のバランスを取りながら運用できるでしょう。Webアプリケーションを開発する際には、CSPを基本的なセキュリティ対策の一つとして取り入れることをおすすめします。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?