板块导航

浏览  : 348
回复  : 4

[原生js] 防御XSS攻击-encode用户输入内容的重要性

[复制链接]
cat77的头像 楼主
发表于 2017-1-11 15:13:24 | 显示全部楼层 |阅读模式
  一、开场先科普下XSS

  跨站脚本攻击 (Cross Site Scripting),为不和 层叠样式表 (Cascading Style Sheets, CSS )的缩写混淆,故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的。

  二、直接上代码实例
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  6. <title>encode防止xss攻击</title>
  7. </head>
  8. <body>
  9.     <input type="text" id="myInput" />
  10.     <button onclick="toSubmit();">提交</button>
  11.     <p id="myText" class="demo">hello world!</p>

  12.     <script type="text/JavaScript">
  13.         function toSubmit(){
  14.             var myText = document.getElementById("myText"),
  15.                 myInput = document.getElementById("myInput"),
  16.                 inputValue = myInput.value;

  17.             myText.innerHTML = inputValue;
  18.         }

  19.     </script>
  20. </body>
  21. </html>
复制代码

  实例解释:这是网站生产环境抽离出来的简化代码。在公司的产品中,有很多输入框提供给用户输入一些自定义字符串。方便用户的同时,也会招惹一些黑客过来捣乱。最简单的就是xss注入攻击。

  比如上面的实例,我在输入框直接输入内容 <h1>wall</h1> ,得到的结果如下:
1.png

  这种结果,肯定不是产品所想要的。

  进一步鼓捣,输入内容 <script>alert('wall');</script>

1.png

  如果这段字符串是保存在数据库里。那么下次用户刷新这个页面,alert方法将会被执行,也就是会弹出 wall 这个信息。

  因为能插入js代码,那这个想象空间就很大了,几乎很多事都能干。

  最简单的就是用js获取访问当前网站的用户的document.cookie,然后ajax发送到信息收集网站,那么用户就等于在裸泳了。

  三、解决方式-对字符串进行转义后再输出

  1.在存储进数据库的时候,对字符串进行encode

  这种方式可以解决一部分问题,但是不够灵活。因为字符串有可能输出在html,也有可能输出在JavaScript代码中。

  2.在使用字符串的时候进行encode

  这种方式是根据使用场景,在前端输出时,按需求进行encode,灵活应对。

  四、直接上encode方法
  1. function encodeHtml(html){
  2.     return html && html.replace ?
  3.         (
  4.         html.replace(/&/g, "&") //转换&符号
  5.             .replace(/ /g, " ") // 转换空格
  6.             .replace(/\b +/g, " ") // 转换多个空格为单个空格
  7.             .replace(/</g, "<") // 转换小于符号
  8.             .replace(/>/g, ">") // 转换大于符号
  9.             .replace(/\\/g, "\") // 转换斜杠符号
  10.             .replace(/\'/g, "'") // 转换单引号
  11.             .replace(/\"/g, """) // 转换双引号
  12.             .replace(/\n/g, "<br/>") // 转换换行符号
  13.             .replace(/\r/g, "") //转换回车符号
  14.         )
  15.         :
  16.         html;
  17. }
复制代码

  代码的作用是把对应的特殊符号,转换为转义字符,而不是直接插入html中。

  这样,不管用户输入什么内容,都可以直接转换成字符串输出在html中。

  比如再次输入内容 <script>alert('wall');</script> ,得到的结果如下:
1.png

  perfect!直接把xss漏洞给堵上了!

  五、科普下转义字符
1.png

  更多内容,可以查看 HTML转义字符表

  最后,附上完整的测试代码
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  6. <title>encode防止xss攻击</title>
  7. </head>
  8. <body>
  9.     <input type="text" id="myInput" />
  10.     <button onclick="toSubmit();">提交</button>
  11.     <p id="myText" class="demo">hello world!</p>

  12.     <script type="text/JavaScript">
  13.         function toSubmit(){
  14.             var myText = document.getElementById("myText"),
  15.                 myInput = document.getElementById("myInput"),
  16.                 inputValue = myInput.value;

  17.             myText.innerHTML = encodeHtml(inputValue);
  18.         }

  19.         function encodeHtml(html){
  20.             return html && html.replace ?
  21.                 (
  22.                 html.replace(/&/g, "&") //转换&符号
  23.                     .replace(/ /g, " ") // 转换空格
  24.                     .replace(/\b +/g, " ") // 转换多个空格为单个空格
  25.                     .replace(/</g, "<") // 转换小于符号
  26.                     .replace(/>/g, ">") // 转换大于符号
  27.                     .replace(/\\/g, "\") // 转换斜杠符号
  28.                     .replace(/\'/g, "'") // 转换单引号
  29.                     .replace(/\"/g, """) // 转换双引号
  30.                     .replace(/\n/g, "<br/>") // 转换换行符号
  31.                     .replace(/\r/g, "") //转换回车符号
  32.                 )
  33.                 :
  34.                 html;
  35.         }

  36.     </script>
  37. </body>
  38. </html>
复制代码

相关帖子

发表于 2017-1-11 15:13:54 来自手机 | 显示全部楼层
jq现在应该算是最火的js框架类了吧?确实很强大extjs基于Yahoo UI的扩展,界面布局和效果方面很给力,但就是有点复杂
使用道具 举报

回复

发表于 2017-1-11 15:13:56 | 显示全部楼层
经常看到”cat77“发帖,辛苦了
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-62432134
  • 邮件:lispa@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部