CDNで焦った

環境

以下の環境で動作させています。

% winver

Windows11
バージョン:24H2
OSBuild:26100.2605

焦った事象

①Mixed Content The page at `https://~~~`  was loaded over HTTPS but requested an insecure script 'http://unpkg.com/vue@3.5.13/dist/vue.global.js' . This request has been blocked; the content must be served over HTTPS.

②Uncaught ReferenceError: vue is not defiened at ~~~

CDNの読み込みエラーが発生　だが・・・

軽微な修正作業中に、テスト環境の管理画面ログイン画面がエラーを吐いて画面遷移できなくなっていました。
ログイン周りはLaravelのSanctum & Vue.jsで作成していたため、検証ツール上からエラーを確認。

HTTPSページ上でHTTPのスクリプトを読み込もうとしてブロックされた？

「いやちゃんとhttpsになっているよな・・・？」
「そもそも数時間前までは問題なく動作していたような？」

どうやら本番環境でも同様の不具合が起きていたようで急ぎチームに助力を求めたところ、下記の記事を共有いただきました。

なるほど参照先側のパスが変更になった可能性もあるのか・・・いや困るんだが。

・パスを辿ったところ、参照先のVueも落ちているっぽかったこと
・リリース後間もない不具合だったこと

からCDN参照を取りやめ、ファイル参照にすることで事なきを得ました。

所感

その後同時期のSNSを覗いていたらunpkg自体が落ちていたとの情報もちらほら見かけたので、上記の記事にもあったCDN参照の怖さを肌で感じた事象でした。

ほか参考にした記事