with - renderizar html angularjs

Escape de texto HTML en una directiva AngularJS

Question

¿Hay un comando JS angular que haga que HTML se escape en el texto? Estoy procesando una directiva personalizada y tengo que escapar de algunos de los resultados que genera.

Internamente, el sanitzer AngularJS utiliza una función encodeEntities, pero no la expone. Sé que podría duplicar la función, pero parece que debería haber una forma estándar de hacer esto.

Caso de uso : tengo una directiva personalizada que hace la localización del idioma. Esta directiva utiliza una búsqueda de clave de un archivo de datos para encontrar el texto de idioma. En algunos casos, este texto puede contener HTML y / o la directiva produce HTML para mejorar el formato visual resultante. Además, esta directiva toma las expresiones angulares como parámetros y las usa como sustitutos de tokens en las cadenas. Necesito codificar estos parámetros ya que pueden no ser seguros para HTML.

La directiva se llama como un atributo, por ejemplo i18n-html=''welcome_text_html,1+1,user.name'' . La directiva luego formatea la cadena como se describe y usa element.html para actualizar el nodo DOM.

Answer 1

Esta respuesta es sobre escapar , no desinfectar HTML. Hay dos enfoques:

1. Como lo menciona @maniekq, si puede trabajar en el DOM, haga lo siguiente:

   element.text( scope.myValue );

2. A partir de esta respuesta , puede usar este código de mustache.js y, por ejemplo, crear un filtro angular:

   angular.module(''myModule'').filter(''escapeHtml'', function () {
   
       var entityMap = {
           "&": "&",
           "<": "&lt;",
           ">": "&gt;",
           ''"'': ''&quot;'',
           "''": ''&#39;'',
           "/": ''&#x2F;''
       };
   
       return function(str) {
           return String(str).replace(/[&<>"''//]/g, function (s) {
               return entityMap[s];
           });
       }
   });

Answer 2

Esta respuesta se deriva de @ mb21 ''s. Lo único que se cambia es utilizar $sce . Por lo tanto, puede usar este filtro en ng-bind-html , sin disparar Error: $sce:unsafe .

angular
  .module(''yourModule'', [
    ''ngSanitize''
  ])
  .filter(''escapeHtml'', function ($sce) {
    // Modified by Rockallite: Add $sce.trustAsHtml() to mute "Error: $sce:unsafe"
    // http://.com/a/32835368/2293304
    // http://.com/a/28537958/2293304
    // https://github.com/janl/mustache.js/blob/master/mustache.js#L82
    var entityMap = {
        "&": "&",
        "<": "&lt;",
        ">": "&gt;",
        ''"'': ''&quot;'',
        "''": ''&#39;'',
        "/": ''&#x2F;''
    };

    return function(str) {
      return $sce.trustAsHtml(String(str).replace(/[&<>"''//]/g, function (s) {
          return entityMap[s];
      }));
    }
  });

Answer 3

Hay dos formas de realizar el saneamiento de HTML en AngularJS. La primera es mediante el uso de la directiva ngBindHtml y la segunda mediante el servicio $ sanitize.

function MyCtrl ( $scope, $sanitize ) {
  $scope.rawHtml = "<div><script></script></div>";
  $scope.sanitizedHmtl = $sanitize( $scope.rawHtml );
}

Entonces estos dos son funcionalmente equivalentes:

<div ng-bind-html="rawHtml"></div>
<div ng-bind-html-unsafe="sanitizedHtml"></div>

Si se usa en una directiva, como en su pregunta, simplemente puede insertar el HTML desinfectado:

element.html( scope.sanitizedHtml );

Pero en la mayoría de los casos al escribir directivas, tendría esto en una plantilla y usaría ngBindHtml, como se muestra arriba. Pero funciona para los casos de esquina.

Answer 4

Hay dos problemas separados con el escape de HTML. El primer problema es que las entidades deben codificarse, y el segundo es que el resultado debe ser confiable para que los datos se puedan usar como enlaces HTML. Agregar el siguiente código a su (s) controlador (es) proporciona una solución para ambos problemas usando el servicio $ sce.

Solución de CoffeeScript:

MyApp.controller(''MyController'', [''$scope'',''$sce'',($scope,$sce) ->

  ###
  ...
  ###

  $scope.html5Entities = (value) ->
    value.replace(/[/u00A0-/u9999<>/&/'/"]/gim, (i) ->
      ''&#'' + i.charCodeAt(0) + '';''
    )

  $scope.trustAsHtml = (value) ->
    $sce.trustAsHtml(value)

  ###
  ...
  ###

])    

Solución Javascript:

MyApp.controller(''MyController'', [''$scope'',''$sce'', function($scope,$sce) {

  /* ... */

  $scope.html5Entities = function(value) {
    return value.replace(/[/u00A0-/u9999<>/&/'/"]/gim, function(i) {
          return ''&#'' + i.charCodeAt(0) + '';''
        })
  };

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

  /* ... */

}]);

La primera función html5Entities realiza la codificación de la entidad real, mientras que la segunda función trustAsHtml marca una cadena como segura para usar en Angular para enlaces HTML. Ambas versiones requieren que el servicio $ sce esté incluido en su controlador.

Ejemplo de uso:

<div ng-bind-html="trustAsHtml((html5Entities(product.title) | highlight: $select.search))"></div>

Ver temas relacionados:

• Codificar entidades html en javascript

• AngularJS: Insertar HTML en la vista

Answer 5

La desinfección es una cosa, pero para mostrar todos los caracteres y no "ejecutar" el código HTML, he utilizado la función "texto" para establecer el valor.

En su directiva, para establecer el valor, en lugar de escribir:

element.html( scope.myValue );

escribir:

element.text( scope.myValue );

Answer 6

No es la solución directa, pero si te sumerges en un código de desinfección angular, podrías encontrar las encodeEntities funciones. Es bonito pero privado. Buscando usos del mismo, iría a htmlSanitizeWriter , y luego a sanitizeText . Sigue siendo privado pero se usa en linky filtro linky .

O bien puede usar linky explícitamente y esperar que no se encuentren enlaces, o reimplementar sanitizeText o encodeEntities sus servicios.

Answer 7

Puede usar la función encodeEntities () en ngSanitize para escapar & <> etc.

Answer 8

Puedes implementar el filtro así:

app.filter(''escape'', escape);

 function escape() {
    return function (html) {
      return angular.element(''<pre/>'').text(html).html();
    };
  }