Обход безопасности импорта HTML

Я импортирую фрагмент HTML от третьего лица и встраиваю его в некоторые заполнитель вне моего приложения Angular 7. Внутри фрагмента есть одна ссылка, начинающаяся с javascript:, которая будет иметь префикс unsafe: от Angular, что нарушает его функциональность.

DOMSanitizer в Angular, по-видимому, только обеспечивает способ обхода безопасности для строк HTML. Однако в приведенном ниже методе я просто читаю узел DOM и добавляю его в другое место назначения. Поэтому мне нужно было бы иметь решение для узла DOM.

Согласно моим исследованиям, вставленные узлы в порядке сразу после вызова appendChild, но через несколько мс после этого Angular добавляет unsafe:.

Как я могу обойти защиту для узлов DOM?

 private insertPart(componentImportLinkId: string, targetSelector: string): void {
    try {
      const linkElement: any = document.getElementById(componentImportLinkId);
      const componentContent = linkElement.import;
      const componentTemplate = componentContent.querySelector('template');
      const importedComponentTemplateClone = document.importNode(componentTemplate.content, true);
      const appendToElement = document.querySelector(targetSelector);
      appendToElement.appendChild(importedComponentTemplateClone);
    } catch (e) {
      console.error(`PortalLayoutComponent.insertPart: Can not insert '${targetSelector}'`, e);
    }
  }

person dude    schedule 17.12.2018    source источник
comment
Просто случайное предположение: ссылка на DOMSanitizer, которую вы предоставили, также ведет на bypassSecurityTrustScript(). ты попробуешь это? Тем не менее, независимо от того, работает это или нет, вы должны быть на 200% уверены, что данные, которые вы импортируете от этой третьей стороны, безопасны.   -  person HamZa    schedule 18.12.2018
comment
@HamZa bypassSecurityTrustScript также ожидает строку в качестве значения параметра, но у меня есть только узел DOM. Я на 200% уверен, что HTML безопасен, он исходит напрямую с портала заказчика :-)   -  person dude    schedule 18.12.2018
comment
Согласно MDN, импорт HTML устарел. Статья, на которую вы ссылаетесь, предлагает использовать их в 2013 году (на момент написания этой статьи 5 лет). Если вы не можете преобразовать в стандартный тег HTML, возможно, вам следует использовать iframe и bypassSecurityTrustResourceUrl. Прочтите документы Angular о доверии безопасным значениям.   -  person Old Pro    schedule 21.12.2018
comment
Не могли бы вы предоставить демонстрацию stackblitz того, что именно вы пытаетесь выполнить?   -  person Black Mamba    schedule 27.12.2018


Ответы (1)


Вы можете получить строковое значение вашего DOM-узла, вызвав externalHTML() на componentTemplate

person Daniel    schedule 11.03.2019