要不要

Web

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…

で、記述を以下に変えてみてもダメ。コンソールにエラーが表示されます。サーバーサイドに記述しなさいと言っているので当たり前ですがね。※以下はnuxt.config.tsgoogle FontGoogle AnalyticsURLを記述したもの。

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への理解が少し深まりました。

コメント