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

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'".

う〜ん。。。