React 的一些安全實踐

大家好，我是 ConardLi。

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

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

dangerouslySetInnerHTML

React 會對默認的數(shù)據(jù)綁定({})進行自動轉義來防止 XSS 攻擊，所有數(shù)據(jù)都會認為是 textContent：

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

在把數(shù)據(jù)傳入 dangerouslySetInnerHTML 之前，一定要確保數(shù)據(jù)是經(jīng)過過濾或轉義的，比如可以通過 dompurify.sanitize 進行過濾：

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

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

避免直接操作 DOM 注入 HTML

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

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

這兩個操作都是相當危險的操作，推薦大家既然用了 React 就要盡量用 React 的編寫方式來寫代碼，盡量不要直接操作 DOM，如果你確實要渲染富文本，還是推薦用上面提到的 dangerouslySetInnerHTML，而且數(shù)據(jù)要經(jīng)過過濾或轉義。

服務端渲染

當使用服務端渲染函數(shù)時，數(shù)據(jù)綁定也會提供自動內容轉義，比如 ReactDOMServer.renderToString() 和 ReactDOMServer.renderToStaticMarkup()。

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

為了避免 XSS，不要將未過濾的數(shù)據(jù)與 renderToStaticMarkup() 的輸出連接在一起:

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

JSON 注入

將 JSON 數(shù)據(jù)與服務器端渲染的 React 頁面一起發(fā)送是很常見的。始終對 < 字符進行轉義來避免注入攻擊：

window.JSON_DATA?=?${JSON.stringify(jsonData).replace(?/

URL 注入

前面幾個基本上都是直接渲染未經(jīng)過濾的富文本導致的 XSS，實際上通過 URL 偽協(xié)議也可以執(zhí)行 javascript 腳本：

因此所有需要注入到代碼里的 URL 參數(shù)，我們都要做好 URL 的合法性驗證，千萬不要直接注入進去：

import?"./styles.css";

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

export?default?function?App()?{
??const?code?=?"javascript:alert('xss')";
??return?(
????"App">
??????測試?URL?注入
??????一個平平無奇的鏈接
????