JavaScript アプリケーションのコンテンツセキュリティポリシー (CSP) をマスターする: 実践ガイド-jsチュートリアル-php.cn

JavaScript アプリケーションのコンテンツセキュリティポリシー (CSP) をマスターする: 実践ガイド

WBOY

リリース： 2024-07-18 10:15:41

オリジナル

473 人が閲覧しました

Mastering Content Security Policy (CSP) for JavaScript Applications: A Practical Guide

進化し続ける 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 サイトの他の関連記事を参照してください。