hirotobeat

前書き

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

その中でも、学習する中で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();
});

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

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

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

下記もlocalhost:3000でブラウザを表示して、imageをhttp://localhost:3000/でないドメインのものを読み込んでみると、画像が表示されていないがわかる。
検証ツールで見てみると、リソースの読み込みで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攻撃からの保護強化
意図しない外部リソースの読み込み防止

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

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

前書き