要不要
Nuxt3でnuxt-securityを導入したが不要だった件
nuxt-securityを導入しようと思って、色々やった末、導入しなかったので、メモ。アップ先のサーバによって、CSPの導入の仕方が色々あることわかりました。今回はSSGのデータをApache+Nginxという構成にあげたので、不要になった形です。
nuxt-securityの導入を試みる
lighthouseでウェブサイトを解析し、CSPを導入しなさいと指導されました。調べるとnuxt-securityが検索結果にひっかかったので、導入してみることに。設定はとても簡単です。
Nuxt Security
🛡️ Security Module for Nuxt based on HTTP Headers and Middle…
ブラウザのコンソールでエラーが発生
データをレンサバにアップし、コンソールを見るとエラーが出ています。以下がそう。
The Content Security Policy directive 'frame-ancestors' is ignored when delivered via a <meta> element.
metaでframe-ancestorsを記述してもダメらしく、サーバーサイドで設定しないとエラーになるみたい。
Content Security Policy directive: “frame-ancestors” missing but there?
I am working on a nodejs electron app, in my index.html I ha…
Stack Overflow
で、記述を以下に変えてみてもダメ。コンソールにエラーが表示されます。サーバーサイドに記述しなさいと言っているので当たり前ですがね。※以下はnuxt.config.tsにgoogle FontとGoogle AnalyticsのURLを記述したもの。
security: {
headers: {
contentSecurityPolicy: {
'font-src': ["'self'", 'https://fonts.googleapis.com/', 'https://fonts.gstatic.com', 'data:'],
'frame-ancestors': ["'none'"],
'style-src': ["'self'", "'unsafe-inline'", 'https://fonts.googleapis.com/'],
'script-src': ["'self'", "'unsafe-inline'",'https://www.googletagmanager.com/'],
}
}
},
調べていくと、.htaccessでコントロールしてあげる必要があって、以下の記述をしてアップすることに。エラーは消えませんが、URLの遮断など何度か失敗したので、ここからコントロール出来ているのがわかりました。
Header add Content-Security-Policy "font-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com data:; form-action 'self'; frame-ancestors 'self'; img-src 'self' data:; object-src 'none'; script-src-attr 'none'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/; script-src 'self' 'unsafe-inline' https://www.googletagmanager.com/;"
そして、nuxt.config.tsから削除してアップすると、もうエラーは出ません。そうか、これはSSRの時に役立つものなのね。加えて、CSPへの理解が少し深まりました。
コメント
選曲
The Moldau