仅靠accept属性无法真正限制文件扩展名，必须结合JavaScript前端校验与后端魔数识别三重防护；accept仅影响文件选择器默认筛选，需用逗号分隔无空格的扩展名如".html,.htm"；JS须校验file.name而非file.type；后端须忽略文件名和Content-Type，读取文件头及内容结构验证HTML真实性并重命名存储。
只靠 accept 属性不能真正限制扩展名，它只是浏览器界面提示；必须配合 JavaScript 校验 + 后端魔数识别，三者缺一不可。
accept 属性怎么写才生效
它只影响文件选择对话框的默认筛选视图，用户点“所有文件”就能绕过。但写错连这个提示都没了：
-
accept值必须用逗号分隔、**不能有空格**：正确是accept=".html,.htm"，错误是accept=".html, .htm" -
text/html在 Safari 和部分 Android 浏览器上不生效，优先用带点的扩展名写法 - 多个扩展名要全部列全：
accept=".html,.htm,.xhtml"，漏掉一个就可能被选中 - 不要混用 MIME 和扩展名：
accept="text/html,.html"会降低兼容性，统一用扩展名更稳
JavaScript 必须校验文件扩展名
用户可通过拖拽、修改 DOM、或直接在文件选择器里切到“所有文件”来绕过 accept。提交前必须检查 file.name：
- 用
file.name.toLowerCase().endsWith('.html')，别依赖file.type（常为空，且可伪造） - 要支持多文件？遍历
event.target.files每一项，不能只看[0] - 清空非法选择：校验失败后设
input.value = ''，否则下次 change 事件拿不到新文件 - 示例逻辑：
const allowed = ['.html', '.htm', '.xhtml'];<br>const ext = file.name.slice(file.name.lastIndexOf('.')).toLowerCase();<br>if (!allowed.includes(ext)) { alert('仅允许上传 HTML 文件'); input.value = ''; }
后端必须用魔数识别真实类型
前端所有检查都可被跳过。服务端收到文件后，必须忽略原始文件名和请求头里的 Content-Type：
立即学习“前端免费学习笔记（深入）”；
- 读取文件前 4–8 字节（如 HTML 文件通常以
<!DOCTYPE或<html开头，但更可靠的是结合 UTF-8 BOM 或标签结构做轻量解析） - Node.js 可用
file-type库，Python 推荐python-magic，Java 用Apache Tika - 确认内容确实是 HTML 类文本后，再重命名保存，例如生成
upload_20260921190422.html，**绝不保留用户传来的原始扩展名** - 存储路径必须脱离 Web 根目录，或配置 Nginx/Apache 禁止直接执行 .html 文件，防止上传恶意 HTML+JS 组合攻击
最容易被忽略的一点：HTML 文件没有固定魔数，不像 PNG 或 PDF 那样有明确二进制签名，所以后端仅靠字节头识别不可靠——必须结合内容特征（如是否包含合法 HTML 标签结构、编码是否可解析）做二次判断，否则容易放行伪装成 HTML 的 XSS 载荷。
