绕过 HTML 导入的安全性

Posted 2023-02-19

【中文标题】绕过 HTML 导入的安全性

【英文标题】：Bypass security of HTML import

【发布时间】：2019-05-18 03:07:00

【问题描述】：

我正在从第三方导入 html snippet 并将其嵌入到我的 Angular 7 应用程序之外的某个占位符中。 sn-p 中有一个以 javascript: 开头的链接，Angular 会以 unsafe: 为前缀，这会破坏其功能。

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

【问题讨论】：

只是一个随机猜测，您提供的 DOMSanitizer 链接也链接到bypassSecurityTrustScript()，您尝试过吗？也就是说，无论这是否有效，您都必须 200% 确定您从该第 3 方导入的数据是“安全的”。

@HamZa bypassSecurityTrustScript 也需要一个字符串作为参数值，但我只有一个 DOM 节点。我 200% 确定 HTML 是“安全的”，它直接来自客户的门户 :-)

根据MDN，HTML 导入已过时。您链接到建议使用它们的文章来自 2013 年（撰写本文时已有 5 年历史）。如果您无法转换为标准 HTML 标记，那么您可能应该使用 iframe 和 bypassSecurityTrustResourceUrl。阅读有关 trusting safe values 的 Angular 文档。

您能否提供一个 stackblitz 演示，说明您正在尝试完成什么

【参考方案1】：

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