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

React 应用中最常见的XSS漏洞以及防御手段翻译自the-most-common-xss-vulnerability-in-react-js-applications，从属于笔者的Web 前端入门与最佳实践中的React入门与最佳实践系列总纲系列文章，如果你是新手，推荐阅读笔者的Web前端从入门菜鸟到实践老司机所需要的资料与指南合集以获得更多的资料。如果你希望了解更多安全方面的知识，推荐阅读笔者的Web应用安全基础。

笔者一直是坚定地React技术栈的使用者，因此也会关注React应用安全相关的话题。笔者在我自己的React+Redux+Webpack2脚手架的第三层级也使用了大量的服务端渲染/同构直出的技术，而本文即是阐述该方法可能存在的某个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方法:

原文链接：https://www.f2er.com/react/305378.html

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

猜你在找的React相关文章