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

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

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

(一) 類別（三種）

DOM xss :

DOM即文本對象模型，使用DOM可以允許程序和腳本動態的訪問和更新文檔的內容、結構和樣式。這種方式不需要服務器解析響應的直接參與，觸發XSS靠的是瀏覽器端的DOM解析，可以認為完全是客戶端的事情。

反射型 xss :

反射型XSS也被稱為非持久性XSS，是現在最容易出現的一種XSS漏洞。發出請求時，XSS代碼出現在URL中，最后輸入提交到服務器，服務器解析后在響應內容中出現這段XSS代碼，最后瀏覽器解析執行。

存儲型 Xss

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

（二） Xss危害

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

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

（三） 抵御Xss危害

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

前端負責輸入檢查，后端也要做相同的過濾檢查。

某些情況下，不能對用戶數據進行嚴格過濾時，需要對標簽進行轉換

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

1、可能造成危害：

利用已通過認證的用戶權限更新設定信息等；

利用已通過認證的用戶權限購買商品；

利用已通過的用戶權限在留言板上發表言論。

2、防御：

驗證碼；強制用戶必須與應用進行交互，才能完成最終請求。

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

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

token 驗證 CSRF 防御機制是公認最合適的方案。

使用token的原理：

第一步：后端隨機產生一個 token，把這個token 保存到 session 狀態中；同時后端把這個token 交給前端頁面；

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

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

content方面

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

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

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

使Ajax可緩存

非必須組件延遲加載

未來所需組件預加載

減少DOM元素數量

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

減少iframe數量

不要404

Server方面

使用CDN

添加Expires或者Cache-Control響應頭

對組件使用Gzip壓縮

配置ETag

Flush Buffer Early

Ajax使用GET進行請求

避免空src的img標簽

Cookie方面

減小cookie大小

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

css方面

將樣式表放到頁面頂部

不使用CSS表達式

不使用IE的Filter

Javascript方面

將腳本放到頁面底部

將javascript和css從外部引入

壓縮javascript和css

刪除不需要的腳本

減少DOM訪問

合理設計事件監聽器

圖片方面

優化圖片：根據實際顏色需要選擇色深、壓縮

優化css精靈

不要在HTML中拉伸圖片

保證favicon.ico小并且可緩存

減少http請求次數：

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

網頁Gzip，CDN托管，data緩存 ，圖片服務器。

前端模板 JS+數據，減少由于HTML標簽導致的帶寬浪費，

前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數

用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。

當需要設置的樣式很多時設置className而不是直接操作style

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

減少IO讀取操作

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

圖片預加載，將樣式表放在頂部

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

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

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

title值強調重點即可，重要關鍵詞出現不要超過2次，而且要靠前，不同頁面title要有所不同；

description把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面description有所不同；

keywords列舉出重要關鍵詞即可

語義化的HTML代碼，符合W3C規范：語義化代碼讓搜索引擎容易理解網頁

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

重要內容不要用js輸出：爬蟲不會執行js獲取內容

少用iframe：搜索引擎不會抓取iframe中的內容

非裝飾性圖片必須加alt

提高網站速度：網站速度是搜索引擎排序的一個重要指標

標題與關鍵詞

設置有吸引力切合實際的標題，標題中要包含所做的關鍵詞

網站結構目錄

最好不要超過三級，每級有“面包屑導航”，使網站成樹狀結構分布

頁面元素

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

網站內容

每個月每天有規律的更新網站的內容，會使搜索引擎更加喜歡

友情鏈接

對方一定要是正規網站，每天有專業的團隊或者個人維護更新

內鏈的布置

使網站形成類似蜘蛛網的結構，不會出現多帶帶連接的頁面或鏈接

流量分析

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

上期前端面試JavaScript

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

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

持續更新中~歡迎關注，一起探索前端之旅