解读vue项目防范XSS攻击问题
目录
题外话:个人不倡议用第三方CDN,其一是不会减少页面加载资源的体积,其二是第三方CDN稳定性不能保证,有时候第三方CDN的服务器会挂掉导致需要的资源加载不了。 一般会用下面的CSP配置: 设置解释: 在项目中,XSS的安全漏洞很容易出现,例如在聊天模块和富文本模块很容易出现。 有时候你想实现富文本编辑器里编辑html内容的业务。 可是又担心XSS恶意脚本的注入。 此时可以使用一个xss工具。 网址:https://github.com/leizongmin/js-xss。 更详细的用法可以看附上的网址,这里简单说一下用法。 首先下载xss (1)在页面中引入资源且生成XSS过滤器,对内容进行过滤 (2)如果我想不过滤img标签的onerror属性,或者不过滤style标签。 通过设置whiteList可选择性的保留特定标签及其属性 例如: xss默认的whiteList可以通过console.log(xss.whiteList)显示。 (3)如果想彻底过滤掉类似script,noscript标签,option可如下设置: stripIgnoreTagBody用于设置不在whiteList的标签的过滤方法。 例如script,不在whiteList会被执行xss内部的escapeHtml方法。如一开头的例子会把“<”,“>”进行转义。 但如果stripIgnoreTagBody中添加了script。则会直接把整个script标签过滤掉。 (4)xss默认生成的过滤器是会过滤掉任何标签的class属性。 如果我们不想过滤任何在whiteList的标签的class属性,可以这么设置: onIgnoreAttr方法用于设置白名单中特定属性的过滤方法。 更多详细教程请看一开头附上的网址。 以上为个人经验,希望能给大家一个参考,也希望大家多多支持。 原文地址:https://blog.csdn.net/qq_45950523/article/details/121123622<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval';style-src 'self' 'unsafe-inline'">
4.针对特殊场景,选择性过滤XSS标签
npm i xss -S
var xss = require("xss")
const option={} //自定义设置
const myxss = new xss.FilterXSS(option);
const line='<script type="text/javascript">alert(1);</script>'
var html = myxss.process(line);
console.log(html); //输出:<script type="text/javascript">alert(1);</script>
const option={
whiteList:{
img:['src','onerror'] //img标签保留src,onerror属性
style:['type'] //style标签默认是不在whileList属性里的,现在添加上去
}
}
const myxss = new xss.FilterXSS(option);
letline='<img src="./123.png" onerror="alert(1);" alt="123">'
let html = myxss.process(line);
console.log(html); //输出:<img src="./123.png" onerror="alert(1);">
line='<style type="text/css">color:white;</style>'
html = myxss.process(line);
console.log(html); //输出:<style type="text/css">color:white;</style>
const option={
stripIgnoreTagBody: ["script","noscript"],
}
const myxss = new xss.FilterXSS(option)
let line='<script type="text/javascript">alert(1);</script>'
let html = myxss.process(line)
console.log(html.length) //输出0,即html被转化为空字符串
line='<noscript>123</noscript>'
html = myxss.process(line)
console.log(html.length) //输出0,即html被转化为空字符串
const option={
onIgnoreTagAttr: function(tag, name, value, isWhiteAttr) {
if (['style','class'].includes(name)) {
return `${name}="${xss.escapeAttrValue(value)}"`
}
},
}
const myxss = new xss.FilterXSS(option);
let line='<div class="box"></div>'
let html = myxss.process(line);
console.log(html); //输出:<div class="box"></div>
总结