Posted at

Nuxt.jsでCSPを有効にする

More than 1 year has passed since last update.


CSPとは

Content Security Policyの略

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

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


nuxt.config.jsの設定


nuxt.config.js

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のドキュメントを見てみてください