要不要

Web


Warning: Attempt to read property "site_name" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 208

Warning: Attempt to read property "title" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 211

Warning: Attempt to read property "description" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 217

Warning: Attempt to read property "site_name" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 208

Warning: Attempt to read property "title" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 211

Warning: Attempt to read property "description" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 217

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を記述してもダメらしく、サーバーサイドで設定しないとエラーになるみたい。

で、記述を以下に変えてみてもダメ。コンソールにエラーが表示されます。サーバーサイドに記述しなさいと言っているので当たり前ですがね。※以下は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への理解が少し深まりました。

コメント