初めてのChromeExtensionを作った後にAngularJSに触れて、最初は「ChromeExtensionをAngularJS使って作ることができたらChromeの右上ライフが捗る！？」なんて思って試したわけですが、何故かAngularJSが動かず諦めていました。
それを最近ふと思い出したので調べてみたら、ChromeExtensionのCSP (Content Security Policy) が原因だったことがあっさりと分かって解決したのでメモ。
結論
AngularJSでChromeExtension開発をするためにやるべきことは以下の2つ。
- ng-appの横にng-cspと書いてあげる
- angular-csp.cssをローカルに持ってきてロードしてあげる
以下詳細。
CSP (Content Security Policy) とは
すごーくざっくりと言えば、XSSをはじめとする攻撃に利用されそうな機能に対して与える制限のこと。
そのような機能の分かりやすい例としてはeval()でしょう。ご存知の通りevalは与えられた文字列をソースとしてなんでもかんでも解釈・実行してしまうため、脆弱性があった際に与える影響は絶大です。
evalを使おう！とあなたが思った時、それは他の機能で代替可能ですので思い止まりましょう。というわけで、CSPでeval相当の記述を全て禁止にすることができたりするわけです。
ChromeExtensionのCSPとAngularJSの使い方
ChromeExtensionでは、CSPがデフォルトで設定されています。
Content Security Policy (CSP) - Google Chrome
設定されている制限の内容は、
- evalとそれに相当する記述の無効化
- インライン（HTMLに埋め込む形）でのJavaScript実行の禁止
- スクリプトファイルやその他リソースファイルの読み込みはローカルからのみ
の3つ。
AngularJSでは実行速度向上のためにeval相当の記述を利用している箇所があり、そこがChromeExtensionのCSPに引っかかっているのです。10041行目(angular.js v1.2.0)から定義されているgetterFn関数です。これがChromeExtensionでAngularJSが動かなかった原因。
そして、この問題への対処法はAngularJS公式で用意されています。やり方はng-appと一緒にng-cspと書いてあげるだけ。
<html lang="ja" ng-app ng-csp>
これで、AngularJSが実行速度向上を諦めるモードになります。そんなわけですべての式の評価にかかる速度が30%減になってしまうようですが、仕方ない。
しかしどうやら30%の速度だけでは等価交換にならなかったようで、CSPによって影響を受けたままのものがまだあります。それはCSSの一部。
angular.js(v1.2.0)の最下部では、AngularJSの導入に伴って必要となるCSSをまとめてjQueryでhead要素の先頭に埋め込んでいます。これは例えばバリデーション時に表示するエラーメッセージのhidden制御なんかが関係してくる。
その処理がChromeExtensionのCSPの1つ「インラインでのJavaScript実行の禁止」に引っかかってしまい、必要なCSSが埋め込まれない問題が発生します。実際、ng-cspを付けるだけだとバリデーションの結果に関係なくエラーメッセージが表示され続けます。
これを解決するには、jQueryを使って埋め込んでいたCSSを全て1つのCSSファイルにまとめてローカルからロードしてあげる必要があるのです。
ロードすべきCSSファイルは公式でも公開しています。
angular-csp.css
ここまでやって初めて、ChromeExtension上でAngularJSが問題なく動くようになります。（ぱちぱち
へんかんくん v0.2.0 が生まれました
以上、AngularJSでChromeExtension開発をした時のメモでした。
僕が何をしたかったかと言うと、初めて作ったChromeExtensionのリニューアルです。
HTMLエスケープ機能が追加されて、名前は「しんすうへんかんくん」から「へんかんくん」になりました。僕のChromeの右上ライフが捗ります。それだけ。
参考
シェアする
サポートする（ありがとうございます）
あわせて読みたい
- 2017-12-01
- 『Java本格入門』メモ
- 2013-10-29
- 「知の逆転」を読んだ
- 2013-08-02
- AngularJSでさくさく進数相互変換をつくる
書いた人: たくち
たくちです。長野県出身、カナダ・バンクーバー在住のソフトウェアエンジニア。これまでB2B/B2Cの各領域で、データサイエンス・機械学習のプロダクト化および顧客への導入支援・コンサルティング、そして関連分野のエバンジェリズムに携わってきました。趣味は旅行、マラソン、登山、ブリュワリー巡り。近況は takuti.me/now より。ブログへのご意見・ご感想など、@takuti または [email protected] までいつでもお気軽にご連絡ください。
※当サイトおよび関連するメディア上での発言はすべて私個人の見解であり、所属する（あるいは過去に所属した）組織のいかなる見解を代表するものでもありません。
過去の人気記事
- 2021-08-12
- いい加減、プロダクトマネージャーという職業に幻想を抱くのはやめよう。
- 2017-12-16
- データサイエンスプロジェクトのディレクトリ構成どうするか問題
- 2017-06-10
- Amazonの推薦システムの20年