iframe sandbox属性默认禁用表单提交，仅写sandbox或sandbox=""即静默拦截所有submit行为；必须显式添加allow-forms才能恢复提交能力，且该权限不连带开放跳转或存储等其他功能，需配合allow-scripts实现js校验，后端cors配置同样关键。
iframe sandbox 属性默认禁用表单提交
只要写了 sandbox（哪怕空值 sandbox=""），<form></form> 的 submit 行为就被静默丢弃：点击按钮无响应、form.submit() 不触发、event.preventDefault() 也拦不住——因为整个提交流程在底层就被拦截，控制台不报错，Network 面板看不到请求发出。
sandbox="allow-forms" 是唯一解禁方式
必须显式加上 allow-forms 才能让表单提交恢复，但要注意它只解禁“提交动作”，不连带开放其他能力：
-
allow-forms单独使用时，表单仍只能提交到 iframe 内部（target 默认为_self），无法跳转顶层或新窗口 - 若表单含
target="_blank"或target="_top"，需额外加allow-popups或allow-top-navigation，但后者极其危险，生产环境应避免 - 提交目标 URL 仍受 CORS 控制：后端必须返回
Access-Control-Allow-Origin等头，否则 403 或预检失败 -
enctype="multipart/form-data"上传文件时，同样需要服务端明确允许对应 header，否则请求被浏览器拦截
常见错误：加了 allow-forms 但提交仍失败
这不是配置漏了，而是权限组合或运行环境出了问题：
- 写了
sandbox="allow-forms"但没加allow-scripts→ 表单 JS 验证逻辑失效，但原生提交仍可走；如果用了event.preventDefault()+fetch()提交，则因脚本被禁而完全卡死 -
allow-forms和allow-same-origin同时存在，且src实际不同源 → 浏览器会忽略allow-same-origin，但表单提交本身不受影响；真正出问题的是后续响应处理（如读取response.json()）可能因跨域被拦 - 动态设置
iframe.sandbox = "allow-forms"→ 不生效，必须在 DOM 插入前就写死属性值，例如<iframe sandbox="allow-forms"></iframe>
真实场景下的最小权限组合
多数嵌入式表单（如客服反馈、问卷）只需两个权限：
-
sandbox="allow-scripts allow-forms"：JS 可运行（做校验、收集数据），表单可提交，origin 仍为null，无法访问父页面 DOM 或 localStorage - 如果表单提交后需弹窗确认，再加
allow-popups，但确保弹窗由用户手势触发（比如 click 后调用window.open()），否则仍被拦截 - 绝对不要加
allow-top-navigation—— 它让表单提交时能直接重定向整个页面，等同于放弃沙箱保护
真正容易被忽略的点是：表单 action 地址是否支持 CORS，和 sandbox 配置无关；sandbox 只管“能不能发”，不管“发出去能不能收”。后端没配好，前端加再多 allow-token 都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
