html5文件处理需多层校验：前端快速拦截（类型/大小/扩展名）、内容结构分析（正则+dom遍历）、sha-256哈希校验、沙箱预览隔离，所有客户端检查仅为体验优化，服务端终审不可替代。
HTML5 文件处理中，本地读取本身不带安全校验能力，所谓“严格校验”必须由开发者主动组合多个层面的检查来构建，不能依赖单一手段。核心逻辑是：前端做快速拦截与提示，服务端做最终裁决；所有客户端校验都可被绕过，因此只用于优化体验，而非替代后端防护。
文件元信息校验：类型与大小双控
仅靠 accept 属性无法防伪造，必须结合 JavaScript 读取 File 对象的 type 和 size 属性，并辅以扩展名提取：
- 用
file.type初筛 MIME 类型，但需配合白名单（如['text/html', 'application/xhtml+xml']），不信任浏览器自动识别结果 - 用
file.size限制体积（例如 ≤ 2MB），避免大文件拖慢页面或触发内存警告 - 从
file.name提取扩展名（name.split('.').pop().toLowerCase()），比对预设允许列表（如['html', 'htm']），防止通过修改 MIME 伪装成合法类型 - 若任一条件不满足，立即清空
<input type="file">的value并给出明确提示（如“仅支持小于 2MB 的 .html 文件”）
内容结构校验：静态扫描 + DOM 解析双验证
上传前对 HTML 内容做轻量级分析，既能拦截明显风险，又避免过度消耗资源：
- 用
FileReader.readAsText()读取为字符串，再用正则初步过滤高危模式（如/<script>]*>/i</script>、/onerror\s*=/i、/javascript:/i） - 创建临时
<div> 元素，将读取内容赋给 <code>innerHTML，再遍历其子节点，检查是否存在黑名单标签（iframe、object、embed）或内联事件属性（onclick、onload等） - 不依赖单次正则匹配，而是结构化遍历——因为混淆写法（如
onclick）会逃逸纯文本检测 - 发现违规内容时，阻止上传并高亮定位问题位置，方便用户自查修正
- 调用
file.arrayBuffer()获取原始字节，再传入crypto.subtle.digest('SHA-256', buffer) - 结果转为小写十六进制字符串（32 字节 → 64 字符），确保编码格式统一，避免大小写或 padding 差异导致误判
- 可将哈希值存入
FormData一并上传，供服务端复核；也可用于前端去重（相同哈希即跳过上传） - 注意：大文件（>100MB）慎用
arrayBuffer()，应改用分块读取+第三方库（如hash-wasm）避免内存溢出 - 将内容转为
Blob，生成URL.createObjectURL(blob)，再加载到<iframe sandbox="allow-scripts allow-same-origin"></iframe>中 - 初始 sandbox 权限收紧（如仅
sandbox=""），逐步放开并监控异常行为（如fetch调用、location.href修改） - 配合
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline'">进一步限制资源加载范围 - 不直接在主页面执行脚本，所有动态分析均限定在 iframe 内完成，杜绝跨域泄露或污染主应用状态
哈希一致性校验：SHA-256 计算与比对
用于识别重复上传、验证传输完整性，但不能代替权限或内容安全检查：
运行环境隔离：沙箱预览与 CSP 配合
若需在上传前预览 HTML 文件行为，必须切断其执行上下文：
