【AngularJS1.5】Error: $sce:unsafe Require a safe/trusted value

app.itemListをループして、そのなかにあるhtmlソースをviewに吐き出そうとした。

<div class="item-section" ng-repeat="item in app.itemList">
    <div class="item" ng-bind-html="item.html"></div>
</div>

そしたらエラー（°ω°

AngularJS

Error: $sce:unsafe Require a safe/trusted value Attempting to use an unsafe value in a safe context.

$sce・・・？ なんぞそれ？

qiita.com

要は、セキュリティ対策として、サニタイズされていない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にはめちゃくちゃ注意しなければ。。。）