Lightning コンポーネントでのサードパーティ CSS の読み込み
カスケードスタイルシート (CSS) とその他のリソースは、サードパーティから読み込むのではなく、静的リソースに組み込んでください。
この要件は、「サードパーティエンドポイントからの JavaScript ファイルの読み込み」での説明と同じ理由で適用されます。ソリューション全体をバージョン管理下におく必要があり、組織のシステム管理者と Salesforce セキュリティレビューチームが変更を認識する必要があります。
<link> タグを使用して外部 CSS リソースを読み込むことは、このセキュリティポリシーに違反します。
簡潔にまとめると、解決策は次のようになります。
- サードパーティ CSS ファイルを静的リソースに保存します。
- このリソースをソリューションパッケージに追加します。
- .cmp または .app マークアップの <ltng:require> タグを使用して CSS を参照します。
詳細は、『Lightning Aura コンポーネント開発者ガイド』の「外部 CSS の使用」を参照してください。
Aura の例
次のコードスニペットは、セキュリティ違反と、その違反を Aura の Lightning コンポーネントで修正する方法を示しています。この Aura コンポーネントコードは、<link> タグを使用して外部 CSS リソースを読み込むため安全ではありません。
1<aura:component>
2 <link rel="stylesheet" href="https://example.com/styles.css" type="text/css">
3<aura:component>次の Aura コンポーネントコードは、<ltng:require> を使用しています。静的リソースとしてアップロードされた外部 CSS リソースを参照するには、こちらの方法の方が安全です。
1<aura:component>
2 <ltng:require styles="{!$Resource.SLDSv1 + '/assets/styles/lightning-design-system-ltng.css'}" />
3</aura:component>