AngularJSでJavaScript、CSSを含むHTMLデータをバインドして表示

wp-admin

7年前

AngularJSでJavaScript、CSSを含むHTMLデータをバインドして表示する方法を確認しました。
　
デモとコードサンプルはこちら。
　
※目次をクリックすると目次の下部にコンテンツが表示されます。

１．$sceサービス
２．$sanitizeサービスとng-bind-htmlディレクティブでHTMLとして表示
３．$sceのtrustAsHtmlを使って、CSS、JavaScriptを実行

$httpサービスのinterceptorの概要

AngularJSでは、デフォルトで$sce（strict contextual escaping）サービスが有効になっていて、スクリプト内で定義した変数の値をバンディングでしてビューに表示する際にHTMLタグをエスケープしたり、JavaScriptやCSSの設定など危険なデータをサニタイズしてくれます。
　
下記スクリプト内のデータは、bタグ、CSS、JavaScriptの設定がしてありますが、HTMLビュー内で{{htmlData}}を使ってバインドするとHTML、CSS、JavaScriptコードがエスケープ、サニタイズされ文字列としてそのまま表示されます。
　
（スクリプト）
$scope.htmlData = “<b style=’color: red;’ onmouseover=alert(‘Alert!’)>mouseover</b>”;
　
（HTMLビュー）
{{htmlData}}
→<b style=’color: red;’ onmouseover=alert(‘Alert!’)>mouseover</b>

$sanitizeサービスとng-bind-htmlディレクティブでHTMLとして表示

$sanitizeサービスを有効にし、ng-bind-htmlディレクティブを使ってバインドするとHTMLタグを表示する事が出来ます。
　
一方、インラインのJavaScriptコードやスタイル属性などscriptやcss要素は除去されます。
　
（HTMLビュー）
<span ng-bind-html=”htmlData”></span>
→mouseover
　
※$sanitizeサービスを有効にするには？
　
①angular-sanitize.min.jsを入手
　
AngularJS本体には含まれていないので、別途angular-sanitize.min.jsを入手し、インクルードします。
<script src=”js/angular-sanitize.min.js”></script>
　
②依存するモジュールに”ngSanitize”を指定
　
var myApp = angular.module(‘myApp’, [“ngSanitize”]);

$sceのtrustAsHtmlを使って、CSS、JavaScriptを実行

$sceサービスのtrustAsHtmlメソッドを使ってJavaScriptやCSS要素などをサニタイズせずにHTMLデータを表示、実行する事が出来ます。
　
例）
（HTMLビュー）
<span ng-bind-html=”trustedData”></span>
　
（スクリプト）

var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller("myCtrl", function ($scope,$sce) {
  $scope.htmlData = "<b style='color: red;' onmouseover=alert('Alert!')>mouseover</b>";
  $scope.trustedData = $sce.trustAsHtml($scope.htmlData);
});

　
デモとコードサンプルはこちら。