【Bug已解决】Claude Artifacts Blocked form submission to because the forms frame is sandboxed and the allow-forms permission is not set 解决方案一、现象长什么样你在 Claude Artifacts 里要让用户填写一个表单form运行时浏览器控制台报Blocked form submission to because the forms frame is sandboxed and the allow-forms permission is not set表单点了提交没有任何反应或页面直接被拦你明明写了form onsubmit...或按钮typesubmit但提交被浏览器安全策略阻止只有带表单的 artifact 出这个问题纯展示型 artifact 正常报错里的表示action为空你用了action或没写 action想靠 JS 处理提交根因在 artifact 的预览 iframe 带了sandbox属性但没给allow-forms令牌。一句话Claude Artifacts 的预览 iframe 是带sandbox的默认不允许表单提交你的表单需要allow-forms权限而该权限没被授予于是提交被浏览器拦截。二、背景Claude Artifacts 在网页里用一个iframe渲染你的 HTML/React 产物为了安全这个 iframe 通常带sandbox属性。sandbox是一组默认全禁、按需放开的令牌allow-scripts允许运行 JSartifact 一般开了这个才能交互allow-forms允许表单提交allow-same-origin、allow-popups等。当 iframe 被 sandbox 且没有allow-forms时里面任何form的提交都会被浏览器阻止并打出你看到的这条错误。这不是你的 JS 写错而是沙箱不允许表单这个安全默认值在起作用。注意artifact 的 sandbox 配置由平台决定普通用户无法在产物里改 iframe 的sandbox属性——你只能在产物自身层面规避让表单不需要触发被禁的提交行为。三、根因根因是sandbox 缺allow-forms而你的表单依赖原生提交!-- 你的 artifact 产物 -- form onsubmithandle(event) input nameq / button typesubmit提交/button /form!-- 平台渲染用的 iframe你改不了 -- iframe srcdoc... sandboxallow-scripts/iframe !-- 没有 allow-forms - 表单提交被拦截 --浏览器规则在sandbox且无allow-forms的 frame 里form的提交无论 action 是什么都会被 Block。即使你用onsubmitevent.preventDefault()想自己处理原生提交动作本身仍会被沙箱拦下取决于浏览器实现从而导致报错或提交无效。四、最小可运行复现下面用一段 HTML 演示sandbox 无 allow-forms 时表单被拦!-- 模拟 artifact 预览sandbox 只给 allow-scripts -- iframe sandboxallow-scripts srcdoc form onsubmitalert(1); return false; button typesubmit提交/button /form /iframe !-- 点击提交 - 控制台: Blocked form submission ... allow-forms not set --用 JS 单测思路验证提交行为受 sandbox 影响function canSubmit(sandboxTokens) { // 模拟浏览器判定没 allow-forms 就不允许原生提交 if (!sandboxTokens.includes(allow-forms)) { return { ok: false, reason: allow-forms not set }; } return { ok: true }; } console.log(canSubmit([allow-scripts])); // { ok: false, reason: allow-forms not set }五、解决方案第一层最小直接修复最小修复是避免依赖被沙箱禁止的原生表单提交改用纯 JS 交互按钮typebutton 事件处理不触发原生 submit!-- 正确用 typebutton不触发被禁的原生提交 -- form idmyForm input idq / button typebutton onclickhandle()提交/button /form script function handle() { const v document.getElementById(q).value; // 自己处理渲染结果 / 调用已注入的函数不依赖 form 提交 document.getElementById(out).textContent 你输入了: v; } /script要点按钮用typebutton而非typesubmit不要用form.submit()或原生onsubmit提交所有交互通过 JS 事件 DOM 更新完成绕开 sandbox 对表单的限制。六、解决方案第二层结构化改进把artifact 内交互组件做成不依赖表单提交的模式作为可复用策略// artifact 内建议的交互组件骨架 function createFormlessInput({ onValue }) { const wrap document.createElement(div); const input document.createElement(input); const btn document.createElement(button); btn.type button; // 关键不是 submit btn.textContent 提交; btn.addEventListener(click, () onValue(input.value)); wrap.append(input, btn); return wrap; } // 用法 const root document.getElementById(root); root.appendChild(createFormlessInput({ onValue: (v) { root.querySelector(#out).textContent v; }, }));若你确实需要表单语义如可访问性可在产物注释里说明本 artifact 需要宿主开启allow-forms作为对平台的建议但产物自身仍应以typebutton方式保证在当前 sandbox 下可用。from dataclasses import dataclass from typing import List dataclass(frozenTrue) class ClaudeArtifactFormPolicy: Artifact 表单策略在 sandbox 无 allow-forms 时仍可交互。 规则 - 交互控件用 typebutton不触发原生 submit - 提交逻辑全部走 JS 事件 DOM 更新 - 不依赖 form 的 action / 原生提交 def required_sandbox_tokens(self) - List[str]: return [allow-scripts] # 仅需脚本不强制 allow-forms def render_button(self, label: str 提交) - str: return fbutton typebutton onclickhandle(){label}/button def demo() - None: p ClaudeArtifactFormPolicy() print(p.render_button()) # typebutton安全 print(p.required_sandbox_tokens()) if __name__ __main__: demo()七、解决方案第三层断言 / CI 守护import pytest from your_module import ClaudeArtifactFormPolicy def test_button_is_type_button(): p ClaudeArtifactFormPolicy() assert typebutton in p.render_button() def test_no_submit_dependency(): p ClaudeArtifactFormPolicy() # 不要求 allow-forms说明不依赖原生提交 assert allow-forms not in p.required_sandbox_tokens() def test_scripts_token_present(): p ClaudeArtifactFormPolicy() assert allow-scripts in p.required_sandbox_tokens() def test_render_label(): p ClaudeArtifactFormPolicy() assert 提交 in p.render_button(提交)平台侧若维护 artifact 预览也可加一条检测到产物含form且 iframe 无allow-forms时提示作者改用typebutton。八、排查清单报错是否在 sandbox 缺allow-forms看浏览器控制台原文。你的按钮是typesubmit还是typebutton改成 button。是否依赖原生onsubmit/form.submit()改成纯 JS 事件。是否把所有交互改成事件 DOM 更新不触发提交是否需要向平台建议开启allow-forms作为改进非必须纯展示型 artifact 正常、表单型报错基本可锁定是 sandbox 限制。九、小结Claude Artifacts 里表单提交被Blocked ... allow-forms not set拦截根因是预览 iframe 带sandbox但没开allow-forms令牌浏览器据此禁止原生表单提交。这不是 JS 写错而是沙箱安全默认值。最小修复是改用typebutton JS 事件处理完全绕开原生提交结构化做法是抽成ClaudeArtifactFormPolicy把交互组件统一成不依赖表单提交的模式最后用 pytest 守护按钮必须是 typebutton、不要求 allow-forms确保 artifact 在现有 sandbox 下始终可交互。
【Bug已解决】Claude Artifacts Blocked form submission to because the forms frame is sandboxed and the allow-forms permission is not set 解决方案一、现象长什么样你在 Claude Artifacts 里要让用户填写一个表单form运行时浏览器控制台报Blocked form submission to because the forms frame is sandboxed and the allow-forms permission is not set表单点了提交没有任何反应或页面直接被拦你明明写了form onsubmit...或按钮typesubmit但提交被浏览器安全策略阻止只有带表单的 artifact 出这个问题纯展示型 artifact 正常报错里的表示action为空你用了action或没写 action想靠 JS 处理提交根因在 artifact 的预览 iframe 带了sandbox属性但没给allow-forms令牌。一句话Claude Artifacts 的预览 iframe 是带sandbox的默认不允许表单提交你的表单需要allow-forms权限而该权限没被授予于是提交被浏览器拦截。二、背景Claude Artifacts 在网页里用一个iframe渲染你的 HTML/React 产物为了安全这个 iframe 通常带sandbox属性。sandbox是一组默认全禁、按需放开的令牌allow-scripts允许运行 JSartifact 一般开了这个才能交互allow-forms允许表单提交allow-same-origin、allow-popups等。当 iframe 被 sandbox 且没有allow-forms时里面任何form的提交都会被浏览器阻止并打出你看到的这条错误。这不是你的 JS 写错而是沙箱不允许表单这个安全默认值在起作用。注意artifact 的 sandbox 配置由平台决定普通用户无法在产物里改 iframe 的sandbox属性——你只能在产物自身层面规避让表单不需要触发被禁的提交行为。三、根因根因是sandbox 缺allow-forms而你的表单依赖原生提交!-- 你的 artifact 产物 -- form onsubmithandle(event) input nameq / button typesubmit提交/button /form!-- 平台渲染用的 iframe你改不了 -- iframe srcdoc... sandboxallow-scripts/iframe !-- 没有 allow-forms - 表单提交被拦截 --浏览器规则在sandbox且无allow-forms的 frame 里form的提交无论 action 是什么都会被 Block。即使你用onsubmitevent.preventDefault()想自己处理原生提交动作本身仍会被沙箱拦下取决于浏览器实现从而导致报错或提交无效。四、最小可运行复现下面用一段 HTML 演示sandbox 无 allow-forms 时表单被拦!-- 模拟 artifact 预览sandbox 只给 allow-scripts -- iframe sandboxallow-scripts srcdoc form onsubmitalert(1); return false; button typesubmit提交/button /form /iframe !-- 点击提交 - 控制台: Blocked form submission ... allow-forms not set --用 JS 单测思路验证提交行为受 sandbox 影响function canSubmit(sandboxTokens) { // 模拟浏览器判定没 allow-forms 就不允许原生提交 if (!sandboxTokens.includes(allow-forms)) { return { ok: false, reason: allow-forms not set }; } return { ok: true }; } console.log(canSubmit([allow-scripts])); // { ok: false, reason: allow-forms not set }五、解决方案第一层最小直接修复最小修复是避免依赖被沙箱禁止的原生表单提交改用纯 JS 交互按钮typebutton 事件处理不触发原生 submit!-- 正确用 typebutton不触发被禁的原生提交 -- form idmyForm input idq / button typebutton onclickhandle()提交/button /form script function handle() { const v document.getElementById(q).value; // 自己处理渲染结果 / 调用已注入的函数不依赖 form 提交 document.getElementById(out).textContent 你输入了: v; } /script要点按钮用typebutton而非typesubmit不要用form.submit()或原生onsubmit提交所有交互通过 JS 事件 DOM 更新完成绕开 sandbox 对表单的限制。六、解决方案第二层结构化改进把artifact 内交互组件做成不依赖表单提交的模式作为可复用策略// artifact 内建议的交互组件骨架 function createFormlessInput({ onValue }) { const wrap document.createElement(div); const input document.createElement(input); const btn document.createElement(button); btn.type button; // 关键不是 submit btn.textContent 提交; btn.addEventListener(click, () onValue(input.value)); wrap.append(input, btn); return wrap; } // 用法 const root document.getElementById(root); root.appendChild(createFormlessInput({ onValue: (v) { root.querySelector(#out).textContent v; }, }));若你确实需要表单语义如可访问性可在产物注释里说明本 artifact 需要宿主开启allow-forms作为对平台的建议但产物自身仍应以typebutton方式保证在当前 sandbox 下可用。from dataclasses import dataclass from typing import List dataclass(frozenTrue) class ClaudeArtifactFormPolicy: Artifact 表单策略在 sandbox 无 allow-forms 时仍可交互。 规则 - 交互控件用 typebutton不触发原生 submit - 提交逻辑全部走 JS 事件 DOM 更新 - 不依赖 form 的 action / 原生提交 def required_sandbox_tokens(self) - List[str]: return [allow-scripts] # 仅需脚本不强制 allow-forms def render_button(self, label: str 提交) - str: return fbutton typebutton onclickhandle(){label}/button def demo() - None: p ClaudeArtifactFormPolicy() print(p.render_button()) # typebutton安全 print(p.required_sandbox_tokens()) if __name__ __main__: demo()七、解决方案第三层断言 / CI 守护import pytest from your_module import ClaudeArtifactFormPolicy def test_button_is_type_button(): p ClaudeArtifactFormPolicy() assert typebutton in p.render_button() def test_no_submit_dependency(): p ClaudeArtifactFormPolicy() # 不要求 allow-forms说明不依赖原生提交 assert allow-forms not in p.required_sandbox_tokens() def test_scripts_token_present(): p ClaudeArtifactFormPolicy() assert allow-scripts in p.required_sandbox_tokens() def test_render_label(): p ClaudeArtifactFormPolicy() assert 提交 in p.render_button(提交)平台侧若维护 artifact 预览也可加一条检测到产物含form且 iframe 无allow-forms时提示作者改用typebutton。八、排查清单报错是否在 sandbox 缺allow-forms看浏览器控制台原文。你的按钮是typesubmit还是typebutton改成 button。是否依赖原生onsubmit/form.submit()改成纯 JS 事件。是否把所有交互改成事件 DOM 更新不触发提交是否需要向平台建议开启allow-forms作为改进非必须纯展示型 artifact 正常、表单型报错基本可锁定是 sandbox 限制。九、小结Claude Artifacts 里表单提交被Blocked ... allow-forms not set拦截根因是预览 iframe 带sandbox但没开allow-forms令牌浏览器据此禁止原生表单提交。这不是 JS 写错而是沙箱安全默认值。最小修复是改用typebutton JS 事件处理完全绕开原生提交结构化做法是抽成ClaudeArtifactFormPolicy把交互组件统一成不依赖表单提交的模式最后用 pytest 守护按钮必须是 typebutton、不要求 allow-forms确保 artifact 在现有 sandbox 下始终可交互。
