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

服务端渲染即允许我们在服务端进行HTML渲染，并且在服务端请求部分应用数据追加到页面上然后随着页面一起返回给用户，从而减少用户的首屏等待时间，并且对于搜索引擎有更友好的优化。
不过如果有安全背景的朋友肯定已经能够察觉到问题了，直接将数据不经过滤地放到页面上势必会带来潜在的安全问题，譬如我们最常用的同构页面的代码:

export default (html, initialState = {}, scripts = [], styles = []) => {
  return ` <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> ${styleMapper(styles)} </head> <body> <div id="root">${html}</div> </body> ${scriptMapper(scripts)} <script> window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}; </script> </html> `;
};

我们直接使用JSON.stringfy将JavaScript对象转化为了JSON字符串，然后以全局变量的方式插入到了页面中。不过如果你要序列化的对象是如下这样呢:

{
  user: {
    username: "NodeSecurity",
    bio: "as</script><script>alert('You have an XSS vulnerability!')</script>"
  }
}

你就会很开心的看到你得到了某个弹窗。关于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方法:

相关文章

联系

伦经理