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

例えば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>