AngularJSでJavaScript、CSSを含むHTMLデータをバインドして表示する方法を確認しました。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
$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>
下記スクリプト内のデータは、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”]);
一方、インラインの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>
（スクリプト）
例）
（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);
});
デモとコードサンプルはこちら。