请选择 进入手机版 | 继续访问电脑版

技术控

    今日:70| 主题:53605
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] React 应用中最常见的 XSS 漏洞以及防御手段

[复制链接]
让寂寞燃烧 发表于 2016-11-30 03:25:36
172 2

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
笔者一直是坚定地React技术栈的使用者,因此也会关注React应用安全相关的话题。笔者在我自己的 React+Redux+Webpack2 脚手架的第三层级也使用了大量的服务端渲染/同构直出的技术,而本文即是阐述该方法可能存在的某个XSS漏洞。服务端渲染即允许我们在服务端进行HTML渲染,并且在服务端请求部分应用数据追加到页面上然后随着页面一起返回给用户,从而减少用户的首屏等待时间,并且对于搜索引擎有更友好的优化。
   不过如果有安全背景的朋友肯定已经能够察觉到问题了,直接将数据不经过滤地放到页面上势必会带来潜在的安全问题,譬如我们最常用的 同构页面的代码 :
  1. export default (html, initialState = {}, scripts = [], styles = []) => {
  2.   return `
  3.     <!doctype html>
  4.     <html>
  5.       <head>
  6.         <meta charset="utf-8">
  7.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  8.         ${styleMapper(styles)}
  9.       </head>
  10.       <body>
  11.         <div id="root">${html}</div>        
  12.       </body>
  13.       ${scriptMapper(scripts)}
  14.       <script>
  15.         window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
  16.       </script>
  17.     </html>
  18.   `;
  19. };
复制代码
  我们直接使用 JSON.stringfy 将JavaScript对象转化为了JSON字符串,然后以全局变量的方式插入到了页面中。不过如果你要序列化的对象是如下这样呢:
  1. {
  2.   user: {
  3.     username: "NodeSecurity",
  4.     bio: "as</script><script>alert('You have an XSS vulnerability!')</script>"
  5.   }
  6. }
复制代码
你就会很开心的看到你得到了某个弹窗。关于XSS的知识点笔者不在这里赘述,虽然我们的后台开发人员肯定也在他们的接口层与数据库层完成了敏感字段过滤,不过千里之堤毁于蚁穴,我们不能放过任何一处有可能产生问题的地方。
   对于XSS的防御也并不是新鲜的话题,著名的 Open Web Application Security Project 项目就为我们提供了很多关于 防止XSS攻击 的建议,概括而言,我们需要在应用中做到如下几点:
  
       
  •   所有的用户输入都需要经过HTML实体编码,这里React已经帮我们做了 很多 ,它会在运行时动态创建DOM节点然后填入文本内容(你也可以强制设置HTML内容,不过这样比较危险)
       
  • 当你打算序列化某些状态并且传给客户端的时候,你同样需要进行HTML实体编码
      
      Yahoo的工程师已经提供了一个 Serialize JavaScript 模块帮我们轻松地进行JSON转码与过滤,我们可以直接使用 npm install --save serialize-javascript 导入该模块,然后使用 serialize 方法替代内置的 JSON.stringify 方法:
   

React 应用中最常见的 XSS 漏洞以及防御手段

React 应用中最常见的 XSS 漏洞以及防御手段



上一篇:Internet of Things Temperature & Humidity Monitor
下一篇:Node-ChakraCore and VM Neutrality in Node.js
静琪 发表于 2016-11-30 07:48:47
让寂寞燃烧有品位!
回复 支持 反对

使用道具 举报

ptyks 发表于 2016-12-18 02:49:35
专业抢沙发的!哈哈
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表