【超簡単】CloudFrontのLambda@EdgeでCSPを設定する方法

2025年4月23日

当ページのリンクには広告が含まれています。

この記事で解決できる悩み

CloudFrontのLambda@EdgeでCSPを設定する方法は？

いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴10年）で、資格は13個保有しています。

「CloudFrontのLambda@EdgeでCSPを設定する方法を知りたい」とお考えではありませんか？

セキュリティを強化するためにCSP（コンテンツセキュリティポリシー）を設定したいものの、CloudFrontでの実装方法がわからず困っている方も多いでしょう。

Lambda@Edgeを使えば、CloudFrontを通るすべてのレスポンスにCSPを適用できます。

いずみ

けっこう簡単なのでサクッと解説します。

ということで、本記事ではCloudFrontのLambda@EdgeでCSPを設定する方法を解説します。

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいませ。

執筆者／監修者

フリーランスエンジニア（保有資格13個）
ブログ・アフィリエイト歴7年（2018年〜）
ブランドせどりで月利50万円⇨脱サラ
投資（仮想通貨・FX）歴7年（2018年〜）
X（旧Twitter）フォロワー約1,900人
運営者情報はこちら

いずみです

CloudFrontのLambda@EdgeでCSPを設定する方法

Lambda@Edgeを利用すれば、CloudFrontを経由するすべてのレスポンスヘッダーにCSPを追加できます。

STEP

AWS Lambdaで新しい関数を作成する

AWS Lambdaの管理画面で新しい関数を作成し、ランタイムをNode.jsに設定します。

STEP

CSPヘッダーを追加するコードを記述する

exports.handler = async (event) => {
    const response = event.Records[0].cf.response;
    response.headers['content-security-policy'] = [{
        key: 'Content-Security-Policy',
        value: "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';"
    }];
    return response;
};

上記のコードをLambdaに設定し、CloudFrontのviewer-responseイベントで実行されるようにします。

STEP

CloudFrontの動作を確認する

設定が完了したら、CloudFrontのレスポンスヘッダーを確認し、CSPが適用されているか検証します。