MSAL ブラウザーの CDN 使用法

npm に加えて、msalはMicrosoftホストされる CDN から使用できます。

メモ： MSAL.js v3 以降では、 msal-browser は CDN でホストされなくなります。 CDN から msal-browser を使用する場合は、npm から msal-browser をダウンロードし、アップグレードする前に次のいずれかの方法を選択する必要があります。

1. ESM ビルドを利用する（推奨）
2. ダウンロードしたパッケージから lib/msal-browser.js または lib/msal-browser.min.js を抽出し、アプリで静的資産として提供するか、独自の CDN でホストします

ベスト プラクティス

• MSAL.js v2 の最新バージョンを使用します。
• 本番環境では圧縮版ビルドを使用し、開発時には非圧縮版ビルドを使用します。
• サード パーティの CDN ではなく、Microsoft CDN を使用します。
• ユーザーに最も近い CDN リージョンを使用します。
• ページのレンダリングをブロックしないようにするには、 async 属性または defer 属性を使用します。
• integrity属性を使用して、CDN ビルドの整合性を確保します。
• IE11 のサポートには Promise ポリフィルが必要です (IE11 のサポートに関する詳細情報 )。

基本的な使用方法

<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.35.0/js/msal-browser.min.js"></script>

非最小化ビルド

圧縮版ビルドに加えて、各バージョンの非圧縮版ビルドも利用できます（msal-browser.min.js の代わりに msal-browser.js として）

<!-- Replace <version> with desired version, e.g. 2.3.0 -->
<script type="text/javascript" src="https://alcdn.msauth.net/browser/<version>/js/msal-browser.js"></script>

代替リージョン

Microsoftでは、米国西部とヨーロッパ北部の 2 つの異なるリージョンでホストされている CDN ビルドが提供されます。

CDN フォールバック

万が一、CDN ビルドが破損しているか、CDN 自体にアクセスできない場合、アプリケーションは他の CDN リージョンをフォールバックとして使用できます。

<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.3.0/js/msal-browser.min.js"></script>
<script type="text/javascript">
    if(typeof msal === 'undefined')document.write(unescape("%3Cscript src='https://alcdn.msftauth.net/browser/2.3.0/js/msal-browser.min.js' type='text/javascript' %3E%3C/script%3E"));
</script>

注:document.writeを使用するこの方法は、特定の状況で特定のブラウザーでブロックされる可能性があります。 詳細については、 こちらをご覧ください。

サブリソースの整合性

MDN から:

サブリソース整合性 (SRI) はセキュリティ機能であり、ブラウザーは、フェッチするリソース (CDN からなど) が予期しない操作なしで配信されることを確認できます。 これは、フェッチされたリソースが一致する必要がある暗号化ハッシュを提供できるようにすることで機能します。

コンテンツ配信ネットワーク (CDN) を使用して、複数のサイト間で共有されるスクリプトやスタイルシートなどのファイルをホストすることで、サイトのパフォーマンスを向上させ、帯域幅を節約できます。 ただし、CDN を使用すると、攻撃者が CDN の制御を取得した場合、攻撃者は任意の悪意のあるコンテンツを CDN 上のファイルに挿入 (またはファイルを完全に置き換える) 可能性があるため、その CDN からファイルをフェッチするすべてのサイトを攻撃する可能性もあるというリスクもあります。

サブリソースの整合性を使用すると、このような攻撃のリスクを軽減できます。たとえば、Web アプリケーションまたは Web ドキュメントのフェッチ (CDN または任意の場所から) のファイルが、サード パーティがそれらのファイルに追加コンテンツを挿入することなく、それらのファイルに対して他の種類の変更を加えることなく確実に配信されるようにすることができます。

アプリケーションと、ブラウザーに格納される認証アーティファクト (アクセス トークンなど) をセキュリティで保護するために、MSAL.js の CDN ビルドで SRI ハッシュ MSAL.js を使用することを強くお勧めします。

MSAL.js SRI ハッシュの例

<script
    type="text/javascript"
    src="https://alcdn.msauth.net/browser/2.3.0/js/msal-browser.min.js"
    integrity="sha384-o+Sncs5XJ3NEAeriM/FV8YGZrh7mZk4GfNutRTbYjsDNJxb7caCLeqiDabistgwW"
    crossorigin="anonymous"></script>

SRI ハッシュ に関する注意事項

• 各ハッシュは、MSAL.js v2 のバージョンに固有であり、変更されません。
• SRI ハッシュの使用は、MSAL.js CDN ビルドでは省略可能です。
• integrity属性を v2 CDN ビルド MSAL.js 使用する場合は、crossorigin属性を "anonymous" に設定する必要があります。
• CDN ビルドが侵害されたと思われる場合は、すぐに お知らせください 。

SRI ハッシュ履歴