Content-Security-policyによるアクセス制限

前書き

フロントエンドエンジニアとして従事する中でセキュリティを意識した実装が必要と感じたインシデントが昨年発生しておりました。
こちらの記事に記載されているようなインシデントを未然に防ぐために、フロントエンドで行えるセキュリティを学ぼうとしたのがきっかけです。

その中でも、学習する中でCSPというものを見かけたのでメモ用に内容をまとめます。

リポジトリ

こちらのリポジトリで検証しています。
また対象のコミットはこちらです。

CSPとは

Content Security Policyは、Webアプリケーションにおけるセキュリティ対策の一つです。
Webサイトで読み込めるリソースの制御や、スクリプトの実行制限などを行うことで、クロスサイトスクリプティング（XSS）などの攻撃からアプリケーションを保護することが可能です。

CSPで実現できること

• スクリプトの実行元の制限
• スタイルシートの読み込み元の制限
• 画像やメディアファイルの読み込み元の制限
• APIリクエストの送信先の制限
• インラインスクリプトの実行制御

実装例

Express.jsでの実装を行なっております。

app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; connect-src 'self' http://localhost:3000/api/*"
  );
  next();
});

この実装では以下のようなセキュリティルールを設定

1. default-src 'self': 基本的に同一オリジンからのリソース読み込みのみを許可
2. connect-src: APIリクエストの送信先をhttp://localhost:3000/api/*のエンドポイントのみに制限

実際にブラウザを見てみると.....

1. 下記もlocalhost:3000でブラウザを表示して、imageをhttp://localhost:3000/でないドメインのものを読み込んでみると、画像が表示されていないがわかる。

   

2. 検証ツールで見てみると、リソースの読み込みでimageのstatusがブロックと表示されている。

   

CSPディレクティブの解説

CSPには様々なディレクティブが用意されています。

1. 基本的なディレクティブ

• script-src: JavaScriptの読み込み元を制限
• style-src: CSSの読み込み元を制限
• img-src: 画像ファイルの読み込み元を制限
• connect-src: XMLHttpRequest、Fetch APIなどの通信先を制限
• frame-src: iframeで読み込めるURLを制限

2. ディレクティブの値

• 'self': 同一オリジンからのリソースを許可
• 'none': すべてのリソースをブロック
• 'unsafe-inline': インラインスクリプト/スタイルを許可（非推奨）
• https:: HTTPSプロトコルを使用するリソースを許可

外部サービスの導入

下記のように外部サービスを導入する場合、必要最小限の範囲で使用する外部サーブスのドメイン・エンドポイントを許可することで有効化することができます。

• Google Analytics
• CDNからのライブラリ読み込み
• 外部APIの利用

まとめ

• XSS攻撃からの保護強化
• 意図しない外部リソースの読み込み防止

追記：この記事がわかりやすく解説してくれています。

参考資料

• MDN Web Docs: Content Security Policy
• OWASP: Content Security Policy Cheat Sheet