同源策略詳解

admin發表於2018-09-10

同源策略最初由網景公司新增到瀏覽器，當前所有的瀏覽器都支援此功能。

初始的功能是為了限制非同域網頁之間cookie的訪問，例如a.html頁面無法訪問非同域的b.html頁面的cookie。

兩個網頁同源需要滿足以下三個條件:

（1）.協議相同。

（2）.域名相同。

（3）.埠號相同。

以網址http://www.softwhy.com/article-7813-1.html為例：

（1）.http://是協議。

（2）.www.softwhy.com是域名。

（3）.預設是80埠，可以省略（http://www.softwhy.com:80/article-7813-1.html）。

程式碼例項:

（1）.http://www.softwhy.com/article-100-1.html：同源。

（2）.http://softwhy.com/article-100-1.html：域名不同，所以不同源。

（3）.http://css.softwhy.example.com/article-100-1.html：域名不同，所以不同源。

（4）.http://www.softwhy.com:91/article-100-1.html：埠不同，所以不同源。

（5）.https://www.softwhy.com/article-100-1.html：協議不同，所以不同源。

同源策略功能:

功能是為了保護網站資訊保安，比如，一個電腦可以訪問很多網站，總不能此網站可以讀取另一個網站的資訊，尤其是涉及到重要資訊，比如使用者名稱和密碼。

隨著瀏覽器功能的增強，同源策略由最初限制cookie的訪問，發展到限制多種本地資訊:

（1）.Cookie、LocalStorage 和 IndexedDB訪問限制。

（2）.DOM獲取限制。

（3）.AJAX請求被拒絕。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$.ajax({
  type:'get',
  url:'http://www.softwhy.com/demo/JSON/PHP/antzone.php'
});
</script>
</head> 
<body> 
<div id="thediv"></div>
</body> 
</html>

特別說明:千萬不要在本站執行此程式碼，因為這相當於同域請求，所以不會出現任何問題。

如果在其他域執行此程式碼的時候就會出現跨域問題，截圖如下:

aid[2792]

不受同源策略限制的情況:

有一些情況是不受同源策略的影響，簡單列舉如下:

（1）.頁面中的超連結，點選可以訪問其他不同源的頁面。

（2）.表單提交，不同源的頁面可以相互提交表單資料。

（3）.嵌入到頁面的資源，比如引入js檔案，圖片或者CSS檔案等。

解決跨域問題:

（1）.解決ajax跨域問題參閱ajax跨域解決方案一章節。

（2）.iframe跨域問題參閱iframe跨域解決方案一章節。

（3）.LocalStorage跨域問題參閱LocalStorage跨域解決方案一章節。

（4）.cookie跨域問題參閱cookie跨域解決方案一章節。

相關文章