React 的一些最佳安全實踐

語言: CN / TW / HK

大家好,我是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 安全配置

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

最後

參考:

  • https://snyk.io/learn/javascript-security/

  • https://snyk.io/blog/10-react-security-best-practices/

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

希望本文對你所有幫助~

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