摘要：同源策略瀏覽器的一個(gè)安全功能，不同源的客戶(hù)端腳本在沒(méi)有明確授權(quán)的情況下，不能讀寫(xiě)對(duì)方資源。不受同源策略限制的跨域資源的引入是允許的頁(yè)面中的鏈接，重定向以及表單提交是不會(huì)受到同源策略限制的。

https://www.cnblogs.com/niuli1987/p/10252214.html

同源： 如果兩個(gè)頁(yè)面的協(xié)議，端口（如果有指定）和域名都相同，則兩個(gè)頁(yè)面具有相同的源。

1.1 同源策略 : 瀏覽器的一個(gè)安全功能，不同源的客戶(hù)端腳本在沒(méi)有明確授權(quán)的情況下，不能讀寫(xiě)對(duì)方資源。用于隔離潛在惡意文件的重要安全機(jī)制。

同源策略限制了從同一個(gè)源加載的文檔或腳本如何與來(lái)自另一個(gè)源的資源進(jìn)行交互。

使用js腳本讀寫(xiě)非同源的資源會(huì)被拒絕的（跨域資源的引入是可以的，使用js讀寫(xiě)則受限制），因此 XMLHttpRequest 受同源策略限制。

1.2 不受同源策略限制的（跨域資源的引入是允許的）

1.2.1 頁(yè)面中的鏈接，重定向以及表單提交是不會(huì)受到同源策略限制的。

如嵌入到頁(yè)面中的 script src="..." /script ， img ， link ， iframe 等。

 ps: 跨域限制都是對(duì)瀏覽器端來(lái)說(shuō)的，服務(wù)器端是不存在跨域安全限制。

2.1 JSONP （不推薦）

例子：跨域資源位于  http://localhost:8066/file/jsonp

## springboot 工程

 @RequestMapping(value="/jsonp", method=RequestMethod.GET )
 public String jsonp(@RequestParam("callback") String callback, HttpServletRequest request) { 
 // 處理正確的jsonp請(qǐng)求， 返回： callback方法名(json字符串)
 if(callback != null !callback.equals("")) {
 return callback + "(" + "{"key": "hello"}" + ")";
 //不是jsonp請(qǐng)求
 return "hello";
 }

2.1.1  使用ajax出現(xiàn) 跨域請(qǐng)求限制

###   XMLHttpRequest發(fā)起了請(qǐng)求，但是響應(yīng)中獲取不到值

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title ajax 跨域請(qǐng)求（不能成功） /title 
 /head 
 body 
 div id="mydiv" 
 button id="btn" 點(diǎn)擊 /button 
 /div 
 /body 
 script type="text/javascript" 
 window.onload = function() {
 var oBtn = document.getElementById(btn);
 oBtn.onclick = function() {
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function() {
 if (xhr.readyState == 4 xhr.status == 200) {
 // 處理響應(yīng)
 alert( xhr.responseText );
 // 跨域請(qǐng)求
 xhr.open(get, http://localhost:8066/file/jsonp?callback, true);
 xhr.send(); 
 /script 
 /html 

2.1.2 使用JSONP 避免跨域請(qǐng)求限制

原理：利用  script src="..." /script 中src 引入跨域資源（不受同源策略限制），瀏覽器收到響應(yīng)后，通知回調(diào)函數(shù)處理該跨域資源。

缺點(diǎn)：只能通過(guò)是get請(qǐng)求引入跨域資源。

### 在頁(yè)面插入帶有src 屬性的 script 標(biāo)簽，src 地址即跨域資源地址；

### 服務(wù)端對(duì)于 JSONP請(qǐng)求的 響應(yīng)格式是： callback函數(shù)名(JSON字符串) 。 （非標(biāo)準(zhǔn)協(xié)議）

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title JSONP實(shí)現(xiàn)跨域（只支持get請(qǐng)求） /title 
 /head 
 body 
 div id="mydiv" 
 button id="btn" 點(diǎn)擊 /button 
 /div 
 /body 
 script type="text/javascript" 
 // 回調(diào)函數(shù)，處理響應(yīng)
 function handleResponse(response){
 console.log(response);
 alert(JSON.stringify(response)); //將json對(duì)象轉(zhuǎn)為 字符串
 /script 
 script type="text/javascript" 
 window.onload = function() {
 var oBtn = document.getElementById(btn);
 oBtn.onclick = function() { 
 // 創(chuàng)建一個(gè)script標(biāo)簽
 var script = document.createElement("script");
 //設(shè)置script標(biāo)簽的src
 script.src = "http://localhost:8066/file/jsonp?callback=handleResponse"; 
 //在頁(yè)面插入一個(gè)script標(biāo)簽,將會(huì)發(fā)起src請(qǐng)求
 document.body.insertBefore(script, document.body.firstChild); 
 /script 
 /html 

#####

2.2 CORS （推薦）

CORS是一個(gè)W3C標(biāo)準(zhǔn)，全稱(chēng)是"跨域資源共享"（Cross-origin resource sharing）。它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請(qǐng)求，從而克服了AJAX只能同源使用的限制。

CORS需要瀏覽器和服務(wù)器同時(shí)支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。

 整個(gè)CORS通信過(guò)程，都是瀏覽器自動(dòng)完成，不需要用戶(hù)參與。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，CORS通信與同源的AJAX通信沒(méi)有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息，有時(shí)還會(huì)多出一次附加的請(qǐng)求，但用戶(hù)不會(huì)有感覺(jué)。

因此，實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信。

ps:  Cookie 依然遵循 同源策略 ，只有用目標(biāo)服務(wù)器域名設(shè)置的 Cookie 才會(huì)上傳，而且使用 document.cookie 也無(wú)法讀取目標(biāo)服務(wù)器域名下的 Cookie。

### 例如 : https://api.github.com/  支持跨域請(qǐng)求

響應(yīng)頭中含有   Access-Control-Allow-Origin ；      它的值要么是請(qǐng)求時(shí)Origin字段的值，要么是一個(gè)*，表示接受任意域名的請(qǐng)求。

2.2.1 springboot 后臺(tái)服務(wù) 配置 支持 CORS

## 配置 WebMvcConfigurerAdapter

##  增減配置后，則可提支持 站外Ajax請(qǐng)求訪(fǎng)問(wèn)的跨域資源

2.2.1.1 配置后臺(tái)服務(wù)

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

 
addMapping：配置可以被跨域的路徑，可以任意配置，可以具體到直接請(qǐng)求路徑。
allowedMethods：允許所有的請(qǐng)求方法訪(fǎng)問(wèn)該跨域資源服務(wù)器，如：POST、GET、PUT、DELETE等。
allowedOrigins：允許所有的請(qǐng)求域名訪(fǎng)問(wèn)我們的跨域資源，可以固定單條或者多條內(nèi)容，如："http://www.baidu.com"，只有百度可以訪(fǎng)問(wèn)我們的跨域資源。
allowedHeaders：允許所有的請(qǐng)求header訪(fǎng)問(wèn)，可以自定義設(shè)置任意請(qǐng)求頭信息，如："X-YAUTH-TOKEN"

 

 
 
 
2.3 利用nginx 反向代理解決跨域問(wèn)題
 
 https://www.cnblogs.com/bninp/p/5694277.html
 location /apis {
 rewrite ^.+apis/?(.*)$ /$1 break;
 include uwsgi_params;
 proxy_pass http://localhost:1894;
 }

 
https://www.cnblogs.com/lailailai/p/4528092.html
 
 CORS - Cross Origin Resourse-Sharing - 跨站資源共享
 CSRF - Cross-Site Request Forgery - 跨站請(qǐng)求偽造
 

 3.1 如何防止 CSRF 攻擊
https://www.bilibili.com/video/av33502871/?spm_id_from=333.788.videocard.0
 CSRF 攻擊：
 當(dāng)用戶(hù)不小心在本機(jī)訪(fǎng)問(wèn) fuck.com 黑客頁(yè)面的時(shí)候，黑客頁(yè)面上放了一個(gè)按鈕或者一個(gè)表單（URL/action 為 http://you.com/delete-myself，當(dāng)前用戶(hù)登錄過(guò)的網(wǎng)站），當(dāng)用戶(hù)觸發(fā)這個(gè)按鈕或表單的，瀏覽器發(fā)出 GET 或 POST 請(qǐng)求的時(shí)候，會(huì)帶上 you.com 的 cookie；如果you.com網(wǎng)站沒(méi)有做 CSRF 防御措施，那么這次請(qǐng)求在 you.com 看來(lái)會(huì)是完全合法的，但是實(shí)際上是黑客偽造的請(qǐng)求。
 
CSRF 防御：
 CSRF攻擊之所以能夠成功，是因?yàn)楣粽呖梢詡卧煊脩?hù)的請(qǐng)求。（該請(qǐng)求中所有的用戶(hù)驗(yàn)證信息都存在于Cookie中，攻擊者可以在不知道這些驗(yàn)證信息的情況下直接利用用戶(hù)自己的Cookie來(lái)通過(guò)安全驗(yàn)證。）
 CSRF 主流防御方式是，用戶(hù)每次發(fā)起請(qǐng)求之前，先從后端獲取隨機(jī) token（后端同時(shí)將此 token 保存到緩存如redis中）；
 用戶(hù)發(fā)起請(qǐng)求時(shí)攜帶該token，如果后端檢查到?jīng)]有 token或者提交的token和后端緩存的不一致，則請(qǐng)求失敗；當(dāng)token校驗(yàn)通過(guò)后，此toiken在緩存中被刪除以防止token被冒用。
 
 *** 如何確保獲取token的請(qǐng)求不是偽造的？？