如何安全正确规避Angular Sanitization并渲染动态HTML样式？

1. 修复iframe动态srcdoc样式失效问题 #

动态绑定srcdoc时，必须传入完整的HTML文档结构，而非孤立的代码片段。用户输入的模板通常只是局部内容（比如仅<div style="color:red">文本</div>），直接绑定会因缺少<html>、<head>、<body>等根节点，导致浏览器无法正确解析样式。

示例处理逻辑：

// 补全用户输入的HTML片段为完整文档
getFullHtmlTemplate(userInput: string): string {
  return `
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <!-- 可按需添加全局基础样式，比如重置默认样式 -->
        <style>
          body { padding: 16px; font-family: sans-serif; }
        </style>
      </head>
      <body>${userInput}</body>
    </html>
  `;
}

模板绑定代码：

<iframe [srcdoc]="getFullHtmlTemplate(components.body.text)"></iframe>

iframe作为独立渲染环境，既能保证样式正常生效，又能隔离用户输入对主页面的影响，安全性远高于直接innerHTML插入。

2. 强化iframe安全限制 #

通过sandbox属性严格限制iframe的权限，进一步降低风险：

<iframe 
  [srcdoc]="getFullHtmlTemplate(components.body.text)"
  sandbox="allow-same-origin"
></iframe>

• 若不需要用户输入的HTML执行脚本，直接使用sandbox=""，禁用所有脚本、表单提交等危险操作；
• 若必须支持脚本，添加allow-scripts，但需谨慎评估风险；
• allow-same-origin仅用于调试场景，若无需与主页面交互可移除。

3. 非iframe场景的安全innerHTML方案（仅作备选） #

如果因业务限制无法使用iframe，可通过以下方式优化innerHTML的安全性与样式生效问题：

• 解决样式不生效：Angular默认的样式封装会给组件样式添加前缀，导致动态HTML无法继承组件样式。可将目标样式放在全局样式文件（如styles.css），或给组件设置ViewEncapsulation.None（注意会导致组件样式全局生效，需避免冲突）。
• 安全过滤HTML：不要直接使用bypassSecurityTrustHtml信任所有用户输入，先通过DOM解析过滤非法标签和属性：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

sanitizeUserHtml(userInput: string): SafeHtml {
  // 自定义允许的标签和属性
  const allowedTags = ['div', 'p', 'span', 'h1', 'h2'];
  const allowedAttrs = ['style', 'class'];
  
  const parser = new DOMParser();
  const doc = parser.parseFromString(userInput, 'text/html');
  const elements = doc.body.querySelectorAll('*');
  
  elements.forEach(el => {
    // 移除非法标签
    if (!allowedTags.includes(el.tagName.toLowerCase())) {
      el.remove();
      return;
    }
    // 移除非法属性
    Array.from(el.attributes).forEach(attr => {
      if (!allowedAttrs.includes(attr.name.toLowerCase())) {
        el.removeAttribute(attr.name);
      }
    });
  });
  
  return this.sanitizer.bypassSecurityTrustHtml(doc.body.innerHTML);
}

模板使用：

<span [innerHTML]="sanitizeUserHtml(my.element.text)"></span>

此方案安全性低于iframe，仅在无法使用iframe时考虑。

内容的提问来源于stack exchange，提问作者PlayHardGoPro