讲师中心 微信公众号
AI工具推荐 视频效率加速

结合全局安全策略的前端HTML代码质量防御性整改

落枫君_7668

落枫君_7668

发布时间:2026-08-10 06:38:58

|

620人浏览过

|

来源于php中文网

原创

真正有效的XSS整改必须拆解到输入、解析、输出三环节并强制模块级校验;escapeHtml仅局部生效,自定义插件、v-pre区域、Markdown片段易绕过;需属性级控制(禁on*事件、限href/src协议、过滤危险CSS);输出须按上下文编码(HTML/JS/URL/JSON不同策略);动态HTML必须用DOMParser校验并封装纯函数。

结合全局安全策略的前端html代码质量防御性整改

直接在 HTML 中写死安全策略或只靠单点转义,90% 的 XSS 仍会漏过;真正有效的整改必须把策略拆解到输入、解析、输出三个环节,并强制模块级校验。

escapeHtml 调用是否覆盖所有渲染路径

docsify 的 escapeHtml 确实能转义 、<code>>、"、'、&,但它只在特定位置生效:比如 src/core/render/utils.js 中的文本节点处理,或 media.js 里对 iframe src 的赋值:html:`<iframe src="%24%7BescapeHtml(url)%7D"></iframe>`。

常见错误现象:

  • 开发者自定义插件中直接拼接 HTML 字符串,绕过了 core 渲染流程,escapeHtml 完全不生效
  • v-pre 或 data-ignore 标记区域被跳过解析,用户输入原样插入 DOM
  • Markdown 解析后生成的 HTML 片段(如表格、代码块)若未走统一净化通道,可能含未转义属性

HTML 标签白名单是否严格限制危险属性

仅过滤标签(如禁止 <script></script>)远远不够。攻击者更常利用 <img src="https://img.php.cn/" alt="结合全局安全策略的前端HTML代码质量防御性整改"> 这类“合法”标签 + 危险事件属性的方式触发 XSS。

立即学习“前端免费学习笔记(深入)”;

审查重点应落在属性级控制:

HTML Extract
HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容,将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载
  • 是否禁用全部事件处理器:onerror、onclick、onload、onmouseover 等以 on 开头的属性必须被剥离
  • 是否限制 href 和 src 的协议白名单?仅允许 http://、https://、data:image/,拒绝 javascript:、vbscript:、data:text/html
  • style 属性是否受限?expression()、url(javascript:) 等 CSS 注入手法需被识别并清除

输出上下文决定编码方式,不能统一用 HTML 实体转义

同一个用户输入,在不同位置需要不同处理:插入到 HTML 文本节点、作为属性值、嵌入到 JavaScript 字符串、写入 URL 参数,安全要求完全不同。

典型误用:

  • 把所有输出都套用 escapeHtml(),但当用户输入被插进 <script>var name = "${name}";</script> 时,仅 HTML 转义无法阻止闭合引号后执行任意 JS
  • 在 URL query 中直接拼接未编码的用户输入,导致 location.href = '/search?q=' + userInput 被注入 q=xxx%22%3E%3Cscript%3E
  • JSON 输出未使用 JSON.stringify() 而是手动拼字符串,遗漏对 \u2028、\u2029 的处理,引发 JS 解析中断或注入

模块加载阶段是否强制 DOMParser 校验动态 HTML

直接在 innerHTML 中插入未经校验的动态 HTML,是前端最危险的代码缺陷——它不报错、不中断执行,却可能让整个页面结构崩坏、脚本失效、甚至引入 XSS。

关键实操建议:

  • 所有负责渲染的模块(如 renderer.js)应在顶层 import 后立即定义校验函数,不依赖外部状态
  • 校验必须使用 DOMParser().parseFromString(htmlStr, 'text/html'),而非正则或字符串判断——只有解析器能真实模拟浏览器行为
  • 若 doc.body.children.length === 0 && htmlStr.trim()非空,说明 HTML 结构严重损坏,应直接 throw 错误,阻断后续执行
  • 服务端返回的 HTML 片段(如 <p>Hello</p> <div class="meta"></div>)必须强制包裹一层根节点,否则 DOMParser 会丢弃无父级的并列节点

最容易被忽略的一点:校验逻辑必须封装在 ES 模块中导出纯函数(如 safeHtmlParse),禁止跨模块隐式传递 HTML 字符串——一旦形成 A.generateCardHtml() → B.innerHTML = ... 这种契约,错误堆栈永远指向调用方,而问题根源藏在加载链路深处。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2103

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

4503

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

5650

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5098

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

723

2024.05.22

html版权符号
html版权符号

html版权符号是“©”,可以在html源文件中直接输入或者从word中复制粘贴过来,php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

5075

2023.06.14

html在线编辑器
html在线编辑器

html在线编辑器是用于在线编辑的工具,编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方,是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容,供大家免费下载使用。

2952

2023.06.21

html网页制作
html网页制作

html网页制作是指使用超文本标记语言来设计和创建网页的过程,html是一种标记语言,它使用标记来描述文档结构和语义,并定义了网页中的各种元素和内容的呈现方式。本专题为大家提供html网页制作的相关的文章、下载、课程内容,供大家免费下载体验。

2610

2023.07.31

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

60

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
GDB 17.2 官方文档集合
GDB 17.2 官方文档集合

共0课时 | 0人学习

Bootstrap 入门安装配置
Bootstrap 入门安装配置

共0课时 | 0人学习

38+ PhpStorm 提示和技巧
38+ PhpStorm 提示和技巧

共1课时 | 209人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn