Nuxt.jsでCSPを有効にする

CSPとは

Content Security Policyの略
ブラウザ側でポリシーに従って読み込みリソースや実行するスクリプトを制限することができる機能です。

nuxtでもCSPのサポートがされているけど、nuxtのドキュメントに載ってなかったのでとりあえずメモ

nuxt.config.jsの設定

nuxt.config.js

Copied!

const isDev = process.env.NODE_ENV !== 'production'

module.exports = {
    render: {
        csp: {
            enabled: !isDev,
            policies: {
                'default-src': ['self'],
                'script-src': [
                    'https://www.google-analytics.com',
                ],
                'child-src': [
                    'https://www.youtube.com',
                ],
                'report-to': ['/report']
            }
        }
    }
}

ポリシーについてはMozillaのドキュメントを見てみてください