FilterXSS XSS 过滤组件 - quantex-design

在页面上显示过滤 XSS 之后的 HTML。基于 js-xss 封装。

何时使用

用于显示后端返回显示在前端的 HTML 字符串，带有过滤 XSS 攻击代码的功能。

代码演示

过滤不安全属性和标签

before: <FilterXSS html={'<span>过滤不安全属性和标签<img src=1 onerror=alert(//Fsec/)><script>alert</script></span>'}/>

after: <div><span>过滤不安全属性和标签<img src(unknown)></span></div>

指定包裹 html 的外层元素

before: <FilterXSS parentElement="p" html={'指定包裹 html 的外层元素<img src=1 onerror=alert(//Fsec/)>'}/>

after: <p>指定包裹 html 的外层元素<img src(unknown)</p>

使用正常 dom 元素可接收属性

before: <FilterXSS className="filter-xss" style={{ color: 'red' }} html={'<span>使用正常 dom 元素可接收属性<img src=1 onerror=alert(//Fsec/)><script>alert</script></span>'}/>

after: <div class="filter-xss" style="color: red;"><span>使用正常 dom 元素可接收属性<img src(unknown)></span></div>

API

参数	说明	类型	默认值
html	需要显示到界面上的 html 字符串	string	-
parentElement	显示 html 的外层元素	string	'div'
其它	正常 dom 元素可接收属性，eg：className、style	-	-