エラー解決：Refused to load the script ‘chrome-extension://xxx/vendor/crx-client-preamble.js’ because it violates the following Content Security Policy directive:

こちらの対応をやっていたら発生した問題。

Chromeの拡張機能環境構築

早速エラーの内容

Refused to load the script 'chrome-extension://907319db-4707-4aef-9911-db5569b2b458/vendor/crx-client-preamble.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

非常にタイムリーな問題なのかも。

このエラーに関連するissueはこちら。

https://github.com/crxjs/chrome-extension-tools/issues/918

原因

最近のChromeのアップデートによりCSP（Content Security Policy）関連のエラーが発生するようになったようです。具体的には、chrome.runtime.getURL()が一時的なGUIDを返すようになり、これがCSP違反を引き起こすようになったみたい。

回避策

この問題に対処するため、@crxjs/vite-pluginのバージョンを2.0.0-beta.26以降に更新する。

手順:

  1. Chromeのバージョン確認と更新:
    • Chromeのバージョンが130以上であることを確認します。
    • バージョンが古い場合は、最新バージョンに更新する。
  2. @crxjs/vite-pluginの更新:
    • プロジェクトのpackage.jsonで、@crxjs/vite-pluginのバージョンを2.0.0-beta.26以降に設定します。

CSPについて

CSPは、サイトにどのコンテンツを表示し、どのスクリプトを実行できるかを指定して、悪意ある攻撃から守る仕組みです。

CSPは「コンテンツセキュリティポリシー」の略で、ブラウザに対して「このサイトでは信頼できる場所からのコンテンツしか表示しませんよ」という指示を出すものです。これを設定することで、たとえば「クロスサイトスクリプティング（XSS）」などの攻撃がサイト内で行われるのを防げます。XSSは、ユーザーの入力データなどを通じて不正なスクリプトがサイトに仕込まれる攻撃で、これがうっかり実行されてしまうと、利用者の情報が盗まれたり、不正なリダイレクトが行われたりする可能性があります。

CSPの主な機能

CSPの設定では、「このコンテンツはここからしか読み込まない」という制限をかけられます。具体的には以下のような機能があります。

  1. スクリプトの実行元制限
    • 信頼できるスクリプトのみ実行するようにできます。これで、外部から不正なスクリプトが読み込まれることが防げるため、XSS攻撃のリスクがかなり減ります。たとえば、「自分のドメイン以外のスクリプトは使わない」といった指定ができるんです。
  2. スタイルシートや画像の取得元制限
    • CSSや画像の取得元も指定可能で、怪しい外部リソースが勝手に読み込まれることを防げます。万が一、改ざんされた画像やCSSが外部から読み込まれると、サイトの見た目が変えられたり、マルウェアが含まれていたりする可能性があるので、これも重要なポイントです。
  3. フレームの読み込み元制限
    • 外部のサイトをフレームに埋め込む際、その取得元を制限することで「クリックジャッキング」という攻撃を防ぐことができます。クリックジャッキングは、見えない形で外部サイトを表示させ、ユーザーに意図しないクリックをさせる攻撃で、被害を未然に防げるわけです。

今回のケースに関しては、Chromeバージョン130以降での「スクリプトの実行元制限」に引っかかっている可能性が高そうです。具体的には、chrome.runtime.getURL()が返すURLが、従来の拡張機能IDではなく一時的なGUIDに変更されたことが原因かなと思います。このGUIDが、CSPで設定した「信頼できるスクリプトの取得元」に含まれていないため、CSP違反が発生してしまっていると考えられます。

環境構築Chrome拡張機能作成

Posted by takumioda