escape - ng-bind-html angularjs

Con ng-bind-html-unsafe eliminado, ¿cómo inyecto HTML?

Question

Estoy tratando de usar el proveedor $sanitize y la directiva ng-bind-htm-unsafe para permitir que mi controlador inyecte HTML en un DIV.

Sin embargo, no puedo hacerlo funcionar.

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

Descubrí que es porque se eliminó de AngularJS (gracias).

Pero sin ng-bind-html-unsafe , recibo este error:

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

Answer 1

1. Debe asegurarse de que sanitize.js está cargado. Por ejemplo, cárguelo desde https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION]/angular-sanitize.min.js
2. debe incluir el módulo ngSanitize en su app por ejemplo: var app = angular.module(''myApp'', [''ngSanitize'']);
3. solo necesita enlazar con ng-bind-html el contenido html original. No necesitas hacer nada más en tu controlador. El análisis y la conversión se realizan automáticamente mediante la directiva ngBindHtml . (Lea la sección How does it work en esto: $sce ). Entonces, en su caso, <div ng-bind-html="preview_data.preview.embed.html"></div> haría el trabajo.

Answer 2

El escape contextual estricto se puede desactivar por completo, lo que le permite inyectar html utilizando ng-html-bind . Esta es una opción insegura, pero útil cuando se realiza la prueba.

Ejemplo de la documentación de AngularJS en $sce :

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

Adjuntar la sección de configuración anterior a su aplicación le permitirá inyectar html en ng-html-bind , pero como remarca el documento:

SCE le ofrece muchos beneficios de seguridad para una pequeña sobrecarga de codificación. Será mucho más difícil tomar una aplicación deshabilitada para SCE y asegurarla por su cuenta o habilitar SCE en una etapa posterior. Podría tener sentido deshabilitar SCE para los casos en los que tenga una gran cantidad de código existente que se escribió antes de la introducción de SCE y que esté migrando un módulo a la vez.

Answer 3

En lugar de declarar una función en su alcance, como lo sugiere Alex, puede convertirla en un filtro simple:

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

Entonces puedes usarlo así:

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

Y aquí hay un ejemplo de trabajo: http://jsfiddle.net/leeroy/6j4Lg/1/

Answer 4

He tenido un problema similar. Aún no podía obtener contenido de mis archivos de markdown alojados en github.

Después de configurar una lista blanca (con el dominio github agregado) para el $ sceDelegateProvider en app.js, funcionó como un encanto.

Descripción: usar una lista blanca en lugar de envolver como confiable si carga contenido desde una URL diferente.

Docs: $sceDelegateProvider y ngInclude (para obtener, compilar e incluir un fragmento HTML externo)

Answer 5

Indicó que está utilizando Angular 1.2.0 ... como uno de los otros comentarios indicados, ng-bind-html-unsafe ha quedado en desuso.

En su lugar, querrás hacer algo como esto:

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

En su controlador, inyecte el servicio $sce y marque el HTML como "de confianza":

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

Tenga en cuenta que querrá usar 1.2.0-rc3 o más reciente. (Arreglaron un error en rc3 que impedía que los "observadores" funcionaran correctamente en HTML de confianza).

Answer 6

La mejor solución para esto en mi opinión es esta:

1. Cree un filtro personalizado que puede estar en un archivo common.module.js, por ejemplo, utilizado en su aplicación:

   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. Uso:

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

Ahora, no veo por qué la directiva ng-bind-html no trustAsHtml en trustAsHtml como parte de su función, me parece un poco tonto que no lo haga.

De todos modos, así es como lo hago, el 67% del tiempo, siempre funciona.

Answer 7

No necesita utilizar {{}} dentro de ng-bind-html-unsafe:

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

Aquí hay un ejemplo: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

El operador {{}} es esencialmente una abreviatura de ng-bind, por lo que lo que intentaste equivale a un enlace dentro de un enlace, lo que no funciona.

Answer 8

Para mí, la solución más simple y flexible es:

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

Y añada la función a su controlador:

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

No olvide agregar $sce a la inicialización de su controlador.

Answer 9

Puede crear su propio enlace html inseguro simple, por supuesto, si utiliza la información del usuario, podría ser un riesgo para la seguridad.

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

Answer 10

Puedes usar un filtro como este

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 "";
};
}
]);

uso

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

se puede usar para otros tipos de recursos, por ejemplo, enlace de origen para iframes y otros tipos declarados here