关于Flutter unsafe_html规则移除及IFrameElement安全设src的问询

一、unsafe_html规则被移除的原因与API安全性 #

unsafe_html规则被移除，并非因为这些HTML API被证实绝对安全，而是Dart团队调整了lint规则策略——原规则的判定逻辑过于宽泛，很多合法、无风险的使用场景也被误触发警告，因此被移除。但这不代表直接使用IFrameElement.src这类API就没有安全风险，风险依然存在，需要开发者自行把控。

二、直接设置IFrameElement.src的风险 #

如果src指向的来源不可信（比如用户输入的未验证链接、第三方恶意地址），可能引发以下问题：

• XSS跨站脚本攻击：恶意脚本通过iframe注入并执行，窃取用户数据或篡改页面内容
• 钓鱼欺诈：iframe加载仿冒页面，诱导用户输入敏感信息
• 恶意代码执行：加载包含恶意程序的页面，威胁应用安全

三、安全设置iframe源的方法 #

1. 校验并限制可信来源 #

维护一个可信域名白名单，只允许加载白名单内的地址：

bool isTrustedSource(String source) {
  // 替换为你的可信域名列表
  const trustedDomains = ['your-domain.com', 'verified-partner.com'];
  try {
    final uri = Uri.parse(source);
    return trustedDomains.contains(uri.host);
  } catch (_) {
    // 解析失败的地址直接判定为不可信
    return false;
  }
}

2. 利用sandbox属性限制iframe权限 #

给iframe添加sandbox属性，按需开放必要权限，最小化风险：

// 示例：仅允许同域访问，禁止脚本、表单提交等操作
_iFrameElement.sandbox.addAll(['allow-same-origin']);
// 根据需求添加其他权限，比如需要允许脚本则加'allow-scripts'，但需谨慎

3. 处理不可信来源的兜底方案 #

当源地址不可信时，设置安全的默认值，比如about:blank：

if (isTrustedSource(widget._source)) {
  _iFrameElement.src = widget._source;
} else {
  _iFrameElement.src = 'about:blank';
}

优化后的完整实现示例 #

import 'package:universal_html/html.dart' as html;
...
late final html.IFrameElement _iFrameElement;

void _initIFrame() {
  _iFrameElement = html.IFrameElement();
  
  // 配置sandbox限制权限
  _iFrameElement.sandbox.addAll(['allow-same-origin']);
  
  // 校验并设置源地址
  if (isTrustedSource(widget._source)) {
    _iFrameElement.src = widget._source;
  } else {
    _iFrameElement.src = 'about:blank';
    print('不可信的iframe源地址，已阻止加载');
  }
}

bool isTrustedSource(String source) {
  const trustedDomains = ['your-domain.com', 'verified-partner.com'];
  try {
    final uri = Uri.parse(source);
    return trustedDomains.contains(uri.host);
  } catch (e) {
    return false;
  }
}

内容的提问来源于stack exchange，提问作者anonymous-dev