アーカイブ

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

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>

$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);
});

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

関連記事の目次