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

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

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

(一) 類別（三種）

DOM xss :

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

反射型 xss :

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

存儲型 Xss

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

（二） Xss危害

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

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

（三） 抵御Xss危害

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

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

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

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

1、可能造成危害：

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

利用已通過認(rèn)證的用戶權(quán)限購買商品；

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

2、防御：

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

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

請求來源限制，此種方法成本最低，但是并不能保證 100% 有效，因為服務(wù)器并不是什么時候都能取到 Referer，而且低版本的瀏覽器存在偽造 Referer 的風(fēng)險。

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

使用token的原理：

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

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

后端驗證前端傳來的 token 與 session 是否一致，一致則合法，否則是非法請求。

content方面

減少HTTP請求：合并文件、CSS精靈、inline Image

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

避免重定向：多余的中間訪問

使Ajax可緩存

非必須組件延遲加載

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

減少DOM元素數(shù)量

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

減少iframe數(shù)量

不要404

Server方面

使用CDN

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

對組件使用Gzip壓縮

配置ETag

Flush Buffer Early

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

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

Cookie方面

減小cookie大小

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

css方面

將樣式表放到頁面頂部

不使用CSS表達(dá)式

不使用IE的Filter

Javascript方面

將腳本放到頁面底部

將javascript和css從外部引入

壓縮javascript和css

刪除不需要的腳本

減少DOM訪問

合理設(shè)計事件監(jiān)聽器

圖片方面

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

優(yōu)化css精靈

不要在HTML中拉伸圖片

保證favicon.ico小并且可緩存

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

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

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

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

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

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

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

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

減少IO讀取操作

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

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

將腳本放在底部 加上時間戳

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

合理的title、description、keywords：搜索對這三項的權(quán)重逐個減小；

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

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

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

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

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

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

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

非裝飾性圖片必須加alt

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

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

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

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

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

頁面元素

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

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

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

友情鏈接

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

內(nèi)鏈的布置

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

流量分析

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

上期前端面試JavaScript

往期經(jīng)典深入探究-頁面從輸入URL到加載顯示完成的過程

每天，一點點的積累 + 一點點的成長 === 喜歡留下個贊哦~

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