HTML模板校验失败却能正常渲染，是因为浏览器容错机制会自动修复非法结构，但校验器严格按规范执行；缺DOCTYPE、UTF-8 BOM、p内嵌div等非法嵌套均被浏览器静默修正，导致实际DOM与源码不一致。
HTML模板校验失败却能正常渲染，问题出在哪
浏览器容错机制会自动修复非法结构，但校验器严格按规范执行。你看到的“页面正常”，不代表 HTML 合法——document.body为 null、document.querySelector('header') 返回 null、或 Elements 面板里 <head> 被折叠为空，往往就是开头缺 <!DOCTYPE html> 或带 BOM/空行。
常见踩坑点：
- 构建工具（如 Vite）在
index.html开头注入了注释：<!-- built at 2026-06-30 -->→ 校验器直接报错“missing DOCTYPE” - Windows 记事本保存为 UTF-8 with BOM，文件开头实际是
<!DOCTYPE html>→ 校验器读到非法字节 -
<p><div>内容</div></p>这类嵌套，浏览器重排成<p>内容</p><div></div>，但校验器判定<div>不允许在<p>内 - 服务端模板（如 Django）渲染后，
{{ content | safe }}插入未闭合标签，导致后续整个 DOM 结构偏移
CDN资源加了integrity却没拦截篡改，crossorigin漏了
加了 integrity 属性不等于启用校验——它只对 <script> 和 <link rel="stylesheet"> 生效，且必须与 crossorigin 成对出现。漏写或写错 crossorigin，浏览器根本不会比对哈希，控制台也不会报错，资源照常加载，integrity 形同虚设。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 公开 CDN（如 jsDelivr、cdn.jsdelivr.net）一律用
crossorigin="anonymous" - 自家后端若需带 Cookie 加载静态资源，才用
crossorigin="use-credentials"，且后端必须返回Access-Control-Allow-Credentials: true和明确的Access-Control-Allow-Origin（不能是*） - 哈希值必须基于目标 URL 实际响应体计算：
curl -sL https://cdn.example.com/app.js | openssl dgst -sha384 -binary | openssl base64 -A；本地文件算的哈希大概率失效（CDN 可能压缩、重定向、加 BOM） -
<img>、<iframe>、fetch()、动态创建的script元素，写了integrity也完全无效
前端签名校验 verify() 总是 false，原文不一致才是主因
crypto.subtle.verify() 返回 false，90% 不是密钥错了，而是前后端对“签名原文”的定义存在字节级差异。它不抛异常，只返回布尔值，容易误判为“验签失败”。
关键一致性要求：
- 服务端签名的是
document.getElementById('main-content').outerHTML，前端就不能用document.body.innerHTML—— 后者会丢失注释、忽略换行处理差异，不同浏览器输出不一致 - 签名前务必统一编码：用
new TextEncoder().encode(str)转 ArrayBuffer，别用str.text()（会触发 Unicode 归一化） - 公钥必须是 PEM 去头尾（
-----BEGIN PUBLIC KEY-----/-----END PUBLIC KEY-----）后 Base64 解码得到的Uint8Array，不能直接传 PEM 字符串给importKey() - 避免对整个
document签名：meta 时间戳、动态插入的 script、devtools 注入节点都会让哈希每次不同；应由服务端返回data-signature-target="#config"，前端按此 selector 提取
自动化部署中 HTML 结构被破坏，怎么快速定位
CI/CD 流水线里模板拼接、变量注入、HTML minifier 处理不当，极易引入结构性断裂。不要依赖源码视图，以 Chrome DevTools Elements 面板为准——它显示的是浏览器修复后的 DOM，但能暴露真实问题。
快速诊断步骤：
- 打开页面 → 右键“查看页面源代码”，确认
<!DOCTYPE html>是否在第一行、前面无空格/BOM/注释 - 在 Console 执行
document.documentElement?.childElementCount，若为 0 → MIME 类型错误（服务器返回text/plain）或响应体为空 - 执行
document.querySelectorAll('*').forEach(el => { if (!el.parentElement) console.warn('orphan:', el) })，揪出 JS 移除父节点却未销毁的游离元素 - 右键任意元素 → “Break on” → “Attribute modifications”，捕获 JS 动态删改
<head>的行为 - 检查生成的
dist/index.html：是否漏了<html lang="zh">？<script>是否被模板引擎错误地插到<body>中间而非末尾？
真正难防的不是语法错误，是那些浏览器自动修复后仍能渲染、但导致 hydrate 失败、SRI 失效、签名校验静默失败的细微偏差——它们藏在 BOM、嵌套规则、CORS 配置和原文字节一致性里。
