かとのぼのマイコード・マイライフ

プログラミング初心者とアプリの個人開発者向けのブログ。たまに銭湯

Vue.jsで、ツイッターのURLシェアを実装したら「Refused to execute inline script because it violates the following Content Security Policy directive」というエラーが出た。

この記事をシェアする

Vue.jsで、ツイッターのURLシェアを実装したら「Refused to execute inline script because it violates the following Content Security Policy directive」というエラーが出た。

理由

このエラーは、多くはグーグルの「コンテンツ・セキュリティー・ポリシー」の設定によって出るエラーです。

様々なシチュエーションでこのエラーコードは登場しているようです。

img-src *としたのにChromeでblobの画像を読み込もうとしたらセキュリティーエラーになった。 - Qiita

Chrome Extentionでinlineのjavasciptが書けない - Qiita

JavaScript - browser_actionのセキュリティーポリシーエラーについて。|teratail 

色々なエラーを要約すると、

  • グーグルの拡張機能によって出ている。
  • JavaScriptをインラインで実行している。

場合が多いです。

そのため、解決策は、

  • グーグルの「コンテンツ・セキュリティ・ポリシー」を、エラーに沿った形に直してあげる
  • JavaScriptを外部ファイルで実行するように書き直す

の方法が有効です。

コンテンツ・セキュリティ・ポリシー

グーグルの「コンテンツ・セキュリティ・ポリシー(CSP)」は、こちらの記事を読むと理解が深まります。

developers.google.com

例えば、エラーに「inline」という箇所があれば、それはまさにJavaScritpがインラインで記述されているので出るエラーです。

また、グーグルアナリティクスを読み込む時にも出ることがあるようですが、その場合はそのURLを例外として書くなどの方法があります。

このエラーのパターンは書いているコードにより千差万別なので、この記事では具体的なコードは載せませんが、上記の記事を参考にし、エラーの箇所をコピペして検索するのが一番いいでしょう。

JavaScritpを外部ファイルにする

JavaScriptをインライン(HTMLコード内で記述する)場合などに出る場合もあります。これは、悪意のあるユーザーが脆弱性をついて悪さをするのを防ぐために設定されています。この場合はインラインでJavaScriptを実行しないようにすれば解決します。

ツイッターのURLシェアの場合は?

私の場合は、ツイッターのURLシェアの機能を実装し、試してみたらコンソールにこのエラーが出ました。

結論から言うと、私の場合はユーザーが入力する場所はないので、ここでは無視をしています。

ちなみに、エラーが出てもシェアは普通にすることができます。