Edited at

Lightning Componentにおけるコンテンツセキュリティポリシー

More than 3 years have passed since last update.

Salesforce1 Lightning Advent Calendar 2014 12月4日の投稿です。

Lightning Componentでは、コンテンツセキュリティポリシー (CSP) を使用して、ページに読み込むコンテンツのソースを制御しています。

この制御によって、StaticResourceにあるJavaScriptしかロードできなくなっています。VisualforceページではJavaScriptをCDNから読み込むことができましたが、Lightning Componentでは読み込めなくなっています。


JavaScriptファイル


JavaScriptをStaticResourceに登録した場合


SampleApp.app

<aura:application>

<script src="/resource/jquery" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
console.log("jQuery loaded.");
});
</script>
</aura:application>


ZipファイルをStaticResourceに登録した場合


SampleApp.app

<aura:application>

<script src="/resource/zip/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
console.log("jQuery loaded.");
});
</script>
</aura:application>


CDNなどの外部サイトを指定するとエラーになる


SampleApp.app

<aura:application>

<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
console.log("jQuery loaded.");
});
</script>
</aura:application>


CSS、画像など

HTTPS URL を使用する必要があります。


SampleApp.app

<aura:application>

<link rel="stylesheet" type="text/css"
href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
</aura:application>

とLightningコンポーネント開発者ガイドに書いてありますが、HTTPS接続でもChromeで開くと下記のようにCSPの制限にひっかかってしまうようです。

Refused to load the stylesheet 'https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css' because it violates the following Content Security Policy directive: "style-src 'self' chrome-extension: 'unsafe-inline'".

う〜ん。。。