摘要：可能造成危害利用已通過(guò)認(rèn)證的用戶權(quán)限更新設(shè)定信息等利用已通過(guò)認(rèn)證的用戶權(quán)限購(gòu)買(mǎi)商品利用已通過(guò)的用戶權(quán)限在留言板上發(fā)表言論。二說(shuō)說(shuō)你說(shuō)了解的前端性能優(yōu)化方面減少請(qǐng)求合并文件精靈減少查詢查詢完成之前瀏覽器不能從這個(gè)主機(jī)下載任何任何文件。

常用攻擊手段：SQL注入、XSS(Cross Site Script)，跨站腳本攻擊、CSRF(Cross Site Request Forgery)，跨站點(diǎn)偽造請(qǐng)求

xss: 跨站腳本攻擊（Cross Site Scripting）是最常見(jiàn)和基本的攻擊 WEB 網(wǎng)站方法，攻擊者通過(guò)注入非法的 html 標(biāo)簽或者 javascript 代碼，從而當(dāng)用戶瀏覽該網(wǎng)頁(yè)時(shí)，控制用戶瀏覽器。

(一) 類別（三種）

DOM xss :

DOM即文本對(duì)象模型，使用DOM可以允許程序和腳本動(dòng)態(tài)的訪問(wèn)和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。這種方式不需要服務(wù)器解析響應(yīng)的直接參與，觸發(fā)XSS靠的是瀏覽器端的DOM解析，可以認(rèn)為完全是客戶端的事情。

反射型 xss :

反射型XSS也被稱為非持久性XSS，是現(xiàn)在最容易出現(xiàn)的一種XSS漏洞。發(fā)出請(qǐng)求時(shí)，XSS代碼出現(xiàn)在URL中，最后輸入提交到服務(wù)器，服務(wù)器解析后在響應(yīng)內(nèi)容中出現(xiàn)這段XSS代碼，最后瀏覽器解析執(zhí)行。

存儲(chǔ)型 Xss

存儲(chǔ)型XSS又被稱為持久性XSS，它是最危險(xiǎn)的一種跨站腳本，相比反射型XSS和DOM型XSS具有更高的隱蔽性，所以危害更大，它不需要用戶手動(dòng)觸發(fā)。 當(dāng)攻擊者提交一段XSS代碼后，被服務(wù)器端接收并存儲(chǔ)，當(dāng)所有瀏覽者訪問(wèn)某個(gè)頁(yè)面時(shí)都會(huì)被XSS，其中最典型的例子就是留言板。

（二） Xss危害

利用虛假輸入表單騙取用戶個(gè)人信息。

利用腳本竊取用戶的 Cookie 值，被害者在不知情的情況下，幫助攻擊者發(fā)送惡意請(qǐng)求。

（三） 抵御Xss危害

httpOnly: 在 cookie 中設(shè)置 HttpOnly 屬性，使js腳本無(wú)法讀取到 cookie 信息。

前端負(fù)責(zé)輸入檢查，后端也要做相同的過(guò)濾檢查。

某些情況下，不能對(duì)用戶數(shù)據(jù)進(jìn)行嚴(yán)格過(guò)濾時(shí)，需要對(duì)標(biāo)簽進(jìn)行轉(zhuǎn)換

跨站點(diǎn)請(qǐng)求偽造（Cross-Site Request Forgeries），冒充用戶發(fā)起請(qǐng)求（在用戶不知情的情況下）， 完成一些違背用戶意愿的事情（如修改用戶信息，刪初評(píng)論等）。

1、可能造成危害：

利用已通過(guò)認(rèn)證的用戶權(quán)限更新設(shè)定信息等；

利用已通過(guò)認(rèn)證的用戶權(quán)限購(gòu)買(mǎi)商品；

利用已通過(guò)的用戶權(quán)限在留言板上發(fā)表言論。

2、防御：

驗(yàn)證碼；強(qiáng)制用戶必須與應(yīng)用進(jìn)行交互，才能完成最終請(qǐng)求。

盡量使用 post ，限制 get 使用；get 太容易被拿來(lái)做 csrf 攻擊；

請(qǐng)求來(lái)源限制，此種方法成本最低，但是并不能保證 100% 有效，因?yàn)榉?wù)器并不是什么時(shí)候都能取到 Referer，而且低版本的瀏覽器存在偽造 Referer 的風(fēng)險(xiǎn)。

token 驗(yàn)證 CSRF 防御機(jī)制是公認(rèn)最合適的方案。

使用token的原理：

第一步：后端隨機(jī)產(chǎn)生一個(gè) token，把這個(gè)token 保存到 session 狀態(tài)中；同時(shí)后端把這個(gè)token 交給前端頁(yè)面；

第二步：前端頁(yè)面提交請(qǐng)求時(shí)，把 token 加入到請(qǐng)求數(shù)據(jù)或者頭信息中，一起傳給后端；

后端驗(yàn)證前端傳來(lái)的 token 與 session 是否一致，一致則合法，否則是非法請(qǐng)求。

content方面

減少HTTP請(qǐng)求：合并文件、CSS精靈、inline Image

減少DNS查詢：DNS查詢完成之前瀏覽器不能從這個(gè)主機(jī)下載任何任何文件。方法：DNS緩存、將資源分布到恰當(dāng)數(shù)量的主機(jī)名，平衡并行下載和DNS查詢

避免重定向：多余的中間訪問(wèn)

使Ajax可緩存

非必須組件延遲加載

未來(lái)所需組件預(yù)加載

減少DOM元素?cái)?shù)量

將資源放到不同的域下：瀏覽器同時(shí)從一個(gè)域下載資源的數(shù)目有限，增加域可以提高并行下載量

減少iframe數(shù)量

不要404

Server方面

使用CDN

添加Expires或者Cache-Control響應(yīng)頭

對(duì)組件使用Gzip壓縮

配置ETag

Flush Buffer Early

Ajax使用GET進(jìn)行請(qǐng)求

避免空src的img標(biāo)簽

Cookie方面

減小cookie大小

引入資源的域名不要包含cookie

css方面

將樣式表放到頁(yè)面頂部

不使用CSS表達(dá)式

不使用IE的Filter

Javascript方面

將腳本放到頁(yè)面底部

將javascript和css從外部引入

壓縮javascript和css

刪除不需要的腳本

減少DOM訪問(wèn)

合理設(shè)計(jì)事件監(jiān)聽(tīng)器

圖片方面

優(yōu)化圖片：根據(jù)實(shí)際顏色需要選擇色深、壓縮

優(yōu)化css精靈

不要在HTML中拉伸圖片

保證favicon.ico小并且可緩存

減少http請(qǐng)求次數(shù)：

CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；

網(wǎng)頁(yè)Gzip，CDN托管，data緩存 ，圖片服務(wù)器。

前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，

前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù)

用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。

當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style

少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。

減少I(mǎi)O讀取操作

避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)

圖片預(yù)加載，將樣式表放在頂部

將腳本放在底部 加上時(shí)間戳

避免在頁(yè)面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來(lái)，顯示比div+css布局慢

合理的title、description、keywords：搜索對(duì)這三項(xiàng)的權(quán)重逐個(gè)減??；

title值強(qiáng)調(diào)重點(diǎn)即可，重要關(guān)鍵詞出現(xiàn)不要超過(guò)2次，而且要靠前，不同頁(yè)面title要有所不同；

description把頁(yè)面內(nèi)容高度概括，長(zhǎng)度合適，不可過(guò)分堆砌關(guān)鍵詞，不同頁(yè)面description有所不同；

keywords列舉出重要關(guān)鍵詞即可

語(yǔ)義化的HTML代碼，符合W3C規(guī)范：語(yǔ)義化代碼讓搜索引擎容易理解網(wǎng)頁(yè)

重要內(nèi)容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對(duì)抓取長(zhǎng)度有限制，保證重要內(nèi)容一定會(huì)被抓取

重要內(nèi)容不要用js輸出：爬蟲(chóng)不會(huì)執(zhí)行js獲取內(nèi)容

少用iframe：搜索引擎不會(huì)抓取iframe中的內(nèi)容

非裝飾性圖片必須加alt

提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個(gè)重要指標(biāo)

標(biāo)題與關(guān)鍵詞

設(shè)置有吸引力切合實(shí)際的標(biāo)題，標(biāo)題中要包含所做的關(guān)鍵詞

網(wǎng)站結(jié)構(gòu)目錄

最好不要超過(guò)三級(jí)，每級(jí)有“面包屑導(dǎo)航”，使網(wǎng)站成樹(shù)狀結(jié)構(gòu)分布

頁(yè)面元素

給圖片標(biāo)注"Alt"可以讓搜索引擎更友好的收錄

網(wǎng)站內(nèi)容

每個(gè)月每天有規(guī)律的更新網(wǎng)站的內(nèi)容，會(huì)使搜索引擎更加喜歡

友情鏈接

對(duì)方一定要是正規(guī)網(wǎng)站，每天有專業(yè)的團(tuán)隊(duì)或者個(gè)人維護(hù)更新

內(nèi)鏈的布置

使網(wǎng)站形成類似蜘蛛網(wǎng)的結(jié)構(gòu)，不會(huì)出現(xiàn)多帶帶連接的頁(yè)面或鏈接

流量分析

通過(guò)統(tǒng)計(jì)工具(百度統(tǒng)計(jì)，CNZZ)分析流量來(lái)源，指導(dǎo)下一步的SEO

上期前端面試JavaScript

往期經(jīng)典深入探究-頁(yè)面從輸入U(xiǎn)RL到加載顯示完成的過(guò)程

每天，一點(diǎn)點(diǎn)的積累 + 一點(diǎn)點(diǎn)的成長(zhǎng) === 喜歡留下個(gè)贊哦~

持續(xù)更新中~歡迎關(guān)注，一起探索前端之旅