摘要：執行過程跟瀏覽器內核相關，依靠引擎執行。定義了屬性該屬性維持盒模型的組成方式。事件委托原理需要綁定事件的元素很多，且處理邏輯類似。元素都是動態創建，或頻繁增加，刪除，導致元素綁定事件過于復雜。

HTML5新增了哪些內容或API，使用過哪些

語義，連通性，離線存儲，多媒體，2D/3D 繪圖和效果，性能集成，設備訪問 Device Access，樣式設計

HTML5修改的目標：

將互聯網語義化

提供更好地支持各種媒體的嵌入

新增應用程序接口API

HTML Geolocation - 地理位置

HTML Drag and Drop - 拖放

HTML Local Storage - (本地存儲)

HTML Application Cache - 應用程序緩存

HTML Web Workers - Web Workers

HTML Canvas/WebGL - Canvas WebGL

HTML Audio/Video - Audio Video

元素與屬性

文件類型聲明:。

新的解析順序：不再基于SGML解析。

新增常用元素: section（寫文章的時候會經常用到，w3school中說：文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。）, video/audio, nav,aside, canvas, footer, header, mark（標記高亮）新增標簽MDN

input元素的新type： date, email, url

新的屬性： charset（用于meta）, async（用于script）

新的全域屬性：contenteditable(元素是否可被用戶編輯), contextmenu(上下文菜單是指在用戶交互（例如右鍵點擊）時出現的菜單), draggable(用于標識元素是否允許使用 拖放操作API 拖動), dropzone, hidden, spellcheck

input和textarea的區別

input

需要type值

value屬性指定初始值，maxlength屬性指定輸入最長的長度，size屬性指定顯示字符長度

寬高只能通過CSS樣式指定

textarea

使用標簽對,且內容在標簽對中:內容

使用row、col指定大小

區別：input單行文本框， textarea多行文本框

移動設備忽略將頁面中的數字識別為電話號碼的方法

設置mate

doctype的作用是什么

激活不同瀏覽器渲染模式

label的標簽的作用是

屬性: for和accesskey

for的作用：為哪個控件服務.
accesskey的作用：訪問這個控件的熱鍵.

作用：用戶界面中項目的標題

png8、24的區別是

根本區別：存儲方式不同.
png8有1位的布爾透明通道（要么完全透明，要么完全不透明）
png24有8位（256階）的布爾透明通道（半透明）

特點：
png8和gif又一些相似之處，模式都是索引顏色，只支持像素級的純透明，不支持alpha透明。
"IE6 不支持PNG透明"，是指不支持PNG-24的透明，但是IE6支持PNG8的透明，就像支持gif的透明一樣。

請說下移動端常見的適配不同屏幕大小的方法

Rem布局

流式布局

Felx布局

移動端布局
移動端H5頁面適配問題研究
移動web適配利器-rem

html標簽語義化的好處

利于SEO優化。

在樣式丟失的時候，還可以比較好的呈現結構。

更好的支持各種終端，例如無障礙閱讀和有聲小說等。

利于團隊開發和維護，遵循W3C規范，減少代碼差異，提高效率。

頁面DOM節點太多，會出現什么問題？如何優化？

問題：

頁面卡頓，幀率下降

優化：

采用Virtual DOM， virtual-dom

多次操作DOM，改為批量一次操作DOM

及時移走頁面不用的DOM

避免不必要的DIV嵌套

頁面的渲染過程

解析整個HTML，得到DOM樹和樣式樹

DOM樹和樣式樹，經過渲染，得到一棵渲染樹

根據渲染樹，開始布局，計算各個節點寬度，位置，高度等。

然后開始繪制整個頁面并顯示

在渲染過程中如果使用GPU，還可以進行GPU渲染

高性能DOM

一個網站，在頁面上承載最多的內容就是DOM。而且無論是通過加載JS，加載Image，也都是通過HTML標簽來實現的。

DOM性能優化：

站點的網絡消耗

DOM初始化過程（瀏覽器）

DOM結構以及動態操作（人為）

JS執行過程（瀏覽器 - V8）

JS邏輯組織（人為）

站點的網絡消耗基本上沒法控制，復雜的網絡，在一個下行的終端實際上選擇不了會接觸什么樣的網絡環境。

DOM的初始化過程無法控制，瀏覽器內部有DOM解析引擎，它的解析快慢改變不了。

DOM的操作以及動態操作，一個頁面的DOM結構是在制作頁面的時候定義下來的，可以采用各種方式，比如：多層嵌套，底層嵌套，絕對定位，相對定位。
動態操作就是DOM在運行到一定階段之后發生。

JS執行過程跟瀏覽器內核相關，依靠JS引擎執行。它的執行快慢無法改變，能夠優化的是JS邏輯組織部分。

回流Reflow：對于DOM結構的各個元素都有自己的盒子模型，這些都需要瀏覽器根據各個樣式（瀏覽器的默認，開發人員定義的）來計算，并根據計算結果將元素放到它該出現的位置
重繪Repaint：當各個盒子的位置，大小以及其它屬性，例如：顏色，字體大小等都確定下來后，瀏覽器于是便把這些元素都按照各自的特性繪制一遍，于是頁面的內容出現了。

什么情況觸發回流或者重繪？
DOM元素的添加，修改（內容），刪除（回流+重繪），僅修改DOM的元素的字體顏色（只有重繪，因此不需要調整布局），回流一定會觸發重繪，但是重繪不一定觸發回流

避免觸發回流和重繪，提高DOM的性能：
display的值會影響布局，從而影響整個頁面元素的位置發生變化，所以會更改DOM-Tree,需要重新render-Tree的結構，先將元素從document中刪除，完成修改后再把元素放回原來的位置，如果需要創建多個DOM結構，可以使用documentFragment創建完成后一次性添加到document

在前端開發中，頁面渲染指什么？

前端工程師手冊
維基百科HTML5
MDN-HTML5

左右布局：左邊定寬、右邊自適應，不少于3種方法

absolute + padding

    
left
    
right

flex

    
left
    
right

float

    
left
    
right

CSS3用過哪些新特性

Selector

@font-face 字體

border-radius 圓角

box-shadow text-shadow 文本和框的陰影

Word-wrap 樣式

多列布局（multi-column layout）

  
 



// Column-count：表示布局幾列。
// Column-rule：表示列與列之間的間隔條的樣式
// Column-gap：表示列于列之間的間隔

transform 轉換

2D 轉換
rotate 旋轉，圖片轉個90或180度 
translate 位置移動
scale, skew, matrix 等
3D 轉換
rotate(XYZ) 根據x,y,z軸旋轉
translate(XYZ), scale(XYZ)  
perspective 透視, 景深，這個很多3D效果都要設置一下，不然3D還是會”2D”的效果

transition: 過渡，好多簡單的動畫，移個位置，變個長短.

animation: 動畫，3D可以調用硬件渲染。

@media 媒體查詢，適用于一些響應式布局中

flex: flex布局，cssreference

word-wrap, background-size, background-origin, border-image, box-sizing, calc, linear-gradient, radial-gradient

will-change: 改善渲染性能,使用CSS3 will-change提高頁面滾動、動畫等渲染性能

BFC、IFC

盒模型布局的CSS渲染模式

BFC：Black Formatting Context,塊級格式上下文。 BFC表現原則：內部子元素再怎么折騰，都不會影響外部的元素，自成一方天地.
深入理解BFC

BFC形成（一條或多條都可以形成BFC）:

float 的值不為 none

position 的值不為 static 或 relative

display屬性為inline-boxs、table-cells、table-captions的不是塊盒的塊容器(除非這個值已經被傳播到視口),

overflow不為visible的塊盒才會為它的內容創建新的BFC。

body元素

IFC：Inline Formatting Context, 直譯"內聯格式化上下文"，理解成行內盒子模型. 高度由其包含行內元素中最高的實際高度計算而來（不受到豎直方向的padding/margin影響)

對柵格的理解

基礎就是float 和 width:百分比

以規則的網格陣列來規范網頁中的版面布局以及信息分布。

盒子模型 加了box-sizing 之后怎樣

IE5.x 以及Quirks(怪異)模式的IE6，IE7中，border和padding都包含在width和height中。

標準瀏覽器中width和height僅僅包含content, 不包含border和padding。

CSS3定義了box-sizing屬性：box-sizing: content-box | border-box | inherit;
content-box: 該屬性維持CSS2.1盒模型的組成方式。border-box：該屬性將重新定義CSS2.1盒模型組成模式(與IE6解析相同)

樣式權重的排序

!important > id > class > tag[name=val] > tag

display有哪些屬性值，有什么作用？

none：元素不會顯示，而且改變元素現實的空間也不會保留

inline：將元素顯示為內聯元素，元素前后沒有換行符

block:將元素顯示為塊級元素，元素前后會帶有換行符

inline-block：行內塊元素

list-item：此元素會作為列表顯示

table: 會作為會計表格來顯示(類似table),表格前后帶有換行符.

inherit: 應該從父級繼承display屬性的值

box: 彈性盒子模型(CSS3新增)

flex： flex布局(CSS3新增)

grid: 柵格盒模型值(CSS3新增)

MDN-display

1像素邊框問題

原因：由于移動端一般都會設置視口(屏幕寬度為設備寬度),width=device-width,initial-scale=1，而有些屏幕是2倍屏，導致在移動端上設置1px就是看上去的2px

解決方法：

通過transform將寬度縮小一半，transform:scaleY(0.5)

通過@media媒體查詢，查詢當前設置的屏幕倍率，統一設置transform 移動端(手機)1像素邊框真正實現

模仿淘寶的設置，將屏幕寬度為設計師的設計尺寸(一般為750)。

動態設置content

(function(e){if(!e["_med"])e["_med"]={};var t=e["_med"];t.cookie=function(e,t,a){if(t!==undefined){a=a||{};if(typeof a.expires==="number"){var o=a.expires,l=a.expires=new Date;l.setTime(+l+o*864e5)}return document.cookie=[e,"=",String(t),a.expires?"; expires="+a.expires.toUTCString():"",a.path?"; path="+a.path:"",a.domain?"; domain="+a.domain:"",a.secure?"; secure":""].join("")}var r=e?undefined:{};var i=document.cookie?document.cookie.split("; "):[];for(var n=0,s=i.length;n


（水平）居中有哪些實現方式


margin
margin



text-align
text-align


position+transform

  
transform



flex

  
flex



table+margin

  
table + margin
    




移動端的常見問題

點透事件 zepto的tap事件的點透問題的幾種解決方案

長時間按住頁面出現閃退問題
旋轉屏幕時，字體調整問題
上下拉動滾動條時卡頓，慢的問題

長時間按住頁面出現閃退問題
element {
  -webkit-touch-callout: none;
}
上下拉動滾動條時卡頓，慢的問題
body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
旋轉時字體大小調整
/* 旋轉屏幕時，字體大小調整的問題 */
html, body, p, div {
    -webkit-text-size-adjust:100%;
}
忽略頁面中的電話號碼

資料
深入了解 CSS3 新特性
HTML5常見問題
JavaScript
跨域解決方式
JSONP,domain, window.name,ifrome，反向代理(nginx)
什么是閉包？閉包有什么作用？
閉包：函數里面套函數，外層函數無法訪問里面函數中的變量，里面函數可以訪問外層函數中的私有變量。
作用：防止全局變量
如何實現瀏覽器內多個標簽之間的通信
localStorage,cookie
HTML5的存儲方式有哪些？有何區別？
存儲方式：localStorage,sessionStorage
區別：存儲時間不一樣，localStorage本地永久存儲，sessionStroage頁面關閉，ctrl+f5存儲的值清空(f5刷新值存在).
內存溢出

請求數據過大
死循環
引用對象，使用完不釋放
全局變量過多

表現：

意外的全局變量
被遺忘的計時器或回調函數
脫離 DOM 的引用
閉包

4類 JavaScript 內存泄漏及如何避免
圖片懶加載
原理：訪問一個頁面的時候，把img或者background相關屬性的加載默認圖（或者其它節約資源的圖片），當圖片在可可視區域內時，才設置圖片的真正路徑.
優點：減輕服務器的壓力，用戶體驗好（加載好的頁面更快呈現在用戶面前）
function elementInViewport(el) {
    var rect = el.getBoundingClientRect()
    
    // For invisible element.
    if (rect.top + rect.bottom + rect.left + rect.right + rect.height + rect.width === 0) {
      return false;
    }
    
    return (
       rect.top   >= 0
    // Pre load.
    && rect.top   <= ((window.innerHeight || document.documentElement.clientHeight) + 100)
    && rect.left  >= 0
    // Hide carousel except the first image. Do not add equal sign.
    && rect.left  < (window.innerWidth || document.documentElement.clientWidth)
    )
}
實現頁面加載進度條
實現插件：PACE

AJAX （監控所有AJAX請求）
Elements （檢查頁面上的特定元素存在）
Document （document 的 readyState 事件）
Event Lag （檢查正在執行JavaScript的事件循環）

事件委托
利用事件冒泡和e.target來確定事件和元素。在jQuery中有$.delegate方法去代理事件。
事件委托原理：

需要綁定事件的元素很多，且處理邏輯類似。
元素都是動態創建，或頻繁增加，刪除，導致元素綁定事件過于復雜。

// https://github.com/zenorocha/delegate/blob/master/src/delegate.js

const delegate = (element, selector, type, callback) => {
  element.addEventListener(type, (e) => {
    let target = e.path.find(ele => ele.matches(selector))
    if (target) {
      callback.call(element, e);
    }
  });
};
實現 extend 函數
淺拷貝使用ES6的Object.assign()
深拷貝：zepto extend
直接克隆一個Nested Object的簡便方法：
var origin = {a: "a"}
var copy = JSON.parse(JSON.stringify(origin));
為什么會有跨域的問題以及解決方式
前端解決跨域問題的8種方案, HTTP訪問控制（CORS）,瀏覽器的同源策略
產生原因：

處于安全考慮，瀏覽器會限制從腳本內發起的跨域HTTP請求。 例如，XMLHttpRequset和Fetch都需要遵循同源策略
同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。 這是一個用于隔離潛在惡意文件的關鍵的安全機制。

解決方式：

JSONP(JSON with Padding): 利用加載 JS 文件不需要遵循同源策略的原理。
CORS(Cross-Origin Resource Sharing): 在服務器端返回允許跨域訪問的頭。
WebSockt：利用 WebSocket 不需要遵循同源策略的原理。

JSONP原理、postMessage原理
can-anyone-explain-what-jsonp-is-in-layman-terms
JSONP 原理：加載一個 script，并執行一段回調 JS ，因為加載 JS 不需要遵循同源策略。

無法發送特定的頭部
只能是GET請求
無法發送 body

postMessage 文檔
動畫：setTimeout何時執行，requestAnimationFrame的優點
setTimeout 何時執行:
tasks-microtasks-queues-and-schedules
requestAnimationFrame的優點
【MDN】requestAnimationFrame
window.requestAnimationFrame() 方法告知瀏覽器執行動畫，并請求瀏覽器調用指定的函數在下一次重繪之前更新動畫。該方法將在重繪之前調用的回調作為參數。
優點：

在瀏覽器重繪前調用，保證瀏覽器渲染效率和性能
可以精準地控制動畫的每一幀

主要在游戲，動畫方面使用。用這個方法可以保持較高幀頻率和效率。 比如一個60幀率的動畫，requestAnimationFrame一般會以16ms的間隔調用一次
手寫parseInt的實現：要求簡單一些，把字符串型的數字轉化為真正的數字即可，但不能使用JS原生的字符串轉數字的API，比如Number()
const parseInt = str => str - 0;
const parseInt = str => str / 1;
const parseInt = str => str * 1;
const parseInt = str => +str;
復雜寫法：
const parseInt = str => {
  let n = 0;
  let i = 1;
  str.split("").reverse().map(s => {
    n += i * (s.charCodeAt(0) - 48);
    i *= 10;
  });
  return n;
}
編寫分頁器組件的時候，點擊“下一頁”怎樣能確保還有數據可以加載（請求數據不會為空）？
服務器需要返回總數，當前偏移量，根據總數和偏移量判斷是否是最后一頁。
ES6新增了哪些特性
ECMAScript 6 入門
require.js的實現原理（如果使用過webpack，進一步會問，兩者打包的異同及優缺點）
requireJS實現原理研究
相同點：都以模塊化方式組織代碼
不同點：

requirejs 只能加載JS文件
webpack 可以打包JS，CSS，甚至是圖片

promise的實現原理，進一步會問async、await是否使用過
使用框架 ( vue / react 等)帶來好處( 相對jQuery )

MVVC架構，數據驅動視圖，數據綁定，減少DOM操作。
組件化組織頁面，效率更高，維護更簡便。

Virtual Dom 帶來性能上的提升
路由控制，單頁應用更為簡便

vue雙向數據綁定的實現
實現雙向數據綁定的關鍵是Observer. 即用戶改變了數據，框架如何知曉，并及時更新視圖。
vue2.17源碼學習
Observer實現包括：
參考：observer
Object.defineProperty
var obj = {}
Object.defineProperty(obj, "key", {
  enumerable: true,
  set(x) {
    console.log(`set key: ${x}`);
    obj.__ob__  = obj.__ob__ || {};
    obj.__ob__.key = x;
  },
  get() {
    return obj.__ob__.key;
  }
})
obj.key = "value";
/**
 * 輸出：
 * set key: value
 */
Proxy
var ele = {
  data: null
};
var handler = {
  get: function(target, key) {
    if (typeof target[key] === "object" && target[key] !== null) {
      return new Proxy(target[key], handler)
    } else {
      return target[key];
    }
  },
  set: function(target, key, value) {
    console.log("set " + key)
    target[key] = value;
    return value;
 }
}
ele = new Proxy(ele, handler);
ele.data = {a: "a", b: {bb: "bb"}}
ele.data.a = "aa";
ele.data.b.bb = "bb1";
ele.data.c = "cc";
/*
 * 輸出：
 * set data
 * set a
 * set bb
 * set c
 */
其他的數據操作，如：數組的push等，只需要在原生上加Hook就行了
var arr = [];
var __push = Array.prototype.push;

Array.prototype.push = function (...items) {
  console.log(`push: ${items}`);
  return __push.apply(this, items);
}

arr.push("value")
/**
 * 輸出：
 * push: value
 */
從視圖反向把數據流過來，稍微簡單些，只需要記錄對應的key值，然后在輸入框觸發change, keypress事件的時候，更新對應key的數據即可。
單頁應用，如何實現其路由功能
Hash
// https://github.com/zhoukekestar/modules/blob/master/src/views/views.js
window.addEventListener("hashchange", () => {
  // 隱藏其他頁面
  Array.from(document.querySelectorAll(".page")).map(page => {
    page.style.display = "none";
  });
  // 根據hash值顯示對應的頁面
  document.querySelector(location.hash).style.display = "block";
});
使用HASH實現的簡單路由 測試：在線測試
History
// https://github.com/zhoukekestar/modules/blob/master/src/loadpage/loadpage.js
// push 頁面
history.pushState("", "", url);
// pop 頁面
window.onpopstate = (e) => {
};
使用History實現的簡單路由,在線測試
項目中使用過哪些優化方法

頁面靜態化，（Pug在靜態編譯后部署）

CDN加速, 多地緩存

前端渲染 (Data + View) / 后端渲染( SSR, SEO 等), 視具體情況選擇，如：
前端渲染，適合大流量的場景
后端渲染，適合SEO優化，用戶體驗提升等場景


縮減域名，以減少DNS解析時間，（可采用進行優化）
如果遇到域名解析的問題，可嘗試HTTPDNS方案

Combo服務器合并CSS，JS請求, 減少第一屏網絡請求。（如果采用HTTP2.0方案，資源合并可省略）
異步加載非核心業務和邏輯資源

資源和請求緩存，可參考緩存的答案
Cache-Control/Expires 前端緩存
Last-Modified/Etag 服務器端緩存，304

如果是和Native混合開發的，還可以使用Native緩存
DNS就近解析應用服務器，需要和CDN配合使用

資料
網絡
靜態資源或者接口等如何做緩存優化


redis/memcache做數據緩存
SQL 查詢做緩存
指定 Cache-Control/Expires 緩存時間
Last-Modified/Etag 緩存 ( 304 ) 方案
網關服務器做緩存，需要更新時，再回源到應用服務器
CDN多機房，多網關緩存

輸入一個URL，Enter之后發生了什么
具體步驟:

把URL地址通過DNS解析為具體的服務器主機
瀏覽器封裝HTTP請求 (window.navigator.userAgent)
瀏覽器創建與服務器的TCP連接
瀏覽器發出HTTP請求
服務器收到請求后交給相應的進程處理
服務器把處理后的結果發送給瀏覽器
瀏覽器生成渲染樹和DOM樹渲染頁面
瀏覽器處理頁面中嵌入的資源和異步請求



瀏覽器解析URL，如：https://www.google.co.jp/?gfe_rd=cr&ei=NPJtWZTXJabEXoKjqOAP&gws_rd=ssl包括
協議：`http`,`https`等
域名：`www.google.co.jp`
資源路徑：`/`
參數查詢：`gfe_rd=cr`,關鍵詞`cr`


DNS
瀏覽器DNS緩存
HOSTS查詢
DNS服務器查詢
ARP查詢

TCP握手，TLS握手

HTTP(s),(或SPDY，或HTTP2.0)
Header
Domain
Body


Gateway/Nginx,網關和負載均衡服務器
查詢本地緩存
請求上游應用服務器


瀏覽器解析HTML，并請求資源
CSS    
JS    
圖片

生成DOM-Tree,結合CSS進行渲染

更為完整詳細：what-happens-when-zh_CN
前端的安全
前端的安全問題有哪些，如何解決

sql注入
shell注入
xss
csrf
對數據加密
對關鍵字進行處理

sql注入
前端js防止SQL注入
思路：發現SQL注入位置(URL地址和Input輸入框)，判斷服務器類型和后臺數據庫類型.
解決方法：
URL地址防注入
// 過濾URL非法SQL字符
var sUrl = location.search.toLowerCase();
var sQuery = sUrl.substring(sUrl.indexOf("=") + 1); // 獲取查詢參數key
// SQL關鍵字
reg = /select|update|delete|truncate|join|union|exec|insert|drop|count|"|"|;|>|<|%/i;
if (reg.test(sQuery)) {
  console.log("輸入非法字符");
  location.href = sUrl.replace(sQuery, ""); // 重新跳轉
}
輸入文本框防注入
// 防止SQL注入
function AntiSqlValid(context) {
  reg = /select|update|delete|truncate|join|union|exec|insert|drop|count|"|"|;|>|<|%/i;
  if (reg.test(context.value)) {
    // 提示信息，其它操作
  }
  return;
} 
shell注入
代碼注入
常見的Shell注入資源有system()，StartProcess()，java.lang.Runtime.exec()，System.Diagnostics.Process.Start()以及類似的應用程序接口
在請求地址上置換用戶提交的許多其他單字。
處理特殊字符：$,;,|,&&,||,>,<
XSS
英語：Cross-site scripting，通常簡稱為：XSS
網站應用程序的安全漏洞攻擊，是代碼注入的一種.
造成的結果：可能得到更高的權限（如執行一些操作）、私密網頁內容、會話和cookie等各種內容。
檢測方法
測試網站是否有正確處理特殊字符

>
=">
">



涉及到的知識：HTTP,Cookie,Ajax等。
XSS原理：
XSS：JavaScript代碼
DDOS
Server Limit DOS: HTTP頭超長，導致域名無法訪問。

獲取Cookie中的信息
破壞正常的頁面結構，插入惡意內容

XSS類型：


反射型
發出請求時，XSS代碼出現在URL中，作為輸入提交到服務器端，服務器端解析后響應，XSS代碼隨響應內容一起傳回給瀏覽器,最后瀏覽器解析執行XSS代碼。該過程像一次反射，稱之為：反射型XSS



存儲型
存儲型XSS和放射型XSS的差別僅在于，提交的代碼會存儲在服務器端（數據庫，內存，文件系統等），下次請求目標頁面時不用再提交XSS代碼



響應頭：
// express框架
res.set("X-XSS-Protection", 0) // 默認是瀏覽器攔截，設置為0之后，XSS代碼就生效
XSS預防措施：


編碼
對用戶輸入的數據進行HTML Entity編碼


過濾
移除用戶上傳的DOM屬性，如onerror，與事件相關等
移除用戶上傳的Style節點，Script節點，Iframe節點等


校正
避免直接對HTML Entity解碼
使用DOM Parse轉換，校正不配對的DOM標簽



跨站腳本
csrf
中文名稱：跨站請求偽造，也被稱為：one click attack/session riding，縮寫為：CSRF/XSRF。
理解成：攻擊者盜用了你的身份，以你的名義發送惡意請求.
CSRF攻擊是源于WEB的隱式身份驗證機制。WEB的身份驗證機制雖然可以保證一個請求是來自于某個用戶的瀏覽器，但卻無法保證該請求是用戶發送的。 
CSRF的前端防御：
在每次POST，GET請求時，添加X-CSRFToken請求頭。

用戶操作限制，比如驗證碼；
請求來源限制，比如限制HTTP Referer才能完成操作；
token驗證機制，比如請求數據字段中添加一個token，響應請求時校驗其有效性；

前后端分離架構下CSRF防護機制
npm
暫時指定代理
// npm install mongoose --registry 內網ip
npm install mongoose --registry http://172.18.0.199
永久指定代理
// npm config set registry 內網ip
npm config set registry "http://172.18.0.199"
使用nrm動態切換代理
npm install -g nrm
測試代理最快
nrm test