绕过HTML导入的安全性

Question

我正在从第三方导入HTML片段并将其嵌入到我的Angular 7应用程序之外的某个占位符中.有一个链接从javascript:片段内部开始,unsafe:将由Angular 作为前缀,这会破坏其功能.

Angular 的DOMSanitizer似乎只提供绕过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);
    }
  }

Answer 1

您可以通过在 componentTemplate 上调用 externalHTML() 来获取 DOM 节点的字符串值