前后端安全分類：

1、前端安全：發(fā)生在瀏覽器、單頁面應(yīng)用、web頁面的安全問題，比如跨站腳本攻擊xss就是前端安全問題

2、后端安全：發(fā)生在后端服務(wù)器、應(yīng)用、服務(wù)當(dāng)中的安全問題，比如：SQL注入漏洞發(fā)生在后端

前端安全攻擊手段

1、XSS攻擊

2、CSRF攻擊

3、點(diǎn)擊劫持

4、iframe帶來的風(fēng)險

5、不安全的第三方依賴包

XSS攻擊

XSS 即（Cross Site Scripting）中文名稱為：跨站腳本攻擊。

惡意攻擊者在web頁面中會插入一些惡意的script代碼。當(dāng)目標(biāo)網(wǎng)站、目標(biāo)用戶瀏覽器渲染HTML文檔的過程中，出現(xiàn)了不被預(yù)期的腳本指令并執(zhí)行時，XSS就發(fā)生了，因此達(dá)到惡意攻擊用戶的目的。

根據(jù)攻擊的來源，XSS 攻擊可分為反射型、存儲型和 DOM 型三種：

反射型XSS：發(fā)出請求時，XSS代碼出現(xiàn)在URL中，作為輸入提交到服務(wù)器端，服務(wù)器端解析后響應(yīng)，XSS代碼隨響應(yīng)內(nèi)容一起傳回給瀏覽器，最后瀏覽器解析執(zhí)行XSS代碼。這個過程像一次反射，故叫反射型XSS。

1、用戶A給用戶B發(fā)送一個惡意構(gòu)造了Web的URL。

2、用戶B點(diǎn)擊并查看了這個URL。

3、用戶B獲取到一個具有漏洞的HTML頁面并顯示在本地瀏覽器中。

4、漏洞HTML頁面執(zhí)行惡意java script腳本，將用戶B信息盜取發(fā)送給用戶A，或者篡改用戶B看到的數(shù)據(jù)等

反射型XSS防御：

我們可以通過html轉(zhuǎn)義來防范，最好是采用成熟的轉(zhuǎn)義庫處理

攻擊者盜用了你的身份，以你的名義發(fā)送惡意請求，對服務(wù)器來說這個請求是完全合法的，但是卻完成了攻擊者所期望的一個操作，比如以你的名義發(fā)送郵件、發(fā)消息，盜取你的賬號，添加系統(tǒng)管理員，甚至于購買商品、虛擬貨幣轉(zhuǎn)賬等。 如下：其中Web A為存在CSRF漏洞的網(wǎng)站，Web B為攻擊者構(gòu)建的惡意網(wǎng)站，User C為Web A網(wǎng)站的合法用戶

存儲型XSS：存儲型XSS和反射型XSS的差別僅在于，提交的代碼會存儲在服務(wù)器端，下次請求目標(biāo)頁面時不用再提交XSS代碼，這樣，每一個訪問特定網(wǎng)頁的用戶都會被攻擊

1、用戶A在網(wǎng)頁上創(chuàng)建了某個賬戶，并且賬戶信息中包含XSS代碼。

2、用戶B訪問該網(wǎng)站查看XSS代碼賬戶詳情頁面。

3、服務(wù)端返回賬戶詳情頁面，和帶XSS賬戶信息。

4、用戶B瀏覽器執(zhí)行XSS代碼，將用戶B信息盜取發(fā)送給用戶A，或者篡改用戶B看到的數(shù)據(jù)等。

存儲型XSS攻擊防范：

1. 后端需要對提交的數(shù)據(jù)進(jìn)行過濾。

2. 前端也可以做一下處理方式，比如對script標(biāo)簽，將特殊字符替換成HTML編碼這些等。

DOM-based型XSS：DOM型XSS是基于DOM文檔對象模型的一種漏洞,通過 HTML DOM，通過植入js代碼，造成dom的更改，因此造成了XSS-DOM漏洞，所以DOM類型的XSS可能是反射型也可能是儲存型

1、用戶B訪問網(wǎng)站url中帶有XSS代碼參數(shù)。

2、瀏覽器下載該網(wǎng)站java script腳本。

3、java script腳本有個方法獲取URL中XSS代碼參數(shù)，并且用innerHtml渲染在dom中。

4、觸發(fā)XSS代碼，造成XSS攻擊，cookie數(shù)據(jù)失竊。

DOM 型 XSS 攻擊，實(shí)際上就是網(wǎng)站前端 java script 代碼本身不夠嚴(yán)謹(jǐn)，把不可信的數(shù)據(jù)當(dāng)作代碼執(zhí)行了。

DOM 型 XSS防御：

1、在使用 .innerHTML、.outerHTML、document.write() 時要特別小心，不要把不可信的數(shù)據(jù)作為 HTML 插到頁面上，而應(yīng)盡量使用 .textContent、.setAttribute() 等。

2、在使用 .innerHTML、.outerHTML、document.write() 時要特別小心，不要把不可信的數(shù)據(jù)作為 HTML 插到頁面上，而應(yīng)盡量使用 .textContent、.setAttribute() 等。

3、在使用 .innerHTML、.outerHTML、document.write() 時要特別小心，不要把不可信的數(shù)據(jù)作為 HTML 插到頁面上，而應(yīng)盡量使用 .textContent、.setAttribute() 等。

4、Http Only cookie

5、對產(chǎn)品輸入要求格式嚴(yán)謹(jǐn)檢查過濾

CSRF攻擊

 攻擊者盜用了你的身份，以你的名義發(fā)送惡意請求，對服務(wù)器來說這個請求是完全合法的，但是卻完成了攻擊者所期望的一個操作，比如以你的名義發(fā)送郵件、發(fā)消息，盜取你的賬號，添加系統(tǒng)管理員，甚至于購買商品、虛擬貨幣轉(zhuǎn)賬等。 如下：其中Web A為存在CSRF漏洞的網(wǎng)站，Web B為攻擊者構(gòu)建的惡意網(wǎng)站，User C為Web A網(wǎng)站的合法用戶

CSRF攻擊防御：

1、驗(yàn)證 HTTP Referer 字段

2、使用 token驗(yàn)證

3、顯示驗(yàn)證方式：添加驗(yàn)證碼、密碼等

4、涉及到數(shù)據(jù)修改操作嚴(yán)格使用 post 請求而不是 get 請求

點(diǎn)擊劫持攻擊：

  點(diǎn)擊劫持是一種視覺上的欺騙手段。攻擊者使用一個透明的、不可見的iframe，覆蓋在一個網(wǎng)頁上，然后誘使用戶在網(wǎng)頁上進(jìn)行操作，此時用戶將在不知情的情況下點(diǎn)擊透明的iframe頁面。通過調(diào)整iframe頁面的位置，可以誘使用戶恰好點(diǎn)擊在iframe頁面的一些功能性按鈕上。

一個簡單的點(diǎn)擊劫持例子，就是當(dāng)你點(diǎn)擊了一個不明鏈接之后，自動關(guān)注了某一個人的博客或者訂閱了視頻

點(diǎn)擊劫持防御

1、X-Frame-Options瀏覽器機(jī)制：X-Frame-Options HTTP響應(yīng)頭是用來給瀏覽器指示允許一個頁面能否在<frame>、<iframe>、<object>中展現(xiàn)的標(biāo)記，有三個可選的值：DENY：瀏覽器會拒絕當(dāng)前頁面加載任何frame頁面（即使是相同域名的頁面也不允許）SAMEORIGIN：允許加載frame頁面，但是frame頁面的地址只能為同源域名下的頁面ALLOW-FROM：可以加載指定來源的frame頁面（可以定義frame頁面的地址）但這個缺陷就是chrome、Safari是不支持ALLOW-FROM語法！

2、使用認(rèn)證碼認(rèn)證用戶：點(diǎn)擊劫持漏洞通過偽造網(wǎng)站界面進(jìn)行攻擊，網(wǎng)站開發(fā)人員可以通過認(rèn)證碼識別用戶，確定是用戶發(fā)出的點(diǎn)擊命令才執(zhí)行相應(yīng)操作。識別用戶的方法中最有效的方法是認(rèn)證碼認(rèn)證。例如，在網(wǎng)站上廣泛存在的發(fā)帖認(rèn)證碼，要求用戶輸入圖形中的字符，輸入某些圖形的特征等

3、 使用 FrameBusting 代碼“：使用 java script 腳本阻止惡意網(wǎng)站載入網(wǎng)頁。如果檢測到網(wǎng)頁被非法網(wǎng)頁載入，就執(zhí)行自動跳轉(zhuǎn)功能。如果用戶瀏覽器禁用java script腳本，那么FrameBusting代碼也無法正常運(yùn)行。所以，該類代碼只能提供部分保障功能

iframe 帶來的風(fēng)險

有些時候我們的前端頁面需要用到第三方提供的頁面組件，通常會以iframe的方式引入。典型的例子是使用iframe在頁面上添加第三方提供的廣告、天氣預(yù)報、社交分享插件等等

iframe本身不受我們控制，那么如果iframe中的域名因?yàn)檫^期而被惡意攻擊者搶注，或者第三方被黑客攻破，iframe中的內(nèi)容被替換掉了，從而利用用戶瀏覽器中的安全漏洞下載安裝木馬、惡意勒索軟件等等，這問題可就大了

iframe防御：

iframe有了一個叫做sandbox的安全屬性，通過它可以對iframe的行為進(jìn)行各種限制，在 iframe 元素中添加上這個關(guān)鍵詞就行，另外，sandbox也提供了豐富的配置參數(shù)，我們可以進(jìn)行較為細(xì)粒度的控制。一些典型的參數(shù)如下：

allow-forms：允許iframe中提交form表單

allow-popups：允許iframe中彈出新的窗口或者標(biāo)簽頁（例如，window.open()，showModalDialog()，target=”_blank”等等）

allow-scripts：允許iframe中執(zhí)行java script

allow-same-origin：允許iframe中的網(wǎng)頁開啟同源策略

如果你只是添加上這個屬性而保持屬性值為空，那么瀏覽器將會對 iframe 實(shí)施史上最嚴(yán)厲的調(diào)控限制

不安全的第三方依賴

項(xiàng)目里面使用了很多第三方的依賴，不論應(yīng)用自己的代碼的安全性有多高，如果這些來自第三方的代碼有安全漏洞，那么對應(yīng)用整體的安全性依然會造成嚴(yán)峻的挑戰(zhàn)。jQuery就存在多個已知安全漏洞，Node.js也有一些已知的安全漏洞

第三方依賴包防御：

手動檢查這些第三方代碼有沒有安全問題是個苦差事，主要是因?yàn)閼?yīng)用依賴的這些組件數(shù)量眾多，手工檢查太耗時，有自動化的工具可以使用，比如NSP(Node Security Platform)，Snyk、sonarQubej檢測工具等等

vue對前端安全的處理：Vue 的安全措施

當(dāng)然還存在很多別的攻擊手段，比如：

Https 也可能存在的風(fēng)險（強(qiáng)制讓HTTPS降級回HTTP，從而繼續(xù)進(jìn)行中間人攻擊）

本地存儲數(shù)據(jù)泄露（盡可能不在前端存儲任何敏感、機(jī)密的數(shù)據(jù)）

cdn劫持（攻擊者劫持了CDN，或者對CDN中的資源進(jìn)行了污染）