반응형
Angular 1.2+에서 $sce.trustAsHtml(string)을 사용하여 ng-bind-html-unsafe를 복제하려면 어떻게 해야 합니까?
ng-bind-html-unsafeAngular 1.2에서 제거되었습니다.
사용할 필요가 있는 것을 실장하려고 합니다.ng-bind-html-unsafe문서 및 GITHUB 커밋에는 다음과 같이 기재되어 있습니다.
ng-syslog-syslog는 ng-syslog-syslog와 같은 동작을 제공합니다.HTML은 $sce.trustAsHtml(string)의 결과에 바인드되어 있는 경우 검사되지 않은 결과입니다.
이걸 어떻게 하나요?
필터
app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
사용.
<ANY ng-bind-html="value | unsafe"></ANY>
다음 중 하나여야 합니다.
<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]
}]);
개인적으로 데이터베이스로 들어가기 전에 모든 데이터를 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);
}]);
var line = "<label onclick="alert(1)">aaa</label>";
1. 필터 사용
app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
사용(표준):
<span ng-bind-html="line | unsafe"></span>
==>click `aaa` show alert box
2. ngSanitize 사용 : 안전
포함하다angular-sanitize.js
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
루트 앵글 앱 추가
var app = angular.module("app", ["ngSanitize"]);
사용(표준):
<span ng-bind-html="line"></span>
==>click `aaa` nothing happen
필터를 작성하는 것만으로 문제가 해결됩니다.(Angular 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>
출처 - https://github.com/angular-ui/bootstrap/issues/813
자바스크립트
$scope.get_pre = function(x) {
return $sce.trustAsHtml(x);
};
HTML
<pre ng-bind-html="get_pre(html)"></pre>
레일(적어도 내 경우)의 경우 angularjs-rails gem을 사용하는 경우 sanitize 모듈을 추가해야 합니다.
//= 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>
언급URL : https://stackoverflow.com/questions/18340872/how-do-you-use-sce-trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu
반응형
'programing' 카테고리의 다른 글
| 'react-dom' 모듈을 확인할 수 없습니다. (0) | 2023.03.25 |
|---|---|
| 변수에 예약된 문자가 있을 때 jq를 사용하는 방법은 무엇입니까? (0) | 2023.03.25 |
| 리액트 네이티브에서 텍스트 입력을 올바르게 정렬하는 방법 (0) | 2023.03.25 |
| WordPress get_query_var() (0) | 2023.03.25 |
| Angular에서 텍스트를 지우는 방법UI 자동 검색 입력 (0) | 2023.03.20 |