Chrome Dev Editor の 'Refactor for CSP' で何が行われているのかを調べた

昨日の記事：

の続きです。

Polymerのエレメント（Web Components）を用いたプロジェクトをChromeアプリとして実行するためには、Chrome Dev EditorにてRefactor for CSPというワンステップが必要です。ここでは何が行われているのかを調べてみました。

CSP logo (Mozilla)

Refactor for CSP では「'unsafe-inline'回避」が行われていた

実際にこの作業の前後のbower_componentsフォルダ内のファイルのソースコードの違いを比べてみたところ、非常にシンプルな結果が得られました。なんと、

インラインスクリプトを外部JavaScriptの呼び出しに変更している

だけのことでした！

つまり、link rel="import"する<my-component>のHTMLファイルに

...
<polymer-element name="my-component">
   <template>
      ...
   </template>
</polymer-element>
<script>
   (function() {
     function hoge(){};
     Polymer('my-component', {});
   })();
</script>

のように直接scriptを書いていたところを、

<polymer-element name="my-component">
   <template>
      ...
   </template>
</polymer-element>
<script src="my-component.html.js"></script>

と変更して、scriptを外部ファイルとして呼び出すようにすれば、Chromeアプリでも問題なく<my-component>を埋め込むことが出来るのです。

参考文献

• ChromeのContent Security Policyについて
  • Content Security Policy (CSP) - Google Chrome

追記（2015-03-14）

Chrome Dev Editor の 'Refactor for CSP'機能をターミナル上で使うためのスクリプトを書きました！！