innerhtml(innerhtml怎么用)

無論你是React、Angular、Vue.js，還是原生JavaScript開發(fā)者，你的代碼都有可能成為黑客眼中的獵物。

作為一個前端開發(fā)者，我們可能更加關(guān)注性能、SEO、UI/UX，往往會忽視安全問題。

當(dāng)你了解了大型框架是如何讓你對xss攻擊保持開放態(tài)度時，也許你會感覺到很意外。例如，React中的dangerouslySetInnerHTML或者Angular中的bypassSecurityTrust都是一些高危操作。

我們需要記住，就安全而言，前端現(xiàn)在和后端、DevOps一樣承擔(dān)著相同的職責(zé)。前端也可能遭受到成千上萬的惡意攻擊。

常見的攻擊手段

讓我們來了解一下常見的攻擊類型有哪些。

1. 任意文件上傳

這種攻擊方式是將惡意文件上傳到服務(wù)器中并執(zhí)行，從而攻擊系統(tǒng)。攻擊包括：文件系統(tǒng)或者數(shù)據(jù)庫超載、完全接管系統(tǒng)、將攻擊轉(zhuǎn)發(fā)到后端系統(tǒng)或者簡單的破壞。

2. 點(diǎn)擊劫持

這是一種誘導(dǎo)用戶點(diǎn)擊非本站網(wǎng)頁或元素的攻擊方式。這種攻擊可能導(dǎo)致用戶在不經(jīng)意之間提供證書或者敏感信息，下載惡意軟件，訪問惡意網(wǎng)頁，在線購買產(chǎn)品或者被偷偷轉(zhuǎn)移資產(chǎn)。

譯者注：簡單的說就是在用戶觀看到的網(wǎng)站上覆蓋一層透明的惡意網(wǎng)站，誘導(dǎo)用戶點(diǎn)擊惡意網(wǎng)站上的按鈕來觸發(fā)攻擊行為

3. XSS攻擊

這是一種將惡意腳本JS腳本注入到網(wǎng)頁中的攻擊方式。網(wǎng)站上的缺陷使這些攻擊得以成功并廣泛傳播。

4. SQL注入

這是一種通過用戶輸入將惡意的SQL注入到數(shù)據(jù)庫中，進(jìn)而破壞數(shù)據(jù)庫的攻擊方式。

5. Dos攻擊（拒絕服務(wù)）

這是一種通過流量轟炸服務(wù)器，導(dǎo)致正常的用戶無法正常訪問服務(wù)器的攻擊方式。

6. 中間人攻擊或者會話劫持

這是一種攔截客戶端和服務(wù)端之間的通信，從中竊取用戶的密碼、賬號或者任何個人詳細(xì)信息的攻擊方式。

防范手段

攻擊者將會不遺余力的在前端尋找安全漏洞，在本文中，我們將看到一些編寫前端代碼時安全相關(guān)的最佳實(shí)踐。

1. 嚴(yán)格的限制用戶的輸入（第一個攻擊點(diǎn)）

應(yīng)該始終嚴(yán)格的對待用戶輸入，避免諸如SQL注入、點(diǎn)擊劫持等等。因此，在將用戶輸入發(fā)送到服務(wù)端之前，校驗并過濾用戶輸入是很重要的。

可以通過刪除或替換危險的字符來過濾數(shù)據(jù)，例如，使用白名單并轉(zhuǎn)義輸入的數(shù)據(jù)。

但是，我意識到過濾和編碼用戶輸入并不是一件容易的事，因此我們可以使用以下開源庫：

DOMPurify.僅僅使用一個函數(shù)就可以過濾用戶的輸入。同時，也支持自定義的規(guī)則，并且支持在HTML5、SVG、MathML中使用。cure-filters. 它提供方法去過濾HTML、JavaScript、內(nèi)聯(lián)CSS等等。當(dāng)你想利用用戶的輸入生成JavaScript或者CSS時，這個庫特別好用。

如果是文件上傳，請務(wù)必檢查文件類型并且使用文件過濾功能僅允許某些文件類型上傳。

2. 注意隱藏保存瀏覽器內(nèi)存中的數(shù)據(jù)或字段

如果我們利用type="hidden"來隱藏頁面中敏感數(shù)據(jù)，或者把他們放到瀏覽器的localStorage、ssionStorage、cookies時，我們需要謹(jǐn)慎的考慮這些數(shù)據(jù)是否安全。

攻擊者可以輕松訪問添加到瀏覽器中的所有內(nèi)容。攻擊者可以打開開發(fā)工具并更改所有保存在內(nèi)存中的變量。如果你根據(jù)localStorage、ssionStorage、cookies中的值隱藏了身份驗證界面，該怎么辦？

像ZapProxy這樣的工具，可以在攻擊者找到注入腳本的方法后，將這些值暴露給攻擊者，然后攻擊者可以使用它們進(jìn)行進(jìn)一步的攻擊。

因此，避免使用type="hidden"，避免將密鑰、身份驗證令牌等盡可能多的存到瀏覽器的內(nèi)存中。

3. 使用CSP

永遠(yuǎn)不要相信服務(wù)器返回的所有內(nèi)容，在Http header中定義一個強(qiáng)大的CSP策略，僅僅允許受信任的內(nèi)容在瀏覽器中執(zhí)行。

最好有一個白名單列表，即使攻擊者注入了腳本，該腳本和白名單不匹配，它也不會執(zhí)行。

舉個例子:

// headercontent-curity-policy: script-src ‘lf’ https://apis.xyz.com

這里定義我們的Web應(yīng)用僅僅信任https://apis.xyz.com和本身域名的腳本。對于其他域名的資源都會在控制臺中報錯。

你可以在MDN網(wǎng)站上閱讀更詳細(xì)CSP說明。

譯者注：不僅可以在header中設(shè)置csp規(guī)則，你也可以在meta標(biāo)簽中設(shè)置。

4. 開啟XSS保護(hù)模式

如果攻擊者通過某種方式在用戶輸入中插入攻擊代碼，我們可以通過"X-XSS-Protection": "1; mode=block"來告訴瀏覽器阻止響應(yīng)。

大多數(shù)現(xiàn)代瀏覽器默認(rèn)情況下都啟用了XSS保護(hù)模式，但仍建議添加X-XSS-Protection。 這有助于提高不支持CSP的舊版瀏覽器的安全性。

5. 避免典型的XSS錯誤

Dom API innerHTML經(jīng)常被用作XSS攻擊的入口。例如：

document.querySelector('.tagline').innerHTML=nameFromQueryString

任何攻擊者都可以使用上面的代碼行注入惡意代碼。

大家可以考慮使用textContent來代替innerHTML，避免直接生成HTML。如果你不生成HTML，那就不會有JavaScript插入到頁面中，即使你可以在頁面中看到攻擊代碼，但是，什么也不會發(fā)生。

密切關(guān)注Trusted Types(MDN地址)，這是由google程序員開發(fā)出來的，旨在防范所有基于DOM的XSS攻擊的方案。

在React.js中，dangerouslySetInnerHTML可能產(chǎn)生和innerHTML類似的影響。

注意：不要直接將用戶輸入做了innerHTML的值，盡量使用textContent。

另外，我們應(yīng)該正常的設(shè)置http響應(yīng)頭Content-Type和X-Content-Type-Options。例如，請勿將JSON數(shù)據(jù)編碼成text/HTML，以免意外執(zhí)行。

6. 禁用IFrame嵌入

禁用iframe可以幫助我們免受點(diǎn)擊劫持攻擊。我們應(yīng)該在header中添加"X-Frame-Options": "DENY"，來禁止瀏覽器在頁面中渲染iframe。

我們也可以使用CSP指令frame-ancestors，它可以更好的控制我們的頁面可以被哪些父頁面通過iframe的形式來嵌套展示。

7. 通用的錯誤提示

類似"您的密碼有誤"這樣的提示對用戶很友好，同時，他對攻擊者也很友好。他們可以通過服務(wù)端返回的錯誤信息來判斷他下一步需要進(jìn)行什么樣的攻擊。

當(dāng)處理用戶的賬號、郵件、個人信息時，我們應(yīng)該嘗試使用一些模棱兩可的錯誤提示，類似“錯誤的登陸信息”。

8. 使用驗證碼

在對外的公共服務(wù)（登陸、注冊）上使用驗證碼。驗證碼的目的在于幫助我們區(qū)分真人和機(jī)器人，并且也可以阻止DoS攻擊。

9. 設(shè)置Referrer-Policy

當(dāng)我們使用<a>標(biāo)簽或者超鏈接引導(dǎo)用戶離開我們的網(wǎng)站時，確保你在請求header里面添加了"Referrer-Policy": "no-referrer"，或者在<a>標(biāo)簽中添加了rel="noopener" 或rel="noreferrer"屬性。

當(dāng)我們不設(shè)置header或者rel屬性時，目標(biāo)網(wǎng)站就可以獲取到一些用戶相關(guān)的數(shù)據(jù)。

譯者注：rel=noopener保證跳轉(zhuǎn)過去的網(wǎng)站無法通過window.opener竊取原來網(wǎng)頁的信息。rel=noreferrer作用是防止將引用者信息傳遞到目標(biāo)網(wǎng)站。上面提到的策略大家可以去mdn上了解一下MDN Referrer-Policy、MDN Link Type

10. 限制瀏覽器的功能或者API

就像CSP可以限制可信的資源域名一樣，我們也可以限制瀏覽器提供哪些能力給我們用。我們可以利用http header中的Feature-Policy字段來限制使用瀏覽器提供的功能。

提示：禁用一切你不使用的功能

譯者注：Feature-Policy是一個實(shí)驗中的header屬性，目前在chrome瀏覽器中的兼容性尚可，IE和Safari都不支持。具體可以在MDN Feature-Policy中了解。

11. 定期審查npm依賴

經(jīng)常跑一下npm audit來獲取存在漏洞的npm包列表，升級他們避免一些安全問題。

GitHub現(xiàn)在會標(biāo)記出哪些存在漏洞的依賴。我們也可以使用Snyk來自動檢查你的源碼，并且自動升級版本號。

12. 分離你的應(yīng)用

與后端一樣，我們也擁有微服務(wù)架構(gòu)，其中，將單一的Web應(yīng)用轉(zhuǎn)變?yōu)槎鄠€小型前端應(yīng)用的聚合，每個小型前端應(yīng)用可以單獨(dú)運(yùn)行。

相同的原理可以應(yīng)用于前端。 例如，一個Web應(yīng)用可以分為公共部分，身份驗證部分和后臺管理部分，每個應(yīng)用都托管在單獨(dú)的子域中，例如https://public.example.com、https://urs.example.com和https://admin.example.com。這將減少web應(yīng)用中的漏洞。

注意：適當(dāng)?shù)姆指暨€可以防止應(yīng)用程序公共部分出現(xiàn)XSS漏洞，從而防止它自動破壞用戶信息。

13. 盡量避免使用第三方服務(wù)

一行代碼就可以使用類似Google Analytics的第三方服務(wù)，同時，也可能會給你的應(yīng)用帶來漏洞。想一想這些第三方服務(wù)腳本被篡改的情況。

擁有一套健全的CSP策略很重要。大多數(shù)第三方服務(wù)都有定義的CSP指令，因此請務(wù)必添加它們。

同樣，如果可能的話，請確保給你的script標(biāo)簽都加上integrity屬性。子資源完整性功能（SRI）可以驗證腳本的hash值，并確保其未被篡改。

<scriptsrc="https://example.com/example-framework.js"integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux..."crossorigin="anonymous"></script>

譯者注：將使用ba64編碼過后的文件哈希值寫入你所引用的 <script> 或 <link> 標(biāo)簽的 integrity 屬性值中即可啟用的資源完整性校驗功能。

仔細(xì)考慮自動填充字段

存儲在瀏覽器的自動填充里面的用戶個人數(shù)據(jù)對用戶和攻擊者都很方便。

攻擊者添加了第三方的腳本，利用瀏覽器的自動填充來提取用戶的郵箱地址去構(gòu)建追蹤標(biāo)識。他們可以使用這些信息建立用戶瀏覽歷史記錄配置文件，然后將其出售給壞人。

我們許多人甚至都不知道他們的瀏覽器自動填充功能存儲了哪些信息。

提示：禁止將敏感信息自動填入表單

譯者注：MDN中也有一個web安全相關(guān)的專題，大家有興趣可以關(guān)注一下MDN web curity

關(guān)于我

我是一個莫得感情的代碼搬運(yùn)工，每周會更新1至2篇前端相關(guān)的文章，有興趣的老鐵可以掃描下面的二維碼關(guān)注或者直接微信搜索前端補(bǔ)習(xí)班關(guān)注。

精通前端很難，讓我們來一起補(bǔ)補(bǔ)課吧！

好啦，翻譯完畢啦， 原文鏈接在此。