進化し続ける 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: ポリシーを定義する

まず、アプリケーションがどのリソースをロードする必要があるかを判断します。これには、スクリプト、スタイル、画像、フォントなどが含まれます。

ステップ 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 ページを考えてみましょう。

    
Content Security Policy Example
    

この例では:

• デフォルトでは、同じオリジン ('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 アプリケーションのセキュリティ体制を大幅に強化できます。基本ポリシーから始めて徹底的にテストし、機能とセキュリティの完璧なバランスを達成するために繰り返します。