[Bug] 在编辑器里面写style标签并且添加样式，会污染外部全局样式

[1742284240]

🐛 Bug Report

假如用户输入：

<style> html { display: none } </style>

直接就把整个页面整没了，不知道有没有方法实现样式隔离

[Qiao0124]

这个是有xss白名单过滤的吧，参考一下主目录README.md？

API 文档

props

name 名称	type 类型	default 默认值	describe 描述
html	Boolean	true	启用HTML标签，因为历史原因这个标记一直默认为true，但建议不使用HTML标签就关闭它，它能彻底杜绝安全问题。
xssOptions	Object	{}	xss规则配置, 默认开启，设置false可以关闭，开启后会对HTML标签进行过滤，默认过滤所有HTML标签属性，建议按需配置白名单减少被攻击的可能。 - 自定义规则参考: https://jsxss.com/zh/options.html - 参考DEMO: dev-demo

要避免直接渲染编辑区的html标签，props栏的html手动设为false即可，更细的调整则在xssOptions中进行。

[1742284240]

是的，确实有xss白名单过滤，谢谢大佬提醒；
不过我最初想实现的效果是，style标签仍然有效，只是style标签里面的样式不能影响外部样式；
目前来看好像实现不了，只能暂不处理这个问题了

[Qiao0124]

“不影响外部样式” 这句话我不太理解。按MDN<style>的说法，一个页面下可以包含多个<style>标签，而你如果在编辑区添加了<style>，按目前的效果看，这个<style>标签无论在哪都会在全局下起作用，要想在局部起作用只能使用css selector选择特定元素。效果图如下（小改了MDN的例子）：

另外类似于“样式作用域”的概念曾有一个<style>的属性scoped，但是按MDN的说法它已经被废除了（在#issue3547有类似的讨论），不过在Vue的单文件组件中仍有<style scoped>的写法，具体见单文件组件 CSS 功能

上述观点如表达不妥敬请指正。

[1742284240]

最终我手动修改了 编辑器的DOM，去掉预览区，用iframe替换，彻底解决了样式污染的问题

// 去掉预览
document.querySelector(".v-note-read-model").remove();
document.querySelector(".v-show-content").remove();

// 使用iframe实现预览
this.iframeNode = document.createElement('iframe');
this.iframeNode.srcdoc = ${编辑器内容};
document.querySelector(".v-note-show").append(this.iframeNode)