Flutter 使用 sanitize_html 库防范 OpenHarmony XSS 注入风险

前言

在开发 OpenHarmony 应用时，如果我们需要在 UI 中渲染来自后端的 HTML 内容（例如文章正文、用户评论），或者使用 flutter_html 等库，一个致命的安全风险就是 XSS (跨站脚本攻击)。恶意代码可能会通过 <script> 标签或 onerror 属性在你的 App 内执行非法逻辑。

sanitize_html 是一个轻量级且极高效的 HTML 净化库。它采用白名单机制，能瞬间过滤掉所有不安全的标签和属性，确保你在鸿蒙 App 内渲染的每一行 Web 内容都是绝对安全的。

一、核心防御机制解析

sanitize_html 遵循'默认拒绝'原则，只允许通过安全的 HTML 子集。

• 剥离 script 标签
• 移除危险属性

示例流程：

1. 不安全的 HTML (含 script, onclick)
2. sanitize_html 净化器
3. 安全的 HTML 纯净版
4. 鸿蒙 WebView / HTML Widget

二、核心 API 实战

2.1 简单字符串净化

最基础的场景：防止用户在输入框中注入 <script> 或恶意事件。

import 'package:sanitize_html/sanitize_html.dart';

void basicUsage() {
  final dirtyHtml = '<p>你好</p><script>alert("攻击!");</script><div onmouseover="doEvil()">查看</div>';
  // 💡 执行净化：剥离 script 和事件属性 (如 onmouseover)
  final cleanHtml = sanitizeHtml(dirtyHtml);
  print(cleanHtml); // 输出结果：<p>你好</p><div>查看</div>
}

2.2 保留特定样式的净化

库会根据白名单过滤 CSS 属性，防止诸如 position: fixed 这种破坏布局的注入。

final html = '<span>警告</span>';
// 💡 输出：<span>警告</span>
// position 被过滤，因为它是潜在的危险样式
print(sanitizeHtml(html));

2.3 处理损坏的 HTML 标签

如果输入的 HTML 标签没有正常闭合，sanitize_html 会通过解析器尝试将其补全。

final broken = '<div>未闭合的标签';
// 💡 输出：<div>未闭合的标签</div>
print(sanitizeHtml(broken));

三、OpenHarmony 平台适配

3.1 混合开发安全

💡 技巧：在鸿蒙的 Web 组件中加载第三方内容前，先在 Dart 层使用 sanitize_html 进行预处理，能有效防止针对原生桥接接口的注入攻击。由于该库不涉及 DOM 操作，其执行速度极快，不会造成页面加载阻塞。

3.2 零依赖优势

它是纯 Dart 编写，不依赖任何平台的原生 Webview 引擎，因此在鸿蒙、Android、iOS 等所有 Flutter 运行环境下的表现是 100% 一致且可预测的。

四、完整实战示例：鸿蒙安全评论显示器

本示例展示在实际项目中如何封装一个安全审查模块，并利用白名单机制主动防御。

import 'package:sanitize_html/sanitize_html.dart';

class OhosSecurityModule {
  /// 对用户提交的 HTML 内容进行深度安全审计
  String processUserContent(String rawInput) {
    // 💡 核心 API：净化内容并为外部链接添加 nofollow
    final sanitized = sanitizeHtml(
      rawInput,
      addLinkRelNextToNoFollow: true,
    );
    return sanitized;
  }
}

void main() {
  final auditor = OhosSecurityModule();
  final evilInput = '<h4>置顶新闻</h4><img src="x" onerror="stealData()">';
  final result = auditor.processUserContent(evilInput);
  print('--- 审计通过的安全内容 ---');
  print(result); // <h4>置顶新闻</h4><img src="x">
}