2016-07-27 11 views
0

anglejsでhtmlをレンダリングする前にスクリプトタグの挿入/ロードを防ぐ方法は?

var testApp = angular.module('testApp',['ngSanitize']); 
 
testApp.controller('TestController',function($scope,$sce){ 
 
\t $scope.htmlString = "<span>Test HTML</span><script>alert('Hello Script');</script>"; 
 
\t $scope.toTrusted = function(htmlContent) { 
 
\t \t if(htmlContent && htmlContent != "") { 
 
\t \t \t return $sce.trustAsHtml(htmlContent); \t \t \t 
 
\t \t } 
 
\t \t return ""; 
 
\t }; 
 
});
<html ng-app="testApp"> 
 
<body ng-controller="TestController"> 
 
\t <div ng-bind-html="toTrusted(htmlString)"></div> 
 
\t <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular-sanitize.min.js"></script> 
 
\t <script type="text/javascript" src="resources/js/controllers/testController.js"></script> 
 
</body> 
 
</html>

何べきtag.So私は私がHTML文字列でスクリプトタグを取得していますhtml.Sometimesとして文字列をレンダリングするためのNG-バインド-HTMLを使用していると私は/ロード・スクリプトを挿入する必要はありません私はスクリプトタグを防ぐために行う。

私はこの問題の解決策を探しましたが、htmlをレンダリングする前に文字列からスクリプトタグを削除すると誰かが言います。だれかが私に提案してください。それを行うにはどうすればよいですか?

私はangularjsとfirebaseの助けを借りてチャットアプリを開発しています。レンダリングチャットメッセージの場合、私はng-bind-htmlディレクティブを使用します。ユーザーがチャットメッセージの一部としてスクリプトタグを送信したが、私はこのスクリプトを実行するように制限したい。

+0

さて、私は混乱しています。スクリプトタグはあなたの文字列にあります。なぜあなたはそれを取り出してもらえないのですか? –

+0

制限されたタグのサブセットのみを許可するには、html文字列をサニタイズする必要があります。 –

+0

私はすべてのHTML要素をサニタイズし、チャットメッセージ用のマークダウン構文を実装します。それをより安全にして、マークダウンがHTMLよりもはるかに簡単なもの(Think GitHub readme)を見つけることができます。 – ste2425

答えて

0

$ sce.trustAsHtmlを使用している場合は、ng-bindだけを使用する必要があります。

<div ng-bind="toTrusted(htmlString)"></div> 

これを試してみてください。

+0

しかし、nig-bindディレクティブは指定されたhtmlのテキストコンテンツを置き換えるために使用されるため、Adityaではng-bindディレクティブを使用できません –

関連する問題