### [HTML 代码安全检查：三层排查顺序](https://www.huociguo.com/article/1541)

**Published:** 2026-09-30T05:29:45

**Author:** 米了

**Excerpt:** 安全检查按源码、结构、渲染三层推进。每层列出检查项、可用的检索命令与修补方向。

HTML 安全检查常见的问题是一上来就扫 XSS，漏掉成本更低、命中率更高的前两层。按源码、结构、渲染三层推进，每层的检索方式与修补位置都不同。

![屏幕上的代码特写，用于说明 HTML 源码的安全排查](https://api.huociguo.com/wp-content/uploads/2026/09/c4.jpg)

先查可见的明文信息，再查结构，最后查渲染行为

## 第一层：源码里的明文

```bash
grep -RInE "(api[_-]?key|secret|token|password)s*[:=]" ./templates
grep -RIn "TODO|内网|192\.168." ./templates
```

-   模板中写死的接口密钥、测试账号、内网地址；
-   注释里的调试开关与临时地址；
-   被一并打包进静态目录的配置文件副本。

这一层的修补位置在构建与部署流程：密钥进环境变量，临时注释在合并前清掉。

## 第二层：结构缺陷

-   非法嵌套：交互元素套交互元素，例如 `a` 里嵌 `button`；
-   表单控件缺少 label 关联，读屏无法获得名称；
-   图片缺 alt，表格缺 th 与 scope；
-   表单缺 CSRF 令牌字段。

结构缺陷不直接产生漏洞，但会连带产生逻辑问题：标签错配会让浏览器改写 DOM 结构，后续的脚本取值与预期不再一致。

## 第三层：渲染行为

```bash
grep -RIn "innerHTML|outerHTML|document.write|onclick=" ./templates
```

-   拼接 HTML 的位置：传入内容是否经过转义；
-   内联事件处理器：`onclick` 里的字符串是否含用户输入；
-   动态插入的 script 与 iframe：来源是否白名单；
-   URL 直接进 href 或 src：是否校验协议，防 javascript: 开头的取值。

## 修补顺序

1.  输出转义优先，富文本走白名单过滤库；
2.  事件绑定改 addEventListener，去掉内联处理器；
3.  外部资源加 integrity 与 crossorigin；
4.  CSP 作为兜底，不替代前面几步。

**Tags:** DOM操作, XSS防护, 代码审计, 信息泄露, 前端安全

**Categories:** HTML5

---