Edited at

react.js HandleBars Angular.js HTML-escapesさせない値の表示方法

More than 3 years have passed since last update.

例えばDBやAPIでHTMLタグがかえってきたものを評価して表示したい場合のお話。

最近のFWやテンプレートエンジンは標準でエスケープ処理がはいっているので、

逆にエスケープさせないように書く必要があります。

そのやり方のFWごとのまとめです。


handlebars

HandleBarsでは以下のようにすると変数がEscapeされずにそのまま表示されます。

{{{foo}}}


react.js(jsx)

dangerouslySetInnerHTMLで入れ込みます。

var TdHtml = React.createClass({

render: function() {
var value = this.props.value;
return (
<td key={this.props.key} dangerouslySetInnerHTML={{__html: value}} />
);
}
});


angular

$sce.trustAsHtml()を使います。

<script>

angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
$scope.deliberatelyTrustDangerousSnippet = function() {
return $sce.trustAsHtml($scope.snippet);
};
}]);
</script>

<div ng-controller="ExampleController">

<td><div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div></td>
</tr>