#57432024年3月11日作者 davidgabrichidze4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Edge v122 可复制演示链接 https://jsfiddle.net/bwreyq29/1/ 描述一下那个虫子 如何复现这个漏洞？ 打开此链接 [https://jsfiddle.net/bwreyq29/1/]（https://jsfiddle.net/bwreyq29/1/），附带到 src 属性上的 JavaScript 代码将被自动执行。 预期的行为是什么？ 这段代码不应该运行 目前的行为如何？ 存在XSS漏洞行为准则 [X] 我同意遵守本项目的行为准则
bernesto
我觉得预读解析师这个选项是个很好的主意。它坚持“按功能插入”的概念。 那更新“fromElement”以接受字符串元素ID或布尔值怎么样？如果 bool == true，则和现在一样，解析容器 HTML。 如果字符串 ID，它会使用元素的内容，容器则像现在一样成为编辑器。然后我们可以更新文档，支持HTML脚本模板用于开发。这样可以防止刹车变化，并促进正确的使用。 “''js const editor = Grapesjs.init（{ 容器：“#gjs”， fromElem...
artf
完全同意@bernesto的观点，无论我们多么努力让它安全，都永远不够，我也不想让人觉得库“非常安全”，以至于缺少服务器端验证。 当前选项（例如“allowUnsafeAttr”、“allowUnsafeAttrValue”）只避免了基本的常见内容。
bernesto
使用“fromElement”从激活的DOM元素加载时，这种情况是不可避免的。页面元素同步加载和执行。GrapesJS 永远没有机会处理和解除 XSS 的 html。 这个问题需要通过阻止恶意代码永远加载来解决。这应该在服务器存档时处理。但如果客户端需要处理，可以通过用脚本标签包裹代码，然后在加载到编辑器前对代码进行净化，就像这样： https://jsfiddle.net/bernesto/5gcxa0jm/1/ 我确实看到，在初始化时通过“components”属性加载...
#57182024年3月4日作者 mitcht2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 122.0.6261.95（官方版本）（64 位） 可复制演示链接 https://jsfiddle.net/n4x6L1v0/2/ 描述一下那个虫子 如何复现这个漏洞？保存早期版本 grapejs （0.18）的组件数据尝试将 grapesjs 作为项目数据导入到最新版本 预期的行为是什么？ Grapes 可以简单地替换旧的“textnode”条目，并更新为“封装”式。 目前的行为是什么？ 控制台会触发偏移错误 这段代码并非重现该漏洞的必要条件，但它目前让我能够绕过这个问题。 这里附上了我现有 grapesjs 拖动文...
artf
谢谢@mitcht，但正如我之前提到的，主组件根本不可能是 textnode，所以在核心处理这种情况或开启这个问题都没有意义。 总之，如果逻辑对你有效，就直接在编辑器里用它。
GJS Helper
你遇到的问题是一个已知的破坏性变更，涉及GrapesJS内部组件架构的演进，特别是帧根组件的处理方式。在旧版本（比如0.18）中，帧的默认根组件类型可能是textnode或类似，而在最近版本中，它已被标准化为wrapper。 根本原因 GrapesJS 经历了大规模重构，以提升其核心组件模型、渲染和操作能力。作为这些变化的一部分，wrapper 组件被引入为一个特殊的、不可渲染的容器，作为GrapesJS帧内所有内容的根元素。该wrapper组件对编辑器的内部逻辑至关重要，...
#57082024年2月27日作者 ravisaxena2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome最新 可复制演示链接 我们现在运行在本地机器上 描述一下那个虫子 你好，目前 grapesjs 提供了内置属性，比如margin、padding，允许用户逐项更改每个属性（margin-top、margin-bottom等）。 如果能同时更改所有这些属性会更好。比如有锁定按钮，启用后会自动同时更改所有属性，而不是一个个更改。 行为准则 [X] 我同意遵守本项目的行为准则
artf
请避免在未阅读模板中漏洞问题的具体目的前打开BUG问题。
GJS Helper
这是提升 GrapesJS 样式体验的绝佳建议！默认情况下， GrapesJS的样式管理器提供对 CSS 属性如 margin 和 padding的细致控制，允许你单独调整每一侧（上、右、下、左）。虽然没有内置的“锁定”按钮来链接这些属性，但你可以通过创建自定义属性类型实现将所有侧面合并的功能。 这个自定义属性将作为“简写”控件。当你修改它的值时，它会自动更新所选组件上的四个单独边距或填充属性（例如， margin-top、 margin-right、 margin-bot...
#56182024年1月15日作者 Ashwinvalento3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Edge v120.0.2210.121 可复制演示链接 https://codepen.io/ashwinvalento/pen/jOJMPqx 描述一下那个虫子 如果我们设置了 config.parser.optionsHtml.allowScripts: true 并创建了一个包含脚本的组件，那么当我们用 grapesjs-preset-webpage 插件导入代码时，脚本标签会被重复。 如何复现这个漏洞？ 在演示链接（https://codepen.io/ashwinvalento/pen/jOJMPqx）将“复制脚本块”放入画布。...
artf
直接将 JS 导入为组件从来不可能，所以它被视为一个新的组件。
Ashwinvalento
有没有办法识别现有组件的脚本并在导入时删除它们？我们无法移除所有脚本标签，因为需要保留手动添加的脚本。
GJS Helper
你遇到的脚本重复问题是，在多次导入HTML时，尤其是在 GrapesJS中，尤其是 config.parser.optionsHtml.allowScripts: true，是 GrapesJS 在 setHtml 操作中如何对合组件的已知行为。虽然 setHtml 设计用于替换画布内容，但脚本组件的对账逻辑可能并不总是正确识别和替换现有的相同脚本，导致它们被附加而非更新或移除。 根本原因 当 config.parser.optionsHtml.allowScripts 设...
#55632023年12月18日作者 leo-budgetsimple1 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 最新版本的Chrome浏览器可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 如何复现这个漏洞？ 用这个代码把一个html字符串渲染成 grapesjs （我启用了allowScripts） 这是渲染好的画布 ![图片]（https://github.com/GrapesJS/grapesjs/assets/107002063/21087a5d-348b-4e16-a349-43243ac8f2e1） 这是可以导出的HTML字符串图片 ![图片]（https://github.com/GrapesJS...
GJS Helper
你观察到脚本标签属性不出现在 GrapesJS 画布上，而导出的HTML中却存在，这是预期且设计中的， GrapesJS 处理非视觉元素，尤其是携带数据的脚本标签。这不是漏洞，而是编辑器内部架构及其专注于提供稳定安全的视觉编辑环境的结果。 根本原因解释 内部组件模型与画布渲染： 当你使用 editor.setComponents()时， GrapesJS 会将你的 HTML 字符串解析到其内部组件模型中。使用 allowScripts: true时， <script> 标签...
#54412023年10月3日作者 padcom2 个回答
GrapesJS版本[X] 我确认使用最新版本GrapesJS你用的是什么浏览器？ Chrome最新款可复制演示链接 https://github.com/padcom/grapesjs-无ID-for-element-示例描述一下那个虫子 在创建自定义GrapesJS组件时，如果这些组件具有script()（组件的运行时行为），且该组件没有样式，那么根元素没有id属性，这会导致document.querySelectorAll('#<id-goes-here')失败，运行时脚本也不会被调用。 在给出的示例中，我创建了一个特殊的自定义元素，称为<content-preview>（https://github.com/padcom/...
artf
问题源于'jsInHtml： false'的使用以及内部JS生成器的处理方式。 我会尽量在下一个版本里修复这个问题。
GJS Helper
你描述的问题是GrapesJS中已知的行为，涉及HTML序列化过程中组件ID的生成和优化。当自定义组件有script()函数但没有显式样式应用时，GrapesJS可能会在最终HTML输出中省略组件根元素中的id属性（由editor.getHtml()生成）。这是因为GrapesJS主要使用ID来引用组件以进行样式设计。如果没有样式，ID可能被认为内部GrapesJS操作中没有必要，从而省略。 这种遗漏会破坏依赖document.querySelectorAll('#<com...
#53342023年8月24日作者 DreamCloudProject4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome、Opera、Edge 等 可复制演示链接 https://jsfiddle.net/crszh0jo/6/ 描述一下那个虫子 我正试图让它像这里描述的那样工作[[问题] Canvas #951 无法选择自定义组件（https://github.com/GrapesJS/grapesjs/issues/951），但还是没成功。 我怎样才能让从画布选择和从图层管理器选择一样工作？因为这里描述的解决方案对我来说不适用。我需要允许用户从画布中选择自定义组件，而不是每次都打开图层管理器。 行为准则 [X] 我同意遵守本项目的行为准则
DreamCloudProject
@artf 是的，你说得对。我阻止了点击传播，所以编辑器无法接收点击事件，因此无法执行选择元素的逻辑。 我尝试通过在组件内将“e.stopPropagation（）”替换为“e.preventDefault（）”，将点击传播设置为仅对当前元素进行，现在编辑器中的元素选择逻辑正常了。问题似乎已经解决了。谢谢！
DreamCloudProject
https://github.com/GrapesJS/grapesjs/assets/7961936/12180b41-4c29-489d-9bcd-1ea025a96a8f 这个例子展示了它在我的编辑器中的工作原理。
yatoogamii
你好@DreamCloudProject，看起来你的组件MSC头锁住了。这是一个属性，允许从图层点击组件，但不能从Canva本身点击 你能分享或验证你的组件定义，并检查“锁定”属性是否设置为true吗？
#53122023年8月17日作者 srinivas9772 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome V115可复制演示链接 https://jsfiddle.net/srinivas977/ahgLxv6e/10/描述一下那个虫子 如何复现这个漏洞？ 在提供的 JSFiddle 中，包含一对文本行并选择列表。接着，添加一个子列表，然后添加子列表。之后，点击选定元素外，子列表中的一个项目会消失。 这个现象也在这个视频链接中看到（从视频第30秒开始注意）： https://github.com/GrapesJS/grapesjs/assets/49796104/59de9aa5-5f3f-43ae-9ed1-358b86ac8b27...
artf
不幸的是，由于默认实现依赖于 [deprecated execCommand]（https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand），导致太多边缘情况难以处理，已经不值得再花时间去处理了。 我建议只用它来处理基本格式（例如加粗、斜体、下划线等），对于更复杂的元素，我强烈建议创建[自定义组件]（https://grapesjs.com/docs/modules/Components.htm...
GJSBlock
谢谢你举报，@srinivas977。 关于列表富文本编辑器缩进操作的问题的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进...
#51992023年6月23日作者 rmadeiraneto3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v114 可复制演示链接 https://jsfiddle.net/rmadeiraneto/t659usxv/39/ 描述一下那个虫子 如何复现这个漏洞？进入块列表，将自定义组件“示例”拖到画布上画布中显示三个来自默认属性（数组）的元素选择“示例”组件进入特质面板，点击加号图标几次这将将示例组件属性中的项目添加到数组中，并在页面中绘制将另一个示例块拖入画布注意你添加到数组中的项目也在该组件的新实例中显示 预期的行为是什么？ 在更改第一个组件的属性后创建第二个组件实例时，预期第二个组件的属性会是默认值 [1,2,3] 中在 c...
artf
感谢@rmadeiraneto的报告。是的，不幸的是，如果你以这种方式变异数组/对象属性，这就是个问题，为了避免这种情况，你有两个选择：避免直接变异（更新时分配新引用）将“默认值”定义为函数 “''js 默认值： （） => （{ customArray： [1,2,3] }）， ``` 但不幸的是......第二个选项现在😅不行，我会在下一个版本修复它
rmadeiraneto
@artf使用默认值作为函数是可行的，感谢你的快速回复和提供解决这个问题的替代方案。 关于第一个建议，我认为问题不在于人们是否应该变异或不变异对象，因为我们讨论的是使用提供的方法（集合）。抱歉我没时间看源代码，但你很可能在“set”方法里变了默认对象，可能是因为引用来自组件生命周期的早期。同样，没有深入看代码，我假设当你将默认值与组件属性合并时，你保留了对默认对象的引用，而不是使用会返回副本的合并方法，比如 from immutable。 我会尽量找时间研究代码，并提出更具...
GJS Helper
你描述的问题是 JavaScript 中常见的一个陷阱，涉及当可变对象（如数组和对象）被分配为默认值时的处理方式。在 GrapesJS中，当你定义包含数组或对象的defaults组件时，这些组件是通过引用分配给新的组件实例。如果你在某个实例上修改了这样的属性，实际上是在修改原始默认引用，这会影响该组件类型创建的所有后续实例。 根本原因 当你在组件的defaults中定义customArray: [1, 2, 3]时，这个数组[1, 2, 3]只创建一次。每当一个新的“示例”...
#51562023年5月31日作者 loclovepop3 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome，IOS可复制演示链接 https://www.lovepoptestsite.com/products/disney-s-hocus-pocus-black-flame-candle-pop-up-card?variant=40356218077273&preview_link=124907487321 密码：ilovecards描述一下那个虫子 如何复现这个漏洞？ 我试过用手机屏幕单独拖拽 grapejs 编辑，一切都没问题。但当我尝试在注入编辑器测试存储后这样做时，效果并不如预期。 预期的行为是什么？ ...它应该允许拖放组件...
loclovepop
[screencast-www.lovepoptestsite.com-2023.06.01-001711.webm]（https://github.com/GrapesJS/grapesjs/assets/124012807/a171fbbb-dd8b-45a6-901c-d0c2519c8304） 这是关于bug的视频
artf
我看到触摸插件是正常工作的，确保加载时启用移动设备（比如加载后不要模拟），这样聚合物填充才能正确加载。
GJS Helper
你遇到的拖放功能在移动屏幕上无法正常工作的问题，尽管GrapesJS嵌入在你的“测试商店”环境中，尽管使用了grapesjs-touch，这在复杂的网页应用中很常见。这通常源于CSS冲突或事件处理干扰，扰乱了GrapesJS的基于触摸的拖拽逻辑。 根本原因解释： 当GrapesJS独立运行时，它对DOM和CSS拥有完全控制权。然而，当嵌入时，尤其是在像“测试商店”这样的平台上（它很可能拥有自己的全局样式、脚本和事件监听器），这些可能会干扰GrapesJS预期的行为。特别是触...