Zenn
🥥

Nuxt3でCSPを設定しました

2024/10/18に公開
Vue.js
csp
Nuxt 3
tech

環境

  • nuxt3.13.0

CSP: Contents Security Policy

  • どのコンテンツを信頼するかを定めるポリシーです
  • 画像の読み込みや、スクリプトの実行において、信頼できるものだけ読み込み、実行したいという時に有用です
  • クロスサイトスクリプティング(XSS)攻撃を防ぐ目的で利用されます

クロスサイトスクリプティング(XSS)攻撃

クロスサイトスクリプティング (XSS) とは、悪意あるクライアントサイドのコードをウェブサイトに挿入するセキュリティ攻撃です。挿入されたコードは被害者のブラウザー上で実行され、アクセス制限の回避やユーザーへのなりすましなどにつながります
MDN Web Docsより

  • 例えば、クレジットカード情報を入力する画面で外部の悪意あるスクリプトが実行されて、カード情報が外部に送信されてしまうというような攻撃です！！！！

適用方法

コンテンツセキュリティポリシーを適用するには、該当するウェブページに Content-Security-Policy HTTP ヘッダーを返すようにし、ユーザエージェントが読み込むことのできるリソースの情報を指定します。
MDN Web Docsより

  • nuxt3ではnuxt-securityというmoduleを利用して、ヘッダーにCSPを設定することができました↓↓

導入

  • 手順書の通りに以下コマンドでインストール

    npx nuxi@latest module add security

設定

  • nuxt.configで設定します

    • ディレクティブ名(コンテンツのタイプ)とリソース値(信頼する条件)を設定します
    • デフォルトである程度設定してあるようです 
    export default defineNuxtConfig({
  ...略...

  modules: ["nuxt-security"],
  security: {
    headers: {
      // certain header
      contentSecurityPolicy: {
        # 今回は、同一オリジンとインラインスクリプトとGA用のスクリプトのみ許可します
        'script-src': ["'self'", "'unsafe-inline'", "www.googletagmanager.com"],
      },
    },
  }
})

    # このようなGA4用のタグがある想定
<script async src="https://www.googletagmanager.com/gtag/js?id=xxxxx" />

    # インラインスクリプトを許可しないと、vueファイル上のこのような<script>が読み込めない
<template>
    <h2>ページ</h2>
    ...略...
</template>
<script>
export default ....略...

  • 開発者ツールのネットワークから設定されていることを確認できます

設定値

実際にCSPの効果を確認

CSPで同一オリジンのみ許可

  • 設定

    export default defineNuxtConfig({
  security: {
    headers: {
      // certain header
      contentSecurityPolicy: {
        'img-src': ["'self'"],
      },
    },
  }
})

  • いらすとやの画像は読み込めません

    <template>
  <div>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHTMjxxkKnsEJzmAH4Qct1x3Y8NAYqZ4liNsDrYOyetbFk0bk7vJqlkrHEKEFWPjenl2nKc62sZub7hxZcy-LtToGaYJWbc5UR8XYTS1ut9zCWJVG6tNh388wzv6qiV2-oFieh2ubzVzCb/s800/hachi_kuma.png">
  </div>
</template>


    　

CSPでいらすとやさんのドメインを許可

  • 設定

    export default defineNuxtConfig({
  security: {
    headers: {
      // certain header
      contentSecurityPolicy: {
        'img-src': ["'self'", "blogger.googleusercontent.com"],
      },
    },
  }
})

  • いらすとやの画像が読み込めた

Discussion