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

Question

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

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

See. plunker

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

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

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

</form> 

А затем получает выход в

Thank you for buying from Bob's 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's 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, поскольку он является доверенным и фреймворк всегда берет первое значение в случае дубликатов. Очень надуманный, но это было первое, что упало мне в голову, чтобы продемонстрировать суть.

Answer 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>