#36281·storybook

[错误]: 操作: 管理器包含跨源 iframe 时,序列化 React 事件时发生 SecurityError

作者: OleksandrHoncharov创建于 2026年9月11日更新于 2026年9月14日
标签bugaddon: actionsreactaddon: interactionssev:S3

描述错误

以 " fn () " 为工具的回调实际上被援引,其回调收到回调的合成事件,在故事书UI中以未处理的 " Security Error " 失败了,而游戏功能中的每个断言都过去了。 交互面板显示所有步骤为绿色并仍然报告 FAIL,因为运行带有一个未处理的错误.

失败需要在管理器文件中显示一个跨来源的iframe. 任何跨源框架都足够;没有涉及任何特定加词。

安全错误: 从 Window 读取一个命名属性“ 到 JSON” 失败 :
屏蔽出自"http://localhost:6006"的相框取自取自跨出自相框.
在字符串中(.../sb-vite/deps/sorybook internal preview runtime.js)
在PostMessage Transport.send(.)网站(中文)
在Channel.emit (.) (中文(简体) ).
处理者(.)

CLI测试运行(`vitest-project=storybook')没有受到影响——它没有管理者,因此没有跨源框架——因此CI保持绿色,而互动面板显示一个带有绿色断言的红色FAIL.

衡量的条件 四个都坚持在一起,删除任何一个都会使失败消失:

  1. 故事在故事书UI(管理+预览)中运行,而不是CLI跑道;
  2. 实际援引了乐器回调;
  3. 回调收到反应合成事件;
  4. 管理文件包含一个跨来源的iframe。

复制链接

https://GitHub.com/Oleksandr Honcharov/史书-10-6-交互-安全-repro

  • 复制步骤

孤立项目 为本报告创建的清洁项目,与任何设计系统或产品代码无关。

  • 节点22.22.1
  • 反应/反应 - 度 19.3.0
  • 故事书 10. 6.0,@storybook/react-vite 10. 6.0,@storybook/addon-vitest 10. 6.0
  • Vitest 4.1.11,@vitest/浏览器-播放器4.1.11
  • 只有正式的副手才会这样 没有第三方加价

故事让本土元素,

// repro.stories.tsx (英语).
从“ @storybook/ react-vite” 导入类型{Meta, StoryObj} ;
导入 { 期望, fn, 用户Event, under } 从“ 故事本/ 测试” 中导入 ;

const meta:Meta={标题:"Repro"};
导出默认元a;

导出 const Repro: StoryObj = {
参数 : { 在克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克
使: (args)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
Click-args.on上的 <按钮类型="按钮" 点击 {}
点击我
</按钮 >
, (中文(简体) ).
播放 : async ({ args, causeElement }) {{
cont 按钮 = 在(canvasElement)内等待. findByRole("按钮",{名:"Click me") ;

等待用户Event.单击(按钮);

等待预期(args.onClick),有BeenCalledTimes(1);
{\fn华文楷体\fs16\1cHE0E0E0}
* ;

步骤

  1. 运行CLI测试套房。 它通过了——4/4。
  2. 在"故事书UI"中打开故事. 初出道出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出行出出行出出行出出行出行出行出行出行出行出出出出行出行出行出行出行出
  3. 在管理器文档中从Storybook页面的浏览器控制台上添加一个跨出源的iframe:
cont iframe = 文档.create Element ("iframe") ;
iframe.src ="https://example.com"; 互联网档案馆的存檔,存档日期2013-12-21.
iframe.style.display="无";
a. 文档.body.append Children(框架);
  1. 运行故事的游戏功能。

预期 跑步的表现 . . . . . . .

内容来源: storybookjs/storybook