ng-bind-html-unsafe가 제거 된 상태에서 HTML을 어떻게 삽입합니까?

컨트롤러가 HTML을 DIV에 삽입 할 수 있도록 $sanitize공급자와 ng-bind-htm-unsafe지시문 을 사용하려고합니다 .

그러나 나는 그것을 작동시킬 수 없다.

<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>

AngularJS (감사)에서 제거 되었기 때문에 발견되었습니다.

그러나가 없으면 ng-bind-html-unsafe이 오류가 발생합니다.

http://errors.angularjs.org/undefined/$sce/unsafe

1. sanitize.js가로드되어 있는지 확인해야합니다. 예를 들어 https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION]/angular-sanitize.min.js 에서로드 하십시오.
2. 예를 들어 다음에 ngSanitize모듈 을 포함시켜야 합니다 app.var app = angular.module('myApp', ['ngSanitize']);
3. ng-bind-html원본 html콘텐츠 와 바인딩 하면 됩니다. 컨트롤러에서 다른 작업을 수행 할 필요가 없습니다. 구문 분석 및 변환은 ngBindHtml지시문에 의해 자동으로 수행됩니다 . (이 How does it work섹션을 읽으십시오 : $ sce ). 따라서 귀하의 경우 <div ng-bind-html="preview_data.preview.embed.html"></div>에는 작업을 수행 할 것입니다.

Alex가 제안한 것처럼 범위에서 함수를 선언하는 대신 간단한 필터로 변환 할 수 있습니다.

angular.module('myApp')
    .filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

그런 다음 다음과 같이 사용할 수 있습니다.

<div ng-bind-html="preview_data.preview.embed.html | to_trusted"></div>

다음은 실제 예입니다. http://jsfiddle.net/leeroy/6j4Lg/1/

표시된 다른 의견 중 하나 ng-bind-html-unsafe가 더 이상 사용되지 않으므로 Angular 1.2.0 ...을 사용하고 있음을 나타냅니다 .

대신 다음과 같은 작업을 수행해야합니다.

<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>

컨트롤러에서 $sce서비스를 삽입 하고 HTML을 "신뢰할 수있는"것으로 표시하십시오.

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
  // ...
  $scope.preview_data.preview.embed.htmlSafe = 
     $sce.trustAsHtml(preview_data.preview.embed.html);
}

1.2.0-rc3 이상을 사용하고 싶습니다. rc3 의 버그 를 수정 하여 "감시자"가 신뢰할 수있는 HTML에서 제대로 작동하지 못하게했습니다.

나에게 가장 간단하고 유연한 솔루션은 다음과 같습니다.

<div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div>

컨트롤러에 기능을 추가하십시오.

$scope.to_trusted = function(html_code) {
    return $sce.trustAsHtml(html_code);
}

$sce컨트롤러의 초기화에 추가 하는 것을 잊지 마십시오 .

내 의견으로는 이것에 대한 가장 좋은 해결책은 다음과 같습니다.

1. 예를 들어 common.module.js 파일에있을 수있는 사용자 지정 필터를 만듭니다 (앱 전체에서 사용됨).

   var app = angular.module('common.module', []);
   
   // html filter (render text as html)
   app.filter('html', ['$sce', function ($sce) { 
       return function (text) {
           return $sce.trustAsHtml(text);
       };    
   }])

2. 용법:

   <span ng-bind-html="yourDataValue | html"></span>

이제 지시어 ng-bind-html가 trustAsHtml함수의 일부 가 아닌 이유 를 알지 못합니다.

어쨌든-그것이 내가하는 방식입니다-67 %의 시간, 그것은 항상 작동합니다.

물론 사용자 입력을 사용하는 경우 보안 상 위험 할 수있는 간단한 안전하지 않은 HTML 바인딩을 만들 수 있습니다.

App.directive('simpleHtml', function() {
  return function(scope, element, attr) {
    scope.$watch(attr.simpleHtml, function (value) {
      element.html(scope.$eval(attr.simpleHtml));
    })
  };
})

ng-bind-html-unsafe 내부에서 {{}}을 (를) 사용할 필요는 없습니다.

<div ng-bind-html-unsafe="preview_data.preview.embed.html"></div>

예를 들면 다음과 같습니다. http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

{{}} 연산자는 기본적으로 ng-bind의 약자이므로 시도한 내용은 바인딩 내부의 바인딩에 해당하며 작동하지 않습니다.

나는 비슷한 문제를 겪었다. 여전히 github에서 호스팅되는 마크 다운 파일에서 콘텐츠를 가져올 수 없습니다.

app.js의 $ sceDelegateProvider에 화이트리스트 (github 도메인 추가)를 설정 한 후에는 매력처럼 작동했습니다.

설명 : 다른 URL에서 콘텐츠를로드하는 경우 신뢰할 수있는 것으로 래핑하는 대신 화이트리스트를 사용합니다.

문서 : $ sceDelegateProvider 및 ngInclude (외부 HTML 조각 가져 오기, 컴파일 및 포함)

엄격한 문맥 이스케이프 기능을 완전히 비활성화하여을 사용하여 html을 주입 할 수 있습니다 ng-html-bind. 이것은 안전하지 않은 옵션이지만 테스트 할 때 유용합니다.

AngularJS 문서의$sce 예제 :

angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
  // Completely disable SCE.  For demonstration purposes only!
  // Do not use in new projects.
  $sceProvider.enabled(false);
});

위의 구성 섹션을 앱에 첨부하면 html에을 삽입 할 수 ng-html-bind있지만 문서 설명은 다음과 같습니다.

SCE는 적은 코딩 오버 헤드로 많은 보안 이점을 제공합니다. SCE 비활성화 응용 프로그램을 가져 와서 직접 보호하거나 나중에 SCE를 활성화하는 것이 훨씬 어렵습니다. SCE가 도입되기 전에 작성된 기존 코드가 많고 한 번에 모듈을 마이그레이션하는 경우 SCE를 비활성화하는 것이 좋습니다.

이처럼 필터를 사용할 수 있습니다

angular.module('app').filter('trustAs', ['$sce', 
    function($sce) {
        return function (input, type) {
            if (typeof input === "string") {
                return $sce.trustAs(type || 'html', input);
            }
            console.log("trustAs filter. Error. input isn't a string");
            return "";
        };
    }
]);

용법

<div ng-bind-html="myData | trustAs"></div>

다른 리소스 유형, 예를 들어 iframe의 소스 링크 및 여기에 선언 된 다른 유형에 사용될 수 있습니다.