ホームページ > 記事 > ウェブフロントエンド > JavaScript アプリケーションのコンテンツ セキュリティ ポリシー (CSP) をマスターする: 実践ガイド
JavaScript アプリケーションのコンテンツ セキュリティ ポリシー (CSP) をマスターする: 実践ガイド
- WBOYオリジナル
- 2024-07-18 10:15:41508ブラウズ
進化し続ける Web セキュリティの状況において、コンテンツ セキュリティ ポリシー (CSP) は、開発者がさまざまな形式の攻撃、特にクロスサイト攻撃からアプリケーションを保護するのに役立つ強力なツールとして浮上しています。スクリプティング (XSS)。このブログでは、CSP の基礎とその実装方法を説明し、その使用法を習得するのに役立つ実際の例を提供します。
コンテンツ セキュリティ ポリシー (CSP) とは何ですか?
コンテンツ セキュリティ ポリシー (CSP) は、Web サイトの読み込みと実行が許可されているリソースを制御することで、さまざまな攻撃を防ぐセキュリティ機能です。 CSP を定義すると、ロードできるスクリプト、スタイル、その他のリソースを指定できるため、XSS 攻撃やデータ インジェクション攻撃のリスクが大幅に軽減されます。
CSP を使用する理由
1. XSS 攻撃の軽減: CSP は、スクリプトのロード元となるソースを制限することで、攻撃者による悪意のあるスクリプトの挿入を防ぎます。
2.リソースの読み込みの制御: CSP を使用すると、サイトが画像、スクリプト、スタイルシートなどのリソースを読み込む場所を制御できます。
3.データ挿入の防止: CSP は、サイトへの不要なデータの挿入を目的とした攻撃の防止に役立ちます。
CSPの基本構造
CSP は、Content-Security-Policy HTTP ヘッダーを使用して定義されます。 CSP ヘッダーがどのようになるかを示す簡単な例を次に示します。
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'
このポリシーでは:
default-src 'self': デフォルトでは、同じオリジンからのリソースのみが許可されます。
script-src 'self' https://trusted.cdn.com: 同じ生成元および信頼できる CDN からのスクリプトを許可します。
style-src 'self' 'unsafe-inline': 同じ生成元のスタイルとインライン スタイルを許可します。
JavaScript アプリケーションへの CSP の実装
ステップ 1: ポリシーを定義する
まず、アプリケーションがどのリソースをロードする必要があるかを判断します。これには、スクリプト、スタイル、画像、フォントなどが含まれます。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
ステップ 2: CSP ヘッダーをサーバーに追加する
Express.js サーバーを使用している場合は、CSP ヘッダーを次のように設定できます。
const express = require('express');
const helmet = require('helmet');
const app = express();
app.use(helmet.contentSecurityPolicy({
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'", "https://trusted.cdn.com"],
styleSrc: ["'self'", "'unsafe-inline'"],
imgSrc: ["'self'", "data:"],
}
}));
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
ステップ 3: CSP をテストする
CSP を導入したら、徹底的にテストします。ブラウザの開発者ツールを使用して、ブロックされているリソースがないか確認します。必要に応じてポリシーを調整して、アプリケーションが安全な状態を保ちながら正しく機能することを確認します。
例: サンプル プロジェクトでの CSP の実装
信頼された CDN からスクリプトとスタイルを読み込む単純な HTML ページを考えてみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline';">
<title>Secure CSP Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
</head>
<body>
<h1>Content Security Policy Example</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
console.log('jQuery is working!');
});
</script>
</body>
</html>
この例では:
- デフォルトでは、同じオリジン ('self') からのリソースのみが許可されます。
- 同じオリジンおよび cdnjs.cloudflare.com CDN からのスクリプトが許可されます。
- インライン スタイル ('unsafe-inline') は許可されていますが、セキュリティを向上させるために、これは可能な限り避けてください。
強力な CSP のためのヒント
1. 「unsafe-inline」と「unsafe-eval」は避けてください: これらはインライン スクリプトとスタイルを許可し、悪用される可能性があります。代わりに、ノンスベースまたはハッシュベースのポリシーを使用してください。
2.レポート専用モードを使用します: Content-Security-Policy-Report-Only から始めて、ポリシーを強制せずに違反をログに記録し、ポリシーを微調整できるようにします。
3. CSP を定期的に更新する: アプリケーションが進化するにつれて、新しいリソース要件とセキュリティのベスト プラクティスを反映するように CSP が更新されていることを確認します。
結論
堅牢なコンテンツ セキュリティ ポリシーの実装は、JavaScript アプリケーションをさまざまな攻撃から保護するための重要なステップです。 CSP の基礎を理解し、ベスト プラクティスに従うことで、Web アプリケーションのセキュリティ体制を大幅に強化できます。基本ポリシーから始めて徹底的にテストし、機能とセキュリティの完璧なバランスを達成するために反復します。
以上がJavaScript アプリケーションのコンテンツ セキュリティ ポリシー (CSP) をマスターする: 実践ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。