読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

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

AngularJS AngularJS1.5.x JavaScript

スポンサードリンク

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にはめちゃくちゃ注意しなければ。。。)