#67072026年2月13日作者 saeedhbi1 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome（版本142-144）、Safari（版本16.3、26.1），可能还有其他版本 可复制演示链接 https://jsfiddle.net/saeedhbi/tqfe7p04/ 描述一下那个虫子 如何复现这个漏洞？ 初始化 GrapesJS 编辑器（v0.22.11 或 v0.22.14） 在iframe完全加载前，按下键盘快捷键（例如Ctrl+Z、Delete或任意命令键） 命令系统在 iframe 准备好前调用 'Canvas.hasFocus（）' 观察“类型错误：无法读取空属性（读取”hasFocus“）” 预期的行为是什...
GJS Helper
GrapesJS Canvas模块中的TypeError: Cannot read properties of null (reading 'hasFocus')是已知的问题，源于竞争条件。当键盘命令（如Ctrl+Z、删除）在编辑器的iframe文档完全加载前或被销毁/卸载后尝试调用editor.Canvas.hasFocus()时，就会出现这种情况。 根本原因 Canvas.hasFocus()方法内部调用this.getDocument().hasFocus()。thi...
#67062026年2月13日作者 saeedhbi3 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 所有浏览器（Chrome、Safari、Firefox、Edge） 可复制演示链接 https://jsfiddle.net/saeedhbi/powxyjdq/3/ 描述一下那个虫子 如何复现这个漏洞？ 初始化 GrapesJS 编辑器 选择画布中的一个组件 快速删除组件（按删除键或使用删除命令） 样式管理器的去跳出更新回调在组件被销毁后执行 注意“类型错误：e.getRoot 不是函数” 预期的行为是什么？ 样式管理器应在尝试调用组件的方法前验证组件仍然有效。要么： 在处理前过滤掉损坏或无效的组件 在组件方法调用周围添加try-catch...
artf
和 https://github.com/GrapesJS/grapesjs/issues/6705 类似 我无法创建那种竞态条件（例如通过 API 选择和移除），在你的例子中是在组件上检查 getRoot，但组件 API 上没有这样的方法
saeedhbi
和 https://github.com/GrapesJS/grapesjs/issues/6705#issuecomment-3921025039 一样，问题出在我们外部库，使用 GrapesJS，因为遇到了类似 6705 问题的情况，我会关闭它。感谢你的评论。
GJS Helper
该TypeError: e.getRoot is not a function是GrapesJS风格管理器中已知的竞赛条件，尤其是在组件被快速选择后删除时。它发生是因为样式管理器的更新逻辑（去跳转后）试图访问在去跳跃函数执行时已被销毁或移除的组件的方法。 根本原因 去跳出的更新： GrapesJS风格管理器使用去跳出的函数来更新其UI（例如，选中组件或样式变更后，updateStyleView、updateTraitView）。这意味着事件（如选择）与更新逻辑实际执行之间存...
#67052026年2月13日作者 saeedhbi3 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 所有浏览器（Chrome、Safari、Firefox、Edge） 可复制演示链接 https://jsfiddle.net/saeedhbi/tdsLa6qe/ 描述一下那个虫子 如何复现这个漏洞？ 创建一个基础的GrapesJS编辑器（版本0.22.11或0.22.14） 向画布添加输入字段组件 聚焦输入场 发送一个键盘事件，其中“event.key”为“未定义”，用于IME作曲事件（主要是中文/日文/韩文键盘） 观察“类型错误：无法读取控制台中未定义属性（读为”toLowerCase“）” 预期的行为是什么？ 键盘处理器应优雅地处理“e...
saeedhbi
你好@artf，在深入挖掘全栈跟踪后，我发现错误不在 GrapesJS 里。 “event.key.toLowerCase（）”调用来自我们自己的应用代码——一个全局代码 'window.addEventListener（“keydown”， ...）我们在代码库中其他地方有处理程序， 与GrapesJS并行运行。因为我们的webpack构建将多个模块捆绑成同一个块 （'dist/1348'），哨兵框架具有误导性，我们错误地将来源归于GrapesJS。 GrapesJS 自...
artf
嘿，@saeedhbi，你在我们的代码里到底在哪里看到“event.key.toLowerCase（）”？你确定不是你这边的吗？ 可惜jsfiddle帮不上忙，感觉AI太粗糙😅，甚至连编辑器都加载不了。 也许你可以分享全栈的跟踪，看看具体发生在哪里？
GJS Helper
GrapesJS的键盘处理器中的TypeError: Cannot read properties of undefined (reading 'toLowerCase')是一个已知问题，当某些键盘事件，尤其是用于中文、日语或韩语等语言的输入法编辑器（IME）中，从GrapesJS画布的输入字段中发出时就会出现。根本原因是在 IME 组合过程中，event.key属性可以在提交字符前被合法地为keydown事件而undefined。GrapesJS的内部Keymaps模块试...
#66962026年2月4日作者 jasonvijayy1 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://codepen.io/Logeshwaran-codepen/pen/raLJpYb 描述一下那个虫子 如何复现这个漏洞？ 选择canvas中可用的组件。监听生命周期事件（例如 component：selected） 在事件处理程序内调用component.replaceWith（） 执行撤销 预期的行为是什么？ Undo 应安全恢复编辑器状态且无错误，GrapesJS 应提供支持的生命周期事件中替换组件的方法。 目前的行为是什么？ 撤销崩溃是因为GrapesJS试图恢复一个已不存在组件的选择/状态。 问题...
GJS Helper
你遇到的问题是，在GrapesJS生命周期事件中执行同步DOM或组件树操作时，尤其是UndoManager处于激活状态时，是一个常见的陷阱。核心问题在于UndoManager的时序和状态管理。 根本原因分析 当你在component:selected事件处理程序中同步调用component.replaceWith()时，以下事件序列会导致崩溃： 组件选择：在画布中选择一个组件。 事件触发：component:selected事件被触发。 UndoManager 快照：在此点...
#66952026年2月2日作者 Axel3031 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Edge 144.0.3719.92 可复制演示链接 https://jsfiddle.net/L61f0qtz/ 描述一下那个虫子 如何复现这个漏洞？ 在 Microsoft Edge 中打开 GrapesJS 编辑器。 添加一个键位图，用于使用 Ctrl+S 或 Ctrl+Shift+S 保存，并使用 { prevent： true }。 专注于编辑器画布（或编辑器内的任何位置）。 按下快捷键（Ctrl+S 或 Ctrl+Shift+S）。 预期的行为是什么？ GrapesJS 命令console.log（“保存”）应执行。 浏览器不应打...
GJS Helper
你遇到的 preventDefault() 在 Edge 中 Ctrl+S 和 Ctrl+Shift+MicrosoftS 无法正常工作，当GrapesJS画布聚焦时，这个问题与浏览器如何处理键盘事件和系统级快捷方式有关，这是常见的挑战。虽然 GrapesJS的 Keymaps 模块设计上防止默认操作，但其默认设置并未完全考虑画布 iframe 内的事件隔离。 根本原因 Iframe 事件隔离： GrapesJS 在一个iframe中渲染其可编辑画布内容。当你专注于画布并按...
#66902026年1月16日作者 HavokInspiration1 个回答
GrapesJS版本 [x] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ Chrome 143.0.7499.193 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 你好。 如何复现这个漏洞？ 导入 JS 文件 / Node env 中的 GrapeJS ： 在使用严格CSP规则的网页上，例如： 这样做会导致大量关于内联样式的CSP违规。 问题所在 我们正在考虑在SaaS产品的重大更新中使用GrapeJS，然而，我们面临着关于自由库和CSP规则的一个大问题。 我们的安全主管要求非常严格的CSP政策，而GrapeJS违反了这些政策。为了让GrapeJS与我们的基础规则正常...
GJS Helper
GrapesJS作为动态网页构建器，本质上依赖注入样式和操控 DOM，这确实可能导致内容安全政策（CSP）违规，尤其是在像你这样严格的规则下。让我们拆解这些问题并提出解决方案。 根本原因分析 <style>标签注入（style-src-elem违反）： GrapesJS动态创建<style>元素以注入 CSS 规则，例如编辑器界面、画布 iframe 的基础样式以及组件特定样式（尤其是在启用 forceClass 时）。如果这些动态创建的 <style> 标签没有 nonc...
#66852026年1月12日作者 shery4 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v143.0.7499.193 可复制演示链接 https://codesandbox.io/p/sandbox/2l3887 描述一下那个虫子 如何复现这个漏洞？ 打开页面并加载 GrapesJS 编辑器 选择行组件并删除它 点击左侧边栏的行组件，向画布添加行 预期的行为是什么？ 新添加的行组件应显示正确的样式（白色背景、边框、边框半径、填充等）。 目前的行为是什么？ 重新添加 Row 组件后，styles 属性中定义的 .gjs-row CSS 类未应用到 DOM 元素，导致样式缺失，组件显示为无样式的纯文本容器 如果需要执...
mdmontesinos
我也遇到类似问题，重新添加的组件拥有正确的样式属性： <img width=“1112” height=“17” alt=“Image” src=“https://github.com/user-attachments/assets/474011c4-b1be-48df-9aa8-14c3dcdfc68d” /> 但如果我用“查看代码”按钮，CSS就没有注入，在我的情况下，它们甚至不在DOM里。组件本身能用，因为刚加入时样式确实注入了，运行正常。只有移除并重新添加后才会失败...
artf
@mdmontesinos你的用法不正确，“样式”必须在组件定义中定义，且不被期望改变。另外，如果组件预期会被重用，ID会被重新创建，依赖类，尤其是样式，那用ID定义组件是不对的。 但@shery的报告似乎是真实的;样式缓存可能有问题。
mdmontesinos
@artf我用ID是因为我的项目里总会有一个该组件的实例。我的用例是组件外部设计成作为“后台”，然后导入到使用该组件的项目中。因此，当外部组件更新时，我需要在项目中更新它，这也是我尝试重建它的原因，它可能会修改组件或样式。有没有办法强制刷新样式？
#66782025年12月17日作者 J-Wick41 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 勇敢 可复制演示链接 不 描述一下那个虫子 如何复现这个漏洞？ 试着在落地页添加YouTube视频，看看情况如何。 预期的行为是什么？ YouTube 视频渲染并可播放 目前的行为是什么？ YouTube会出错，要求用户访问 YouTube.com 观看视频，因为iframe代码中额外要求一个属性。 问题：YouTube 现在要求 referrerpolicy=“strict-origin-when-cross-origin” 属性 在嵌入视频iframe上进行正确播放。 renderYoutube（） 和 renderYoutubeNoCo...
GJS Helper
这确实是一个有效的bug报告。YouTube已经更新了嵌入要求，如果iframe上没有referrerpolicy="strict-origin-when-cross-origin"属性，视频可能会无法播放，出现错误或需要用户直接访问 YouTube.com。GrapesJS核心对YouTube嵌入的ComponentVideoView缺少了这一关键属性。 根本原因 GrapesJS中的ComponentVideoView，特别是 renderYoutube() 和 ren...
#66712025年12月9日作者 padcom2 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 任何 可复制演示链接 https://github.com/padcom/grapesjs-closestType-missing 描述一下那个虫子 这个漏洞是在[这里]（https://github.com/GrapesJS/grapesjs/pull/6510/files#diff-d2f42c64bd3daa0eccd626801a25b531062462a74b919d051331f9d5ba0a84e0R326 年）中引入的。在这次变化之前，一切都按预期运作。我猜是“重置”事件造成的。 更让人烦恼的是，如果你重新加载页面，唯一会看到...
padcom
事实证明，第二个参数不总是组件，而是事件的发送者，这意味着有时它是组件集合，显然没有“closestType（）”方法。 谢谢@artf给我解释！
GJS Helper
看起来关于component.closestType()的使用可能存在一些误解。在查看你提供的复制步骤和代码后，component.closestType确实是传递给component:update:components事件的component对象上的函数。你观察到的undefined值是调用component.closestType()时的返回值，且没有任何参数。 根本原因解释 GrapesJS 中的 closestType(type) 方法旨在遍历组件的父层级，找到与指...
#66692025年12月5日作者 pierodetomi3 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？ 从一个新的编辑器实例开始，画布是空的 从块面板中，将一个“1列”块拖入画布。 从块面板中，拖拽一个“文本”块到画布中。 在图层管理器中，按顺序执行以下操作： 将文本块 移入 1列块内部。 将文本块移至1列块之外且下方（同一层级，紧邻其下方）。 将一列块移到文本块下方。 尝试再次将文本块移动到1列块下方。 预期的行为是什么？ 所有拖放操作都应正确且无错误地执行。 目前的行为是什么？ 在最后一个复刻步骤中，元素不会移动。 检查...
pierodetomi
我觉得问题不一样。你链接的那个里，物品会消失，而我这边的图层管理器则处于无法移动图层的状态。 它们可能在更高级层面上被称为“与分拣器相关的问题”，但据我所见，它们是两个不同的bug。
GJS Helper
这是GrapesJS中已知的问题，涉及内部排序器实例（在图层管理器和画布中用于拖放）在复杂的跨层组件重排序操作后如何保持状态。你看到的错误Cannot read properties of null (reading 'contains')和 Cannot read properties of null (reading 'remove')表明排序器对 DOM 元素或其父容器的内部引用已过时或无效。 根本原因 当你执行一系列涉及更改元素父节点的移动（例如，将一个块移入另一个...