MENU
【他サイト】フリーランスエンジニアの教科書
フリーランスエンジニアの教科書
【他サイト】仮想通貨の教科書
仮想通貨の教科書

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

当ページのリンクには広告が含まれています。
【超簡単】CloudFrontのLambda@EdgeでCSPを設定する方法
この記事で解決できる悩み
いずみ

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

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

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

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

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

いずみ

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

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

いずみ

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

執筆者/監修者
  • フリーランスエンジニア(保有資格個)
  • ブログ・アフィリエイト歴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が適用されているか検証します。

よくある質問

Lambda@Edgeのデプロイにかかる時間はどのくらいですか?

デプロイには通常5〜10分かかります。

CloudFrontのエッジロケーションに変更が反映されるまで時間がかかるため、適用後すぐに確認できない場合があります。

Lambda@Edgeのコストはどのくらいですか?

リクエスト回数に応じて課金されますが、1ヶ月あたり数百万リクエストで数百円程度です。

無料枠もあるため、小規模なサイトなら追加コストなしで運用できます。

まとめ

今回は、CloudFrontのLambda@EdgeでCSPを設定する方法について解説しました。

以下が本記事のまとめになります。

まとめ
  • CloudFrontのLambda@Edgeを使えば、CSPを適用してセキュリティを強化できる。
  • CSPヘッダーを追加するコードを記載し、viewer-responseイベントで実行する。
  • デプロイには数分かかるため、即時反映されない場合がある。
まとめ

CloudFront経由のレスポンスにCSPを適用し、ウェブサイトのセキュリティを強化しましょう。

いずみ

最後までお読みいただき、ありがとうございました!

  • クソおすすめ本
¥4,480 (2024/06/01 23:28時点 | Amazon調べ)
いずみ

海外のエンジニアがどういった思考で働いているかが理解できます。

海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。

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

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次