React 的一些最佳安全實踐

語言: CN / TW / HK

時間 2022-08-02 09:23:12 code祕密花園

主題: React 安全漏洞

大家好，我是ConardLi。

React.js、Vue.js 這些現代的前端框架預設已經對安全做了非常多的考慮，但是這仍然不能阻礙我們寫出一些安全漏洞。。。因為框架永遠不能完全限制我們程式設計的靈活性，只要有一定的靈活性存在就意味著有安全風險。

下面我就帶大家一起來看一下，為了保證我們 React 應用的安全性，有哪些值得遵循的最佳實踐。

dangerouslySetInnerHTML

React 會對預設的資料繫結( {} )進行自動轉義來防止 XSS 攻擊，所有資料都會認為是 textContent ：

但是為了保障開發的靈活性，它也給我們提供了一些直接渲染 HTML 的方法，比如 dangerouslySetInnerHTML ：

在把資料傳入 dangerouslySetInnerHTML 之前，一定要確保資料是經過過濾或轉義的，比如可以通過 dompurify.sanitize 進行過濾：

import dompurify from "dompurify";
import "./styles.css";

export default function App() {
  const code = "<input onfocus=alert(1) autofocus />";
  return (
    <div className="App">
      <div dangerouslySetInnerHTML={{ __html: dompurify.sanitize(code) }} />
    </div>
  );
}

避免直接操作 DOM 注入 HTML

除了 dangerouslySetInnerHTML ，我們當然還可以直接通過原生的 DOM API 來插入 HTML ：

另外也可以通過 ref 來訪問 DOM 來插入 HTML ：

這兩個操作都是相當危險的操作，推薦大家既然用了 React 就要儘量用 React 的編寫方式來寫程式碼，儘量不要直接操作 DOM ，如果你確實要渲染富文字，還是推薦用上面提到的 dangerouslySetInnerHTML ，而且資料要經過過濾或轉義。

服務端渲染

當使用服務端渲染函式時，資料繫結也會提供自動內容轉義，比如 ReactDOMServer.renderToString() 和 ReactDOMServer.renderToStaticMarkup() 。

在將字串傳送給客戶端進行注水之前，避免將字串直接拼接到 renderToStaticMarkup() 的輸出上。

為了避免 XSS ，不要將未過濾的資料與 renderToStaticMarkup() 的輸出連線在一起:

app.get("/", function (req, res) {
  return res.send(
    ReactDOMServer.renderToStaticMarkup(
      React.createElement("h1", null, "Hello ConardLi!")
    ) + otherData
  );
});

JSON 注入

將 JSON 資料與伺服器端渲染的 React 頁面一起傳送是很常見的。始終對 < 字元進行轉義來避免注入攻擊：

window.JSON_DATA = ${JSON.stringify(jsonData).replace( /</g, '\\u003c')}

URL 注入

前面幾個基本上都是直接渲染未經過濾的富文字導致的 XSS ，實際上通過 URL 偽協議也可以執行 javascript 指令碼：

因此所有需要注入到程式碼裡的 URL 引數，我們都要做好 URL 的合法性驗證，千萬不要直接注入進去：

import "./styles.css";

function isSafe(url) {
  if (url && !url.startsWith("http")) {
    return null;
  }
  // ... 其他判斷
}

export default function App() {
  const code = "javascript:alert('xss')";
  return (
    <div className="App">
      測試 URL 注入
      <a href={isSafe(code)}>一個平平無奇的連結</a>
    </div>
  );
}

避免有漏洞的 React 版本

React 以前也被測試出有比較高危的安全漏洞，建議經常保持更新，來避免這些有漏洞的 React 版本：

避免有漏洞的其他依賴

一般我們的專案都會依賴大量的開原始碼，有時漏洞並不是我們寫出來的，而是這些依賴帶進來的，想詳細瞭解可以看看我之前寫的這篇文章：

你必須要注意的依賴安全漏洞

因此我們無論使用任何框架，定期進行依賴更新都是不錯的選擇。

Eslint React 安全配置

推薦大家通過 Eslint 的 React 安全配置（http://github.com/snyk-labs/eslint-config-react-security/）來對程式碼進行約束，它會自動幫助我們發現一些程式碼中的安全風險。

最後

參考：

http://snyk.io/learn/javascript-security/
http://snyk.io/blog/10-react-security-best-practices/

如果你有任何想法，歡迎在留言區和我留言，如果這篇文章幫助到了你，歡迎點贊和關注。

希望本文對你所有幫助～

點贊 和 在看 是最大的支援:arrow_down::heart::arrow_down:

「其他文章」