前端面試題（五）（安全、性能優化）

1、說說你所知道的web安全及防禦措施

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

（1）XSS

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

1. DOM xss :

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

2. 反射型 xss :

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

3. 存儲型 Xss

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

• （二） Xss危害

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

• （三） 抵禦Xss危害

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

（二） CSRF

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

• 一、可能形成危害：

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

• 二、防護：

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

• 使用token的原理：

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

---

2、說說你說了解的前端性能優化？

• 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

---

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

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

（五）如何作SEO優化?

• 標題與關鍵詞

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

• 網站結構目錄

  • 最好不要超過三級，每級有「麪包屑導航」，使網站成樹狀結構分佈

• 頁面元素

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

• 網站內容

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

• 友情連接

  • 對方必定要是正規網站，天天有專業的團隊或者我的維護更新

• 內鏈的佈置

  • 使網站造成相似蜘蛛網的結構，不會出現單獨鏈接的頁面或連接

• 流量分析

  • 經過統計工具(百度統計，CNZZ)分析流量來源，指導下一步的SEO
• 上期前端面試JavaScript
• 往期經典深刻探究-頁面從輸入URL到加載顯示完成的過程

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

---

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