クイックリファレンス

Polyfill.io 代替手段&機能検出(Feature Detection)チートシート

ポリフィル読み込みのリファレンス:polyfill.io サプライチェーン攻撃に関するセキュリティ警告、Cloudflare cdnjs 代替 URL、条件付きスクリプト読み込み、core-js 導入を解説。

· 公開日

[!CAUTION] 重大なサプライチェーン警告: 元の polyfill.io ドメインは第三者に買収され、マルウェア注入のサプライチェーン攻撃に悪用されました。本番環境のコードベースから polyfill.io への参照を直ちにすべて削除してください。

安全な Cloudflare CDN 代替ミラー

Cloudflare および cdnjs では、検証・隔離されたポリフィルライブラリのドロップイン代替ミラーが提供されています:

<!-- Cloudflare が提供する安全なドロップイン代替 URL -->
<script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js"></script>

機能検出(Feature Detection)による条件付き読み込み

ES6+ API をネイティブサポートするモダンブラウザで不要なポリフィル読込を避けるため、script タグ挿入前にインラインで機能チェックを行います:

<script>
  if (!(window.Promise && [].includes && Object.assign && window.Map)) {
    var script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js';
    document.head.appendChild(script);
  }
</script>

推奨されるモダン手法:Core-JS とバンドラーによるポリフィル同梱

現代のフロントエンド開発では、実行時に外部スクリプトを読み込むのではなく、ビルド時(Vite・Webpack・Babel 等)にポリフィルをバンドルします:

npm install core-js

アプリケーションのエントリーポイント(index.js)にて:

import 'core-js/stable';

参考リンク

関連テーマ