Flutter for OpenHarmony: Flutter 三方库 sanitize_html 彻底杜绝 XSS 注入风险(鸿蒙 Web 内容安全净化)

Flutter for OpenHarmony: Flutter 三方库 sanitize_html 彻底杜绝 XSS 注入风险(鸿蒙 Web 内容安全净化)

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net

请添加图片描述

前言

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

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

一、核心防御机制解析

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

剥离 script 标签

移除危险属性

不安全的 HTML (含 script, onclick)

sanitize_html 净化器

安全的 HTML 纯净版

鸿蒙 WebView / HTML Widget

二、核心 API 实战

2.1 简单字符串净化

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

import'package:sanitize_html/sanitize_html.dart';voidbasicUsage(){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';classOhosSecurityModule{/// 对用户提交的 HTML 内容进行深度安全审计StringprocessUserContent(String rawInput){// 💡 核心 API:净化内容并为外部链接添加 nofollowfinal sanitized =sanitizeHtml( rawInput, addLinkRelNextToNoFollow:true,);return sanitized;}}voidmain(){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">}
在这里插入图片描述

五、总结

sanitize_html 软件包是每个处理 Web 内容的 OpenHarmony 开发者必须随身携带的“杀毒软件”。在互联网环境日益复杂的今天,即使是简单的文本显示也可能暗藏杀机。通过在数据入口处强行引入这层净化过滤,你能以极低的开发成本,极大地提升鸿蒙应用的整体安全防御水平。

Read more

100天精通Python(爬虫篇)——第122天:基于selenium接管已启动的浏览器(反反爬策略)

100天精通Python(爬虫篇)——第122天:基于selenium接管已启动的浏览器(反反爬策略)

文章目录 * 1、问题描述 * 2、问题推测 * 3、解决方法 * 3.1 selenium自动启动浏览器 * 3.2 selenium接管已启动的浏览器 * 3.3 区别总结 * 4、代码实战 * 4.1 手动方法(手动打开浏览器输入账号密码) * 4.2 自动方法(.bat文件启动的浏览器) 1、问题描述 使用selenium自动化测试爬取pdd的时候,通过携带cookie登录或者控制selenium输入账号密码登录,都出现了:错误代码10001:请求异常请升级客户端后重新尝试 2、问题推测 这个错误的产生是由于pdd可以检测selenium自动化测试的脚本,因此可以阻止selenium的继续访问。现在大厂网站基本上都能检测到selenium脚本了。 3、解决方法 直接用selenium启动浏览器会被检测到,博主测试用selenium接管已经启动的浏览器就不会(原因:接管已经启动的浏览器所携带的浏览器指纹 ≈ 正常访问的浏览器指纹) 使用selenium自动启动浏览器和接管已启动的浏览器,在浏览器指纹方面存

By Ne0inhk
大学生期末项目-springboot+vue+mysql-实现学生信息管理系统_学生教学管理系统【原创】

大学生期末项目-springboot+vue+mysql-实现学生信息管理系统_学生教学管理系统【原创】

目录 一.登录界面 二.登录后欢迎界面  三.  学生管理界面  四. 教师管理界面 五. 数据统计图界面 六.管理员个人信息界面 七. 贴部分代码【不用看】 八. 总结【不用看】  一.登录界面 【背景图可以自己更改,运行视频中有讲解】   项目视频: 学生管理系统演示 二.登录后欢迎界面  这里用到了echarts,如果不知道是什么,老师问你怎么做的,你就说用echarts做的,或者说AI生成的死数据也可以。    三.  学生管理界面 功能基本完善,老师会觉得你vue学的很好,因为这里灵活运用了很基础的语法,麻雀虽小,五章俱全,嘿嘿。   四. 教师管理界面 这里我已经是最简单的版本给你们了,修改那边本来很复杂的,用到了阿里云OSS,但是这边源代码去掉了,让你们配置更加的简单。  五. 数据统计图界面 这里用到了echarts

By Ne0inhk
MySQL必备基础

MySQL必备基础

MySQL必备基础 * DML-插入 * DML-更新和删除 * DQL-基础查询 * DQL-条件查询 * DQL-聚合函数 * DQL-分组查询 * DQL-排序查询 * DQL-分页查询 * DQL-案例联系 * DQL-执行顺序 * DQL-小结 * DCL-用户管理 * DCL-权限控制 * DCL-小结 * 函数-字符串函数 * 函数-数据函数 * 函数-日期函数 * 函数-流程函数 * 约束-概述 * 约束-外键约束 * 约束-小结 * 多表关系介绍 * 多表查询概述 * 内连接 * 外连接 * 自连接 * 联合查询 union * 子查询 * 标量子查询 * 列子查询 * 行子查询 * 表子查询 * 事务简介 * 事务演示 * ACID四大特性 * 并发事务问题 * 隔离级别

By Ne0inhk