app.itemList
をループして、そのなかにあるhtmlソースをviewに吐き出そうとした。
<div class="item-section" ng-repeat="item in app.itemList"> <div class="item" ng-bind-html="item.html"></div> </div>
そしたらエラー(°ω°
Error: $sce:unsafe Require a safe/trusted value Attempting to use an unsafe value in a safe context.
$sce
・・・? なんぞそれ?
要は、セキュリティ対策として、サニタイズされていないHTML要素や、信頼されていないページの要素を表示するのを防止するための機能です。 そこで、信頼されている安全なHTMLやURLに信頼済みのマークをつけるようにして、マークのついていない要素を表示できないようにしたり、ブラックリストに含まれているページの内容を表示できないようにしたりするのがSCEの主な機能です。
なるほど〜。確かにそのままいれちゃうとxssになるんだろうね。
ということで、Controllerでメソッドを作って、それで$sce
のメソッドを当てるようにしました。
.controller('AppController', ['$sce', function($sce) { // ...色々省略... // $sec.trustAsHtmlのラッパー(ただの橋渡し) this.trustAsHtml = function(sanitaizedHtml) { return $sce.trustAsHtml(sanitaizedHtml); }; }])
<div class="item-section" ng-repeat="item in app.itemList"> <div class="item" ng-bind-html="app.trustAsHtml(item.html)"></div> </div>
これでできるようになりました。(しかしxssにはめちゃくちゃ注意しなければ。。。)