AngularJS는 $sce를 사용하여 코드 보안 검사를 제어합니다._AngularJS
- WBOY원래의
- 2016-05-16 15:21:471052검색
브라우저에는 동일 원본 로딩 정책이 있기 때문에 서로 다른 도메인의 파일을 로드할 수 없으며, 파일과 같은 만족스럽지 못한 프로토콜을 사용하여 액세스할 수도 없습니다.
AngularJ의 보안 허점을 피하기 위해 일부 ng-src 또는 ng-include에 대한 보안 검사가 수행되므로 iframe의 ng-src를 사용할 수 없는 경우가 종종 있습니다.
SCE란
SCE, 즉, strict contextual escaping, 내 이해는 strict contextisolation... 번역이 정확하지 않을 수도 있지만 문자 그대로의 이해를 통해 anglejs가 context 접근을 엄격하게 제어해야 한다는 것입니다.
SCE는 기본적으로 각도에 의해 활성화되므로 타사 스크립트 또는 라이브러리 사용, HTML 일부 로드 등과 같은 일부 안전하지 않은 동작이 기본적으로 금지됩니다.
이것은 실제로 안전하고 크로스 사이트 XSS를 방지하지만 때로는 특정 파일을 직접 로드하고 싶을 때도 있습니다. 이 경우 어떻게 해야 합니까?
이때 $sce 서비스를 이용하면 일부 주소를 안전하고 승인된 링크로 바꿀 수 있습니다... 간단히 말해서, 이 낯선 사람이 실제로는 나의 좋은 친구이고 매우 신뢰할 수 있는 사람이라고 도어맨에게 말하는 것과 같습니다. 그것을 가로챌 필요가 없습니다!
일반적으로 사용되는 방법은 다음과 같습니다.
$sce.trustAs(유형,이름);
$sce.trustAsHtml(값);
$sce.trustAsUrl(값);
$sce.trustAsResourceUrl(값);
$sce.trustAsJs(값);
다음은 첫 번째 API를 기반으로 합니다. 예를 들어 trsutAsUrl은 실제로 trsutAs($sce.URL,"xxxx");
를 호출합니다.type의 선택적 값은 다음과 같습니다.
$sce.HTML
$sce.CSS
$sce.URL //href는 태그에, src
는 img 태그에
$sce.RESOURCE_URL //ng-include,src 또는 ngSrc(예: iframe 또는 Object
$sce.JS
공식 웹사이트의 예: ng-bind-html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
<div ng-controller="AppController">
<i ng-bind-html="explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i>
</div>
<script type="text/javascript">
angular.module('mySceApp',[])
.controller('AppController', ['$scope', '$sce',
function($scope, $sce) {
$scope.explicitlyTrustedHtml = $sce.trustAsHtml(
'<span onmouseover="this.textContent="Explicitly trusted HTML bypasses ' +
'sanitization."">Hover over this text.</span>');
}]);
</script>
</body>
</html>
사용 사례: ng-src 링크
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
<div ng-controller="AppController">
<iframe width="100%" height="100%" seamless frameborder="0" ng-src="{{trustSrc}}"></iframe>
</div>
<script type="text/javascript">
angular.module('mySceApp',[])
.controller('AppController', ['$scope','$sce',function($scope,$sce) {
$scope.trustSrc = $sce.trustAs($sce.RESOURCE_URL,"http://fanyi.youdao.com/");
// $scope.trustSrc = $sce.trustAsResourceUrl("http://fanyi.youdao.com/");//等同于这个方法
}]);
</script>
</body>
</html>
아직 시간이 있으니 ng-bind-html 지시어와 Angle의 $sce 서비스를 소개해드리겠습니다
Angular js의 강력한 기능 중 하나는 양식에 대해 자주 사용하는 두 가지 기능인 ng-bind와 ng-model입니다. 그러나 우리 프로젝트에서는 백그라운드에서 반환된 데이터에 다양한 html 태그가 포함되어 있는 상황이 발생합니다. 예:
$scope.currentWork.description = “안녕하세요.0c6dc11e160d3b678d68754cc175188aa4b561c25d9afb9ac8dc4d70affff419오늘 어디로 갈까요?0d36329ec37a2cc24d42c7229b69747a”
ng-bind-html과 같은 명령을 사용하여 바인딩하지만 결과는 우리가 원하는 것과 다릅니다. 이렇습니다
안녕하세요
오늘은 어디로 갈까요?
어떻게 해야 할까요?
Angular 1.2 이하 버전의 경우 문제를 해결하려면 $sce 서비스를 사용해야 합니다. 소위 sce는 "Strict Contextual Escaping"의 약어입니다. 중국어로 번역하면 "엄격한 컨텍스트 모드"가 되며 이는 안전한 바인딩으로도 이해될 수 있습니다. 사용 방법을 살펴보겠습니다.
컨트롤러 코드:
$http.get('/api/work/get?workId=' + $routeParams.workId).success(function (work) {$scope.currentWork = work;});
HTML 코드:
<p> {{currentWork.description}}</p>
우리가 반환하는 콘텐츠에는 일련의 html 태그가 포함되어 있습니다. 결과는 기사의 시작 부분에서 언급한 바와 같습니다. 이 시점에서 우리는 안전하게 바인딩하도록 지시해야 합니다. $sce.trustAsHtml()을 사용하여 수행할 수 있습니다. 이 방법은 값을 권한에 의해 허용되고 "ng-bind-html"과 함께 사용하기에 안전한 값으로 변환합니다. 따라서 컨트롤러에 $sce 서비스를 도입해야 합니다
controller('transferWorkStep2', ['$scope','$http','$routeParams','$sce', function ($scope,$http, $routeParams, $sce) {
$http.get('/api/work/get?workId=' + $routeParams.workId)
.success(function (work) {
$scope.currentWork = work;
$scope.currentWork.description = $sce.trustAsHtml($rootScope.currentWork.description);
});
html 코드:
<p ng-bind-html="currentWork.description"></p>
결과는 다음 페이지에 완벽하게 표시됩니다.
안녕하세요
오늘은 어디로 갈까요?
이 방법을 사용하여 필터에 캡슐화하고 언제든지 템플릿에서 호출할 수도 있습니다
app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}]);
html 코드:
모두 선택하여 노트에 복사하세요
<p ng-bind-html="currentWork.description | to_trusted"></p>