React 應用中最多見的XSS漏洞以及防護手段

時間 2019-11-10

標籤 react 應用多見 xss 漏洞以及防護手段欄目 React 简体版

原文原文鏈接

React 應用中最多見的XSS漏洞以及防護手段翻譯自the-most-common-xss-vulnerability-in-react-js-applications，從屬於筆者的Web 前端入門與最佳實踐中的React入門與最佳實踐系列總綱系列文章，若是你是新手，推薦閱讀筆者的Web前端從入門菜鳥到實踐老司機所須要的資料與指南合集以得到更多的資料。若是你但願瞭解更多安全方面的知識，推薦閱讀筆者的Web應用安全基礎。javascript

筆者一直是堅決地React技術棧的使用者，所以也會關注React應用安全相關的話題。筆者在我本身的React+Redux+Webpack2腳手架的第三層級也使用了大量的服務端渲染/同構直出的技術，而本文便是闡述該方法可能存在的某個XSS漏洞。服務端渲染即容許咱們在服務端進行HTML渲染，而且在服務端請求部分應用數據追加到頁面上而後隨着頁面一塊兒返回給用戶，從而減小用戶的首屏等待時間，而且對於搜索引擎有更友好的優化。
不過若是有安全背景的朋友確定已經可以察覺到問題了，直接將數據不通過濾地放到頁面上勢必會帶來潛在的安全問題，譬如咱們最經常使用的同構頁面的代碼:php

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字符串，而後以全局變量的方式插入到了頁面中。不過若是你要序列化的對象是以下這樣呢:html

{
  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內容，不過這樣比較危險）java
當你打算序列化某些狀態而且傳給客戶端的時候，你一樣須要進行HTML實體編碼node

Yahoo的工程師已經提供了一個Serialize JavaScript模塊幫咱們輕鬆地進行JSON轉碼與過濾，咱們能夠直接使用npm install --save serialize-javascript導入該模塊，而後使用serialize方法替代內置的JSON.stringify方法:
react