后端签名校验用于验证外部资源来源可信且未被篡改，需前端主动调用web crypto api校验；integrity和csp无法替代因其不绑定签名者身份；关键在于前后端“原文”字节级一致，须用arraybuffer()获取原始内容、固定json键序、统一utf-8编码，并注意iframe与旧浏览器兼容性。
后端签名校验不是用来“运行 HTML”的，而是用来确认你加载的外部资源（比如 JS、CSS、JSON 数据）确实来自可信源且未被中间人篡改。浏览器本身不会自动做这件事，必须由你的前端代码主动发起校验逻辑，并依赖后端预先生成的签名和公钥。
为什么不能靠 integrity 属性或 CSP 完全替代？
integrity 属性（Subresource Integrity）只校验资源哈希，不验证发布者身份；CSP 控制加载来源但不校验内容是否被篡改。两者都缺乏“签名者身份绑定”——而数字签名能同时证明“谁签的”和“内容没变”。尤其在 HTML 在线运行环境（如代码沙箱、低代码平台）中，用户可能动态引入第三方脚本或配置数据，此时仅靠哈希或域名白名单远远不够。
- 攻击者若劫持 CDN 或污染构建产物，
integrity值仍匹配，但执行的是恶意代码 - CSP 无法阻止同域下已被污染的资源（比如 /static/plugin.js 被覆盖）
- 签名验证可要求服务端用私钥对资源 URL + 时间戳 + 随机 nonce 组合签名，实现一次一签
如何让前端用 Web Crypto API 验证后端签名
核心是三步：取原始资源内容 → 用公钥导入 → 调用 crypto.subtle.verify()。难点不在 API 调用，而在“原始内容”的获取方式和编码一致性。
- 不要用
fetch(url).then(r => r.text())后直接传给verify()：文本解码可能丢失 BOM、换行符归一化、UTF-8 与 UTF-16 混淆，导致哈希不一致 - 正确做法是用
arrayBuffer()获取原始字节流，再传入crypto.subtle.digest("SHA-256", buffer) - 公钥必须是 PEM 格式且已去除头尾（
-----BEGIN PUBLIC KEY-----等），再用Uint8Array解码为 DER - 签名值通常是 Base64url 编码（非标准 Base64），需先转成
Uint8Array再传入verify()
后端签名时必须固定输入结构，否则前端永远算不对
常见错误是后端对 JS 文件内容签名，但前端却对 response.body 的字符串调用 TextEncoder.encode() —— 这两者在换行符（CRLF vs LF）、BOM、末尾空格上极易不一致。更稳妥的方式是：后端签名时明确约定“待签名原文”格式。
- 对 JS/CSS 资源：签名对象是
{url: "/js/main.js", etag: "abc123", size: 4096}的 JSON 字符串（注意键名顺序固定，建议服务端用json.dumps(..., sort_keys=True)） - 对动态 JSON 数据（如表格配置）：签名字段必须从
<script type="application/json" id="config"></script>中取textContent，而非innerHTML或JSON.stringify(parsed) - 所有字符串统一用 UTF-8 编码，禁止在签名前做任何 trim()、replace() 或正则清洗
在线运行环境里最容易被忽略的兼容性陷阱
HTML 在线运行环境（如基于 iframe 的沙箱、Monaco 编辑器嵌入页）常禁用 eval、限制 localStorage、屏蔽 document.write，这些会间接影响签名验证流程。
-
crypto.subtle在 iframe 中默认不可用，需确保 sandbox 属性包含allow-scripts allow-same-origin，且页面协议为https或localhost - 某些低代码平台会重写
fetch，导致你拿到的 response body 不是原始二进制流，建议用Response.arrayBuffer()而非Response.text() - IE 和旧版 Safari 不支持
importKey的spki格式导入，若需兼容，服务端应额外提供 JWK 格式公钥并 fallback 使用
真正卡住人的往往不是算法，而是“原文”二字——它必须是服务端签名时用的那个精确字节序列。多一个空格、少一个引号、换行符类型不同，都会让 verify() 返回 false。与其反复调试，不如在服务端输出签名时，同步打印出原文的 hex dump 和长度，前端校验前也 dump 一次，直接比对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
