security - property - Angular 2: la limpieza de HTML eliminó parte del contenido con ID de div. ¿Este es un error o una característica?

domsanitizer ionic 3

Question

Utilizo <div [innerHTML]="body"></div> para pasar HTML no escapado a mi plantilla, y cuando paso a div body con el atributo id , Angular throw:

ADVERTENCIA: la limpieza del HTML eliminó parte del contenido (consulte http://g.co/ng/security#xss ). ADVERTENCIA: la limpieza del HTML eliminó parte del contenido (consulte http://g.co/ng/security#xss ). ADVERTENCIA: la limpieza del HTML eliminó parte del contenido (consulte http://g.co/ng/security#xss ).

Ver. plunker

Entonces, ¿por qué dice esto? ¿Qué puede ser la id peligrosa en div ? ¿Podría este error?

Answer 1

Es porque el atributo id no es seguro.

Esta no es mi respuesta, pero responderá a su pregunta: https://security.stackexchange.com/questions/88973/why-do-id-attributes-need-stricter-validation

Para id y name , estos atributos se usan frecuentemente como puntos de referencia en el DOM.

Si un atacante puede falsificar estos puntos de referencia, es posible que pueda engañar a los scripts existentes para que obtengan y establezcan valores de otros lugares que no estén diseñados, lo que puede ser peligroso dependiendo del contexto que se utilice .

Nota mía: el resto de su publicación habla sobre el atributo de nombre, pero tendrá una idea detrás de todo esto si aún no lo ha hecho por lo que está arriba.

Esto también se aplica a los formularios HTML donde se usa el nombre para identificar el par nombre / valor. Por ejemplo, si un sitio web no codifica un campo de formulario particular cuando se imprime, pero dado que el campo de formulario es generado por el servidor y el formulario está protegido contra CSRF mediante el uso de tokens, no puede ser explotado por medios normales. Sin embargo, un atacante puede atraer a un usuario para que visite una URL con un parámetro que se usa en name , que contiene una carga útil XSS para ejecutar en el envío del formulario.

Por ejemplo, uso normal:

https://example.com/product?item_name=watch&qty=1

lo que hace una forma

<form>

<input type="hidden" name="watch" value="1" />
<input type="hidden" name="shop_name" value="Bob''s Supplies" />
<input type="hidden" name="anti-csrf" value="asdjasodhoai" />

<input type="submit" value="Click here to buy" />

</form>

Y luego obtiene salida como

Thank you for buying from Bob''s Supplies.

Sin embargo, un atacante podría enviar un enlace al usuario así:

https://example.com/product?item_name=shop_name&qty=<script>alert(''xss'')</script>

Como la aplicación está correctamente codificada en HTML en este punto, representa el formulario como

<form>

<input type="hidden" name="shop_name" value="&lt;script&gt;alert(&#039;xss&#039;)&lt;/script&gt;" />
<input type="hidden" name="shop_name" value="Bob''s Supplies" />
<input type="hidden" name="anti-csrf" value="asdjasodhoai" />

<input type="submit" value="Click here to buy" />

</form>

Esto entonces obtiene salida como

Thank you for buying from <script>alert(''xss'')</script>.

ya que esta página no codifica HTML el parámetro nombre de shop_name porque es confiable y el marco de la aplicación siempre toma el primer valor en caso de duplicados. Muy ideado, pero fue lo primero que me cayó en la cabeza para demostrar el punto.

Answer 2

Una solución simple es escribir una tubería como

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer, SafeHtml } from ''@angular/platform-browser'';

@Pipe({
  name: ''sanitizeHtml''
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer:DomSanitizer) {
  }

  transform(v:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }
}

agregar en su archivo html agregar pila como

  <td *ngIf="i>0" [innerHTML]="entry.attributes[i] | sanitizeHtml"></td>