답변:
다음과 같아야합니다.
<div ng-bind-html="trustedHtml"></div>컨트롤러에 플러스 :
$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
$scope.html변수를 직접 참조 할 수있는 오래된 구문 대신 :
<div ng-bind-html-unsafe="html"></div>여러 의견자가 지적했듯이 $sce컨트롤러에 주입해야 $sce undefined합니다. 그렇지 않으면 오류가 발생합니다.
var myApp = angular.module('myApp',[]);
myApp.controller('MyController', ['$sce', function($sce) {
// ... [your code]
}]);
<p ng-bind-html="trustedHtml"></p> 그리고$scope.trustedHtml = $sce.trustAsHtml(description(category.id));
<p ng-bind-html="description(category.id)"></p>함수의 마지막 줄 :return $sce.trustAsHtml(value);
필터
app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });용법
<ANY ng-bind-html="value | unsafe"></ANY>ngSanitize않으므로 필요하지 않습니다.ngSanitize
개인적으로 데이터베이스에 들어가기 전에 일부 PHP 라이브러리로 모든 데이터를 삭제하므로 다른 XSS 필터가 필요하지 않습니다.
AngularJS 1.0.8에서
directives.directive('ngBindHtmlUnsafe', [function() {
return function(scope, element, attr) {
element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe);
scope.$watch(attr.ngBindHtmlUnsafe, function ngBindHtmlUnsafeWatchAction(value) {
element.html(value || '');
});
}
}]);
쓰다:
<div ng-bind-html-unsafe="group.description"></div>비활성화하려면 $sce:
app.config(['$sceProvider', function($sceProvider) {
$sceProvider.enabled(false);
}]);
<script>System.out.printIn("Hello World!");</script>내 PHP가 사용자 입력에서 모든 JS를 제거했기 때문에 개인적으로 시도하지 않은 경우 작동한다고 생각합니다 . Angular의 네이티브 예제는 모든면에서 우수하기 때문에 두 번째 예제를 제거했습니다.
var line = "<label onclick="alert(1)">aaa</label>";
app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });(html) 사용 :
<span ng-bind-html="line | unsafe"></span>
==>click `aaa` show alert box포함 angular-sanitize.js
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>ngSanitize루트 각도 앱에 추가
var app = angular.module("app", ["ngSanitize"]);(html) 사용 :
<span ng-bind-html="line"></span>
==>click `aaa` nothing happen간단히 필터를 생성하면 트릭을 수행 할 수 있습니다. (앵귤러 1.6에 대한 답변)
.filter('trustHtml', [
'$sce',
function($sce) {
return function(value) {
return $sce.trustAs('html', value);
}
}
]);그리고 html에서 다음과 같이 사용하십시오.
<h2 ng-bind-html="someScopeValue | trustHtml"></h2>이전 지시문을 다시 원한다면 이것을 앱에 추가 할 수 있습니다.
지령:
directives.directive('ngBindHtmlUnsafe', ['$sce', function($sce){
return {
scope: {
ngBindHtmlUnsafe: '=',
},
template: "<div ng-bind-html='trustedHtml'></div>",
link: function($scope, iElm, iAttrs, controller) {
$scope.updateView = function() {
$scope.trustedHtml = $sce.trustAsHtml($scope.ngBindHtmlUnsafe);
}
$scope.$watch('ngBindHtmlUnsafe', function(newVal, oldVal) {
$scope.updateView(newVal);
});
}
};
}]);용법
<div ng-bind-html-unsafe="group.description"></div>자바 스크립트
$scope.get_pre = function(x) {
return $sce.trustAsHtml(x);
};HTML
<pre ng-bind-html="get_pre(html)"></pre>들어 레일 당신이 사용하는 경우 (내 경우에는 적어도) 보석 - 레일 AngularJS와을 의 살균 모듈을 추가하는 것을 기억하십시오
//= require angular
//= require angular-sanitize그런 다음 앱에로드하십시오 ...
var myDummyApp = angular.module('myDummyApp', ['ngSanitize']);그런 다음 다음을 수행 할 수 있습니다.
템플릿에서 :
%span{"ng-bind-html"=>"phone_with_break(x)"}그리고 결국 :
$scope.phone_with_break = function (x) {
if (x.phone != "") {
return x.phone + "<br>";
}
return '';
}my helpful code for others(just one aspx to do text area post)::
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication45.WebForm1" %>
<!DOCTYPE html>
enter code here
<html ng-app="htmldoc" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script src="angular-sanitize.min.js"></script>
<script>
angular.module('htmldoc', ['ngSanitize']).controller('x', function ($scope, $sce) {
//$scope.htmlContent = '<script> (function () { location = \"http://moneycontrol.com\"; } )()<\/script> In last valid content';
$scope.htmlContent = '';
$scope.withoutSanitize = function () {
return $sce.getTrustedHtml($scope.htmlContent);
};
$scope.postMessage = function () {
var ValidContent = $sce.trustAsHtml($scope.htmlContent);
//your ajax call here
};
});
</script>
</head>
<body>
<form id="form1" runat="server">
Example to show posting valid content to server with two way binding
<div ng-controller="x">
<p ng-bind-html="htmlContent"></p>
<textarea ng-model="htmlContent" ng-trim="false"></textarea>
<button ng-click="postMessage()">Send</button>
</div>
</form>
</body>
</html>$scope.trustAsHtml=function(scope)
{
return $sce.trustAsHtml(scope);
}
<p class="card-text w-100" ng-bind-html="trustAsHtml(note.redoq_csd_product_lead_note)"></p>