Closed 1742284240 closed 1 year ago
这个是有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中进行。
是的,确实有xss白名单过滤,谢谢大佬提醒; 不过我最初想实现的效果是,style标签仍然有效,只是style标签里面的样式不能影响外部样式; 目前来看好像实现不了,只能暂不处理这个问题了
“不影响外部样式” 这句话我不太理解。按MDN的说法,一个页面下可以包含多个<style>
标签,而你如果在编辑区添加了<style>
,按目前的效果看,这个<style>
标签无论在哪都会在全局下起作用,要想在局部起作用只能使用css selector选择特定元素。效果图如下(小改了MDN的例子):
另外类似于“样式作用域”的概念曾有一个
<style>
的属性scoped
,但是按MDN的说法它已经被废除了(在#issue3547有类似的讨论),不过在Vue的单文件组件中仍有<style scoped>
的写法,具体见单文件组件 CSS 功能
上述观点如表达不妥敬请指正。
最终我手动修改了 编辑器的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)
🐛 Bug Report
假如用户输入:
直接就把整个页面整没了,不知道有没有方法实现样式隔离