Angular 2: sanitizing HTML разделил некоторый контент с id div - это ошибка или функция?

Я использую <div [innerHTML]="body"></div> для передачи неэкранированного HTML в мой шаблон, и когда я перехожу к body div с атрибутом id, Angular throw:

ПРЕДУПРЕЖДЕНИЕ: дезинформирование HTML разделило некоторый контент (см. http://g.co/ng/security#xss). ПРЕДУПРЕЖДЕНИЕ: дезинформирование HTML разделило содержимое (см. http://g.co/ng/security#xss). ПРЕДУПРЕЖДЕНИЕ: дезинформирование HTML разделило некоторый контент (см. http://g.co/ng/security#xss).

См. plunker

Так почему это так говорит? Что может быть опасно id в div? Может ли эта ошибка?

ОТВЕТЫ

Ответ 1

Это потому, что атрибут id небезопасен.

Это не мой ответ, но он ответит на ваш вопрос: https://security.stackexchange.com/questions/88973/why-do-id-attributes-need-stricter-validation

Для id и name эти атрибуты часто используются в качестве опорных точек в DOM.

Если злоумышленник может обманывать эти контрольные точки, она может обмануть существующие сценарии в получении и настройке значений из других мест, кроме тех, которые были разработаны, что может быть опасно в зависимости от используемого контекста.

Отметьте меня: остальная часть его сообщения говорит об атрибуте имени, но вы получите идею за всем этим, если вы еще не на что выше

Это также относится к форматам HTML, где name используется для идентификации пары имя/значение. Например, если веб-сайт не кодирует конкретное поле формы при его выводе, но так как поле формы генерируется сервером и форма защищена от CSRF с помощью токенов, он не может быть использован обычными средствами. Однако злоумышленник может заставить пользователя посетить URL-адрес с параметром, который используется в name, содержащий полезную нагрузку XSS для выполнения при отправке формы.

например. Обычное использование:

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

который отображает форму

<form>

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

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

</form>

И затем выводится как

Thank you for buying from Bob Supplies.

Однако злоумышленник может отправить ссылку пользователю так:

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

Поскольку приложение правильно кодирует HTML в этот момент, оно отображает форму как

<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 Supplies" />
<input type="hidden" name="anti-csrf" value="asdjasodhoai" />

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

</form>

Затем он выводится как

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

так как на этой странице HTML не кодирует параметр shop_name, потому что он является доверенным, и среда приложения всегда принимает первое значение в случае дубликатов. Очень надуманный, но это было первое, что попало мне в голову, чтобы продемонстрировать смысл.

Ответ 2

Простое решение состоит в том, чтобы написать такой канал, как

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

добавить в свой html файл добавить кучу, например

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

Ответ 3

Вы также можете использовать библиотеку NgDompurify. Он может лучше дезинфицировать ваш контент благодаря DomPurify и решает все ваши проблемы с угловым дезинфицирующим средством по умолчанию.