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

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

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

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

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

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

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

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

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

 ps: 跨域限制都是對瀏覽器端來說的，服務(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請求， 返回： callback方法名(json字符串)
 if(callback != null !callback.equals("")) {
 return callback + "(" + "{"key": "hello"}" + ")";
 //不是jsonp請求
 return "hello";
 }

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

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

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title ajax 跨域請求（不能成功） /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 );
 // 跨域請求
 xhr.open(get, http://localhost:8066/file/jsonp?callback, true);
 xhr.send(); 
 /script 
 /html 

2.1.2 使用JSONP 避免跨域請求限制

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

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

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

### 服務(wù)端對于 JSONP請求的 響應(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請求） /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對象轉(zhuǎn)為 字符串
 /script 
 script type="text/javascript" 
 window.onload = function() {
 var oBtn = document.getElementById(btn);
 oBtn.onclick = function() { 
 // 創(chuàng)建一個script標(biāo)簽
 var script = document.createElement("script");
 //設(shè)置script標(biāo)簽的src
 script.src = "http://localhost:8066/file/jsonp?callback=handleResponse"; 
 //在頁面插入一個script標(biāo)簽,將會發(fā)起src請求
 document.body.insertBefore(script, document.body.firstChild); 
 /script 
 /html 

#####

2.2 CORS （推薦）

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

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

 整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對于開發(fā)者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。

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

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

### 例如 : https://api.github.com/  支持跨域請求

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

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

## 配置 WebMvcConfigurerAdapter

##  增減配置后，則可提支持 站外Ajax請求訪問的跨域資源

2.2.1.1 配置后臺服務(wù)

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

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

 

 
 
 
2.3 利用nginx 反向代理解決跨域問題
 
 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 - 跨站請求偽造
 

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