Как исправить ошибку назначения доверенных HTML с Angular [innerHTML] - PullRequest
Новая
       26

Как исправить ошибку назначения доверенных HTML с Angular [innerHTML]

0 голосов
/ 09 июля 2020

(Кажется, моя проблема связана с получением ошибки `Этот документ требует назначения 'TrustedHTML' в chrome, но вместо этого я использую Angular v10)

Описание:

Когда я использую директиву [innerHTML]="myVar" в проекте Angular 10 (или ниже), со строгим CSP require-trusted-types-for 'script'; происходит сбой с сообщением:

Этот документ требует назначения «Доверенный HTML». ERROR TypeError: не удалось установить свойство 'inner HTML' в 'Element': этот документ требует назначения 'Trusted HTML'.

Как воспроизвести:

  • Откройте проект Angular X
  • Используйте директиву [innerHTML]="someVar" в шаблоне
  • Добавьте require-trusted-types-for 'script'; заголовок CSP
  • Проверьте Chrome console;)

То, что я пробовал:

После прочтения некоторых источников о доверенных типах, например:

Я пытался использовать https://github.com/cure53/DOMPurify на моем Angular проект. Просто добавьте пакет, создайте канал Angular и используйте его в шаблоне.

Канал можно создать, используя следующий код: 

import { Pipe, PipeTransform } from '@angular/core';
import * as DOMPurify from 'dompurify';

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
  transform(value: string): TrustedHTML {
    return DOMPurify.sanitize(value, {RETURN_TRUSTED_TYPE: true});
  }
}

И его можно использовать как это: [innerHTML]="myVar | safeHtml"

Конечно, я проверил возврат с помощью console.log, и он дает мне настоящий Trusted HTML объект. В консоли Chrome появлялись новые ошибки, поэтому мне пришлось добавить новый заголовок CSP для авторизации DOMPurify:

require-trusted-types-for 'script';trusted-types dompurify

После этого Chrome был рад увидеть строку DOMPurify

Однако первоначальная ошибка возникает снова!

Я не понимаю, что я пропустил - Chrome жалобы на тип Trusted HTML во внутреннем вызове HTML , поэтому я выполняю преобразование "Надежный HTML". После этого Chrome требует явного разрешения для dompurify, поэтому я делаю это, а после этого Chrome снова жалобы на тип Trusted HTML ...

1 Ответ

0 голосов
/ 09 июля 2020

Способ избежать ошибки:

Добавить CSP require-trusted-types-for 'script';trusted-types default (источник на https://w3c.github.io/webappsec-trusted-types/dist/spec/#default -policy-hdr )

Добавить небольшой фрагмент специфики c для внутреннего метода HTML: 

if (window.trustedTypes && window.trustedTypes.createPolicy) {
  window.trustedTypes.createPolicy('default', {
    createHTML: (string, sink) => string
  });
}

Некоторые советы здесь: https://github.com/angular/angular/pull/32353

...