前端面試之（安全、性能優化、SEO）

時間 2021-01-02

標籤 javascript css html 前端 java 後端瀏覽器緩存安全性能優化欄目快樂工作简体版

原文原文鏈接

安全

XSS

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

類別

DOM XSS

DOM即文本對象模型，使用DOM能夠容許程序和腳本動態的訪問和更新文檔的內容、結構和樣式。這種方式不須要服務器解析響應的直接參與，觸發XSS靠的是瀏覽器端的DOM解析，能夠認爲徹底是客戶端的事情。
反射型 xss :css

反射型XSS

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

存儲型 XSS

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

XSS危害

利用虛假輸入表單騙取用戶我的信息。
利用腳本竊取用戶的 Cookie 值，被害者在不知情的狀況下，幫助攻擊者發送惡意請求。java

XSS 防護

httpOnly: 在 cookie 中設置 HttpOnly 屬性，使js腳本沒法讀取到 cookie 信息。
前端負責輸入檢查，後端也要作相同的過濾檢查。
某些狀況下，不能對用戶數據進行嚴格過濾時，須要對標籤進行轉換後端

CSRF

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

CSRF危害

利用已經過認證的用戶權限更新設定信息等；
利用已經過認證的用戶權限購買商品；
利用已經過的用戶權限在留言板上發表言論。

防護

驗證碼；強制用戶必須與應用進行交互，才能完成最終請求。
儘可能使用 post ，限制 get 使用；get 太容易被拿來作 csrf 攻擊；
請求來源限制，此種方法成本最低，可是並不能保證 100% 有效，由於服務器並非何時都能取到 Referer，並且低版本的瀏覽器存在僞造 Referer 的風險。
token 驗證 CSRF 防護機制是公認最合適的方案。

使用token的原理：
第一步：後端隨機產生一個 token，把這個token 保存到 session 狀態中；同時後端把這個token 交給前端頁面；
第二步：前端頁面提交請求時，把 token 加入到請求數據或者頭信息中，一塊兒傳給後端；
後端驗證前端傳來的 token 與 session 是否一致，一致則合法，不然是非法請求。緩存

點擊劫持

點擊劫持，是指利用透明的按鈕或鏈接作成陷阱，覆蓋在 Web 頁面之上。而後誘使用戶在不知情的狀況下，點擊那個鏈接訪問內容的一種攻擊手段。這種行爲又稱爲界面假裝(UI Redressing) 。安全

點擊劫持通常有以下兩種方式實現：性能優化

擊者使用一個透明 iframe，覆蓋在一個網頁上，而後誘使用戶在該頁面上進行操做，此時用戶將在不知情的狀況下點擊透明的 iframe 頁面；
攻擊者使用一張圖片覆蓋在網頁，遮擋網頁原有的位置含義。

防護

X-FRAME-OPTIONS

X-FRAME-OPTIONS HTTP 響應頭是用來給瀏覽器指示容許一個頁面能否在<frame>, <iframe> 或者 <object> 中展示的標記。
網站可使用此功能，來確保本身網站內容沒有被嵌到別人的網站中去，也從而避免點擊劫持的攻擊

X-FRAME-OPTIONS 有三個值：

DENY：表示頁面不容許在 frame 中展現，即使是在相同域名的頁面中嵌套也不容許。
SAMEORIGIN：表示該頁面能夠在相同域名頁面的 frame 中展現。
ALLOW-FROM url：表示該頁面能夠在指定來源的 frame 中展現。

使用 Javascript 防護

判斷頂層視口的域名是否是和本頁面的域名一致，若是不一致就讓惡意網頁自動跳轉到我方的網頁。

if (top.location.hostname !== self.location.hostname) {    
    alert("您正在訪問不安全的頁面，即將跳轉到安全頁面！")   
    top.location.href = self.location.href;
}

此種方法可輕易被破解：

// 破解：
// 頂層窗口中放入代碼
var location = document.location;
//或者
var location = "";
if (top.location.hostname !== self.location.hostname) {    
    alert("您正在訪問不安全的頁面，即將跳轉到安全頁面！")   
    top.location.href = self.location.href;
}

性能優化

有哪些性能優化的方面？

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佈局慢

SEO

前端須要注意哪些SEO

合理的title、description、keywords：搜索對這三項的權重逐個減少；
- title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；
- description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；
- keywords列舉出重要關鍵詞便可
語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
重要內容不要用js輸出：爬蟲不會執行js獲取內容
少用iframe：搜索引擎不會抓取iframe中的內容
非裝飾性圖片必須加alt
提升網站速度：網站速度是搜索引擎排序的一個重要指標