同源策略
什么是同源嗜憔，兩個(gè)頁(yè)面擁有相同的協(xié)議杜跷、端口涣旨、域名（指向同一個(gè)ip的不同域名不算同源） 就是同源歪架，瀏覽器規(guī)定，不同源的Cookie SeesionStorage LocalStorage IndexDB無(wú)法相互讀取霹陡，無(wú)法獲得不同源的dom和js對(duì)象和蚪，無(wú)法發(fā)送ajax請(qǐng)求。
同源策略是瀏覽器最核心也最基本的安全功能烹棉。
如果沒(méi)有同源策略攒霹，可能會(huì)出現(xiàn)CSRF攻擊和XSS攻擊。
所以同源策略是通過(guò)限制前端的行為浆洗，防止針對(duì)服務(wù)器的攻擊催束。
CSRF攻擊
Cross-Site Request Forgery，這是一種利用帶有用戶登陸狀態(tài)的cookie進(jìn)行安全操作的攻擊方式伏社。
攻擊步驟
- 用戶登陸網(wǎng)站A（被攻擊對(duì)象）
- 用戶在A未關(guān)閉的情況下打開(kāi)B（攻擊者）
- B發(fā)起對(duì)網(wǎng)站A服務(wù)端的請(qǐng)求抠刺，攜帶合法的cookie。
如何防范
XSS攻擊
又叫CSS(Cross Site Script)攻擊摘昌，是指攻擊者在被攻擊的Web頁(yè)面里插入惡意的Javascript代碼速妖，當(dāng)其他用戶瀏覽該網(wǎng)頁(yè)時(shí)，嵌入在Web里面的惡意代碼執(zhí)行聪黎。屬于被動(dòng)式的攻擊罕容。
如何防范
- 過(guò)濾輸入：對(duì)用戶提交的內(nèi)容進(jìn)行可靠的輸入驗(yàn)證
- 轉(zhuǎn)義輸出：不解釋惡意標(biāo)簽
如何解決跨域問(wèn)題
日常工作中總會(huì)存在需要跨源訪問(wèn)資源的時(shí)候，比如node所在的server與更后臺(tái)的server之間的通信。那么我們?nèi)绻鉀Q呢杀赢？
CORS
CORS(Cross-Origin Resources Sharing)是W3C標(biāo)準(zhǔn)烘跺，也就是官方站出來(lái)解決跨域問(wèn)題了, 它需要客戶端和服務(wù)器同時(shí)支持。
簡(jiǎn)單請(qǐng)求
什么是簡(jiǎn)單請(qǐng)求脂崔，即HEAD GET POST滤淳，并且Header只能
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type：application/x-www-form-urlencoded、 multipart/form-data砌左、text/plain
請(qǐng)求步驟
- 客戶端發(fā)起簡(jiǎn)單請(qǐng)求脖咐，header攜帶Origin，表示協(xié)議+域名+端口
- 瀏覽器根據(jù)服務(wù)端的設(shè)置汇歹，判斷是否在允許源屁擅，若允許，則
Reponse Header加上-
Access-Control-Allow-Origin：表示服務(wù)端允許的請(qǐng)求源产弹，*標(biāo)識(shí)任何外域派歌，多個(gè)源,分隔可選字段 -
Access-Control-Allow-Credentials(optional)：false表示是否允許發(fā)送Cookie，設(shè)置為true
同時(shí)痰哨，ajax請(qǐng)求設(shè)置withCredentials = true(或者fetch請(qǐng)求credentials值為include) 且Access-Control-Allow-Origin不為*,瀏覽器的cookie就能發(fā)送到服務(wù)端.
-
非簡(jiǎn)單請(qǐng)求
簡(jiǎn)單請(qǐng)求之外的其余請(qǐng)求胶果，就是非簡(jiǎn)單請(qǐng)求。瀏覽器發(fā)出CORS非簡(jiǎn)單請(qǐng)求斤斧，會(huì)在正式通信之前早抠，增加了一次OPTIONS查詢請(qǐng)求，稱(chēng)為"預(yù)檢"請(qǐng)求(preflight)撬讽，用于確認(rèn)服務(wù)器是否允許跨域蕊连。瀏覽器先詢問(wèn)服務(wù)器，當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中游昼，以及可以使用哪些HTTP動(dòng)詞和頭信息字段甘苍，只有得到肯定的答復(fù)，瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求酱床。
服務(wù)端如何支持CORS
- Access-Control-Allow-Origin（必填）：*或者具體的站點(diǎn)
- Access-Control-Allow-Methods（必填）：*或者允許的跨域請(qǐng)求方法
- Access-Control-Expose-Headers（可選）：僅在預(yù)檢請(qǐng)求的響應(yīng)頭中有效羊赵，表示服務(wù)器允許攜帶的請(qǐng)求頭。當(dāng)CORS請(qǐng)求時(shí)扇谣，XMLHttpRequest對(duì)象的getResponseHeader()方法只能拿到6個(gè)基本字段：Cache-Control昧捷、Content-Language、Content-Type罐寨、Expires靡挥、Last-Modified、Pragma鸯绿。如果想拿到其他字段跋破，就必須在Access-Control-Expose-Headers里面指定簸淀。
- Access-Control-Allow-Credentials（可選）：是否允許發(fā)送cookie，默認(rèn)不發(fā)送毒返。
- Access-Control-Max-Age（可選）：本次預(yù)檢請(qǐng)求的有效期
JSONP
其實(shí)現(xiàn)在已經(jīng)2023年了租幕，我不知道解釋JSONP的意義何在，但架不住面試的時(shí)候可能會(huì)問(wèn)拧簸，這里就淺聊一下劲绪。
JSONP可以work主要是因?yàn)闉g覽器認(rèn)為它用自己的script標(biāo)簽加載的跨源script為同源，對(duì)于同源策略有一個(gè)很關(guān)鍵的點(diǎn)盆赤，同源策略并非應(yīng)用于跨源窗口中的所有對(duì)象的所有屬性贾富，只應(yīng)用于大多數(shù)屬性，尤其是Document對(duì)象幾乎所有屬性牺六。
JSONP的原理就是動(dòng)態(tài)創(chuàng)建script標(biāo)簽颤枪，然后通過(guò)src進(jìn)行跨域請(qǐng)求，前端提供數(shù)據(jù)處理的回調(diào)函數(shù)淑际，服務(wù)端配合執(zhí)行回調(diào)函數(shù)畏纲，放入要回傳的數(shù)據(jù)
