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

从零开始:在本地搭建一个带知识库的 AI 助手(Ollama + Open WebUI)

从零开始:在本地搭建一个带知识库的 AI 助手(Ollama + Open WebUI)

一文讲清楚:要选哪些工具、需要什么环境、整体架构长什么样,以及一步步实现到能用的程度。 一、为什么要在本地搭一个 AI 助手? 过去一年,大模型从“新奇玩意儿”迅速变成“日常生产力工具”。但如果你只用网页版 ChatGPT / 文心一言 / 通义千问,会碰到几个很现实的问题: * 数据隐私:公司内部文档、个人笔记、聊天记录,你敢全部塞到线上吗? * 网络依赖:在飞机上、高铁里,或者公司内网严格管控时,在线 AI 直接“失联”。 * 额度与费用:免费额度有限,稍微重度一点就要付费,而且你也不知道自己的数据会不会被拿去训练。 本地部署一套 “AI + 知识库” 的好处就非常直观: 1. 数据完全不出本地,满足隐私合规要求。 2. 断网也能用,随时随地调取你的“第二大脑”。 3. 可定制:可以给团队搭一个“

By Ne0inhk

前端保持和服务器时间同步的方法【使用vue3举例】

你只管努力!剩下的交给时间! 目录 * 引言: * 方法一: 轮询(定时请求服务器时间) * 优点: * 缺点: * 方法二:使用WebSocket * 优点: * 缺点: * 方法三:时间戳校正 * 优点: * 缺点: * 方法四: 使用NTP(网络时间协议) * 优点: * 缺点: * 方法五:使用SSE(Server-Sent Events) * 优点: * 缺点: * 总结: 引言: 保持前端与服务器时间同步是一个常见的需求,特别是在需要确保时间一致性的应用中,比如在线投票、实时聊天或游戏等。以下是一些方法来实现这一目标: 方法一: 轮询(定时请求服务器时间) 可以定时向服务器发送请求获取当前时间,以此来更新前端的时间显示。 <template><div><h1>当前时间:

By Ne0inhk
前端异常捕获与统一格式化:从 console.log(error) 到服务端上报

前端异常捕获与统一格式化:从 console.log(error) 到服务端上报

🧑 博主简介:ZEEKLOG博客专家,「历代文学网」(公益文学网,PC端可以访问:https://lidaiwenxue.com/#/?__c=1000,移动端可关注公众号 “ 心海云图 ” 微信小程序搜索“历代文学”)总架构师,首席架构师,也是联合创始人!16年工作经验,精通Java编程,高并发设计,分布式系统架构设计,Springboot和微服务,熟悉Linux,ESXI虚拟化以及云原生Docker和K8s,热衷于探索科技的边界,并将理论知识转化为实际应用。保持对新技术的好奇心,乐于分享所学,希望通过我的实践经历和见解,启发他人的创新思维。在这里,我希望能与志同道合的朋友交流探讨,共同进步,一起在技术的世界里不断学习成长。 🤝商务合作:请搜索或扫码关注微信公众号 “ 心海云图 ” 前端异常捕获与统一格式化:从 console.log(error) 到服务端上报 引言 在前端开发中,异常监控是保证应用稳定性的重要一环。当用户遇到页面白屏、功能不可用等问题时,如果能及时收集到详细的错误信息(包括堆栈、

By Ne0inhk
【AI深究】逻辑回归(Logistic Regression)全网最详细全流程详解与案例(附大量Python代码演示)| 数学原理、案例流程、代码演示及结果解读 | 决策边界、正则化、优缺点及工程建议

【AI深究】逻辑回归(Logistic Regression)全网最详细全流程详解与案例(附大量Python代码演示)| 数学原理、案例流程、代码演示及结果解读 | 决策边界、正则化、优缺点及工程建议

大家好,我是爱酱。本篇将系统讲解——逻辑回归(Logistic Regression)的原理、公式、案例流程、代码实现和工程建议。内容详细分步,便于新手和进阶读者理解和实操。 注:本文章含大量数学算式、详细例子说明及大量代码演示,大量干货,建议先收藏再慢慢观看理解。新频道发展不易,你们的每个赞、收藏跟转发都是我继续分享的动力! 注:本文章颇长近5000字、以及大量Python代码、非常耗时制作,建议先收藏再慢慢观看。新频道发展不易,你们的每个赞、收藏跟转发都是我继续分享的动力! 一、逻辑回归简介 逻辑回归是一种经典的线性分类算法,本质上是用Sigmoid函数将线性回归的输出“压缩”到0~1之间,输出为概率,常用于二分类任务。 与KNN(K-近邻算法)不同,逻辑回归是判别式模型,直接建模输入特征与类别之间的概率关系,适合特征和类别呈线性可分或近似线性关系的数据。 注:爱酱也有文章介绍了分类以及其他五大任务的技巧,有兴趣的也可以参考一下哦~ 分类任务文章传送门: 【算法解析1/5】分类任务深度拆解:

By Ne0inhk