【コピペでOK】開発者ツールでjQueryが動作しない時に、実行するスクリプト

はじめに

jQueryは$と書くだけで、手軽にデバックができるので重宝しています。
もちろんjQueryが動作しないサイトもあるので、そういったサイトでjQueryが動作するためのスクリプトを作成しました。

スクリプト

以下を開発者ツール＞Consoleにコピペします。終わり。

var jquery = document.createElement('script');
jquery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js';
document.body.appendChild(jquery);

動作確認

▼ jQuery導入前 エラーを確認

▼ jQuery導入後 jQueryが動作することを確認

解説

以下のscriptタグが生成されます。

var jquery = document.createElement("script");
jquery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js';

⇓

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

---

以下で、bodyタグの一番下に、jQueryをCDNで読み込むscriptタグが挿入されます。

document.body.appendChild(jquery);

▼ jQeuryを読み込むscriptタグの挿入を確認

これで終わりにしようと思いましたが、おまけ

appleの公式サイトで上記のスクリプトを実行すると、以下のエラーが表示されます。

Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'unsafe-inline' 'unsafe-eval' blob: *.apple.com *.apple-mapkit.com www.instagram.com platform.twitter.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

▼ Google翻訳

次のコンテンツセキュリティポリシーディレクティブに違反しているため、スクリプト 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'の読み込みを拒否しました： "script-src 'unsafe-inline '' 'unsafe-eval' blob：* .apple.com * .apple-mapkit.com www.instagram.complatform.twitter.com "。 'script-src-elem'は明示的に設定されていないため、 'script-src'がフォールバックとして使用されることに注意してください。

▼ コンテンツセキュリティポリシー(Content-Security-Policy)とは

HTTP の Content-Security-Policy レスポンスヘッダーは、ウェブサイト管理者が、あるページにユーザーエージェントが読み込みを許可されたリソースを管理できるようにします。

ふむふむ。サーバー側でコンテンツセキュリティポリシーを設定しているので、それに違反するものはhttp通信できないってことでしょうか。不要なscriptを実行させない仕組みなようです。
今回は深追いしませんが、ちゃんとセキュリティのことを考えられているサイトでは、上記の方法でのjQueryの導入は難しいそうです。

終わりに

自分のためのメモとして書きましたが、誰かのためになればいいな〜といった感じです。
コンテンツセキュリティポリシーについて、もっと勉強しないと！