初めての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でさくさく進数相互変換をつくる
最終更新日: 2022-09-02
書いた人: たくち
たくちです。長野県出身、カナダ・バンクーバー在住のソフトウェアエンジニア。これまでB2B/B2Cの各領域で、Web技術・データサイエンス・機械学習のプロダクト化および顧客への導入支援・コンサルティング、そして関連分野のエバンジェリズムに携わってきました。現在はフリーランスとして活動を続けつつ、アフリカ・マラウイにて1年間の国際ボランティアに従事中。詳しい経歴はレジュメ を参照ください。いろいろなまちを走って、時に自然と戯れながら、その時間その場所の「日常」を生きています。ご意見・ご感想およびお仕事のご相談は [email protected] まで。
寄付で活動を支援する 一杯のコーヒーを贈る免責事項
- Amazonのアソシエイトとして、当サイトは amazon.co.jp 上の適格販売により収入を得ています。
- 当サイトおよび関連するメディア上での発言はすべて私個人の見解であり、所属する（あるいは過去に所属した）組織のいかなる見解を代表するものでもありません。
- 当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、個人ブログという性質上、誤情報や客観性を欠いた意見が入り込んでいることもございます。いかなる場合でも、当サイトおよびリンク先に掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。
- その他、記事の内容や掲載画像などに問題がございましたら、直接メールでご連絡ください。確認の後、対応させていただきます。