成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

前端百題斬之原來跨域也是可以進行分類的

作者： 執鳶者
開發 前端
跨域本質其實就是指兩個地址不同源，不同源的反面不就是同源，同源指的是：如果兩個URL的協議、域名和端口號都相同，則就是兩個同源的URL。

[[409185]]

25.1 同源策略

25.1.1 同源

跨域本質其實就是指兩個地址不同源，不同源的反面不就是同源，同源指的是：如果兩個URL的協議、域名和端口號都相同，則就是兩個同源的URL。

  1. // 非同源:協議不同 
  2. http://www.baidu.com 
  3. https://www.baidu.com 
  4.  
  5. // 同源:協議、域名、端口號都相同 
  6. http://www.baidu.com 
  7. http://www.baidu.com?query=1 

25.1.2 同源策略

同源策略是一個重要的安全策略，它用于限制一個origin的文檔或者它加載的加載的腳本如何能與另一個源的資源進行交互。其主要是為了保護用戶信息的安全，防止惡意的網站竊取數據，是瀏覽器在Web頁面層面做的安全保護。

25.1.3 同源策略的表現

既然同源策略是瀏覽器在Web頁面層面做的保護，那么該層面哪些位置需要進行保護呢?總結下來主要包含三個層面：DOM層面、數據層面、網絡層面。

DOM層面

同源策略限制了來自不同源的JavaScript腳本對當前DOM對象讀和寫的操作。

數據層面

同源策略限制了不同源的站點讀取當前站點的Cookie、IndexedDB、localStorage等數據。

網絡層面

同源策略限制了通過XMHttpRequest等方式將站點的數據發送給不同源的站點。

25.2 跨域分類

同源策略保證了瀏覽器的安全，但是如果將這三個層面限制的死死的，則會讓程序員的開發工作舉步維艱，所以瀏覽器需要在最嚴格的同源策略限制下做一些讓步，這些讓步更多了是在安全性與便捷性的權衡。其實跨域的方式就可以認為是瀏覽器出讓了一些安全性或在遵守瀏覽器同源策略前提下所采取的一種折中手段。

25.2.1 DOM層面和數據層面分類

根據同源策略，如果兩個頁面不同源，無法互相操作DOM、訪問數據，但是兩個不同源頁面之間進行通信是比較常見的情形，典型的例子就是iframe窗口與父窗口之間的通信。隨著歷史的車輪，實現DOM層面間通信的方式有多種，如下所示：

片段標識符

片段標識符其核心原理就是通過監聽url中hash的改變來實現數據的傳遞，想法真的很巧妙。

  1. // 父頁面parentHtml.html 
  2. <!DOCTYPE html> 
  3. <html lang="zh"> 
  4.     <head> 
  5.         <title></title> 
  6.     </head> 
  7.     <body> 
  8.         我是父頁面 
  9.         <button id='btn'>父傳給子</button> 
  10.         <iframe src="./childHtml.html" id="childHtmlId"></iframe> 
  11.     </body> 
  12.     <script> 
  13.         window.onhashchange = function() { 
  14.             console.log(decodeURIComponent(window.location.hash)); 
  15.         }; 
  16.         document.getElementById('btn').addEventListener('click', () => { 
  17.             const iframeDom = document.getElementById('childHtmlId'); 
  18.             iframeDom.src += '#父傳給子'; 
  19.         }); 
  20.     </script> 
  21. </html> 
  1. // 子頁面childHtml.html 
  2. <!DOCTYPE html> 
  3. <html lang="zh"> 
  4.     <head> 
  5.         <title></title> 
  6.     </head> 
  7.     <body> 
  8.         我是子頁面 
  9.         <button id='btn'>子傳給父</button> 
  10.     </body> 
  11.     <script> 
  12.         window.onhashchange = function() { 
  13.             console.log(decodeURIComponent(window.location.hash)); 
  14.         }; 
  15.  
  16.         document.getElementById('btn').addEventListener('click', () => { 
  17.             parent.location.href += '#子傳給父'; 
  18.         }); 
  19.     </script> 
  20. </html> 

window.name

瀏覽器窗口有window.name屬性，這個屬性的最大特點是，無論是否同源，只要在同一個窗口里，前一個網頁設置了這個屬性，后一個網頁可以讀取它。如果需要實現父頁面和跨域的子頁面之間的通信，需要一個和父頁面同源的子頁面作為中介，將跨域的子頁面中的信息傳遞過來。(好麻煩呀，強烈不推薦使用，此處就不寫對應的代碼啦)

document.domain

document.domain是存放文檔的服務器的主機名，可通過手動設置將其設置成當前域名或者上級的域名，當具有相同document.domain的頁面就相當于處于同域名的服務器上，如果其域名和端口號相同就可以實現跨域訪問數據了。

postMessage(強烈推薦)

window.postMessage是HTML5新增的跨文檔通信API，該API，允許跨窗口通信，不論這兩個窗口是否同源。

  1. // 父頁面 
  2. <!DOCTYPE html> 
  3. <html lang="zh"> 
  4.     <head> 
  5.         <title></title> 
  6.     </head> 
  7.     <body> 
  8.         我是父頁面 
  9.         <button id='btn'>父傳給子</button> 
  10.         <iframe src="http://127.0.0.1:5500/024/childHtml.html" id="childHtmlId"></iframe> 
  11.     </body> 
  12.     <script> 
  13.         window.addEventListener('message', function(event) { 
  14.             console.log('父頁面接收到信息', event.data); 
  15.         }); 
  16.         document.getElementById('btn').addEventListener('click', () => { 
  17.             const iframeDom = document.getElementById('childHtmlId'); 
  18.             iframeDom.contentWindow.postMessage('我是執鳶者1', 'http://127.0.0.1:5500/024/childHtml1.html'); 
  19.         }); 
  20.     </script> 
  21. </html> 
  1. // 子頁面 
  2. <!DOCTYPE html> 
  3. <html lang="zh"> 
  4.     <head> 
  5.         <title></title> 
  6.     </head> 
  7.     <body> 
  8.         我是子頁面 
  9.         <button id='btn'>子傳給父</button> 
  10.     </body> 
  11.     <script> 
  12.         window.addEventListener('message', function(event) { 
  13.             console.log('子頁面接收到信息', event.data); 
  14.         }); 
  15.  
  16.         document.getElementById('btn').addEventListener('click', () => { 
  17.             parent.postMessage('我是執鳶者2', 'http://127.0.0.1:5500/024/parentHtml1.html'); 
  18.         }); 
  19.     </script> 
  20. </html> 

25.2.2 網絡層面

根據同源策略，瀏覽器默認是不允許XMLHttpRequest對象訪問非同一站點的資源的，這會大大制約生產力，所以需要破解這種限制，實現跨域訪問資源。目前廣泛采用的主要有三種方式(注：該出不給出具體代碼，后續會有專門的百題斬進行詳細闡述)：

通過代理實現

同源策略是瀏覽器為了安全制定的策略，所以服務端不會存在這樣的限制，這樣我們就可以將請求打到同源的服務器上，然后經由同源服務器代理至最終需要的服務器，從而實現跨域請求的目的。例如可以通過Nginx、Node中間件等。

JSONP的方式(具體實現見后續百題斬)

JSONP是一種借助script元素實現跨域的技術，它并沒有使用XMLHttpRequest對象，其能夠實現跨域主要得益于script有兩個特點：

(1)src屬性能夠訪問任何URL資源，并不會受到同源策略的限制;

(2)如果訪問的資源包含JavaScript代碼，其會在下載后自動執行。

CORS方式(具體實現見后續百題斬)

跨域資源共享(CORS)，該機制可以進行跨域訪問控制，從而使跨域數據傳輸得以安全進行。(實現一個跨域請求的方式，其中html訪問網址為http://127.0.0.1:8009; 服務器監聽端口為：8010)

(1)html頁面內容

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="UTF-8"> 
  5.         <title>test CORS</title> 
  6.     </head> 
  7.     <body> 
  8.         CORS 
  9.         <script src="https://code.bdstatic.com/npm/axios@0.20.0/dist/axios.min.js"></script> 
  10.         <script> 
  11.             axios('http://127.0.0.1:8010', { 
  12.                 method: 'get' 
  13.             }).then(console.log) 
  14.         </script> 
  15.     </body> 
  16. </html> 

(2)服務器端代碼

  1. const express = require('express'); 
  2.  
  3. const app = express(); 
  4.  
  5. app.get('/', (req, res) => { 
  6.     console.log('get請求收到了?。。?); 
  7.     res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:8009'); 
  8.     res.send('get請求已經被處理'); 
  9. }) 
  10. app.listen(8010, () => { 
  11.     console.log('8010 is listening') 
  12. }); 

 本文轉載自微信公眾號「執鳶者」，可以通過以下二維碼關注。轉載本文請聯系執鳶者公眾號。

 

責任編輯：武曉燕 來源： 執鳶者
前端跨域策略
相關推薦

2021-10-19 22:23:05

typeof方式Instanceof

2021-05-09 22:00:59

TypeofInstanceof運算符

2021-06-02 07:02:42

js作用域函數

2021-07-19 07:02:10

瀏覽器進程單進程瀏覽器

2021-05-19 07:02:42

JS對象方法

2021-05-12 07:04:55

Js變量方式

2021-05-30 19:02:59

變量對象上下文

2021-06-28 07:12:28

賦值淺拷貝深拷貝

2021-07-14 07:00:53

瀏覽器技巧前端

2021-07-26 06:57:58

重繪回流前端

2021-06-09 07:01:30

前端CallApply

2021-11-19 09:01:09

防抖節流前端

2021-11-03 06:57:41

瀏覽器Jsonp安全

2021-12-03 06:59:23

操作符驗證點屬性

2021-07-08 07:01:53

瀏覽器安全前端

2021-07-26 05:01:55

瀏覽器渲染流程

2021-10-18 09:01:01

前端賦值淺拷貝

2021-08-04 06:56:49

HTTP緩存前端

2018-11-26 14:52:12

Web前端跨域

2021-08-02 06:49:46

HTTP網絡模型
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 欧美激情在线精品一区二区三区 | 一区二区三区国产 | 91天堂网| 三级免费毛片 | 久久精品美女 | 日韩视频精品在线 | www.青青草 | 久综合 | 先锋资源网站 | 国产在线二区 | 在线午夜电影 | 欧美午夜在线 | 日韩综合网 | 国产高清免费 | 久久久久久久久久久福利观看 | 国内精品久久精品 | 日韩福利在线 | 国产日韩欧美中文字幕 | 日韩成人在线网址 | 欧美日韩国产精品一区 | 久久福利 | 操操操av| 成人精品国产免费网站 | 国产成人区 | 国产精品毛片久久久久久久 | 成人影视网址 | 久久久久9999 | 激情久久网 | 中文字幕乱码亚洲精品一区 | 一区二区三区四区av | 欧美电影免费观看 | 亚洲欧美日韩精品久久亚洲区 | 国产乱码精品一区二区三区五月婷 | 狠狠操婷婷 | 国产成人在线免费 | 日日操夜夜干 | 国产亚洲精品精品国产亚洲综合 | 国产一区二区在线免费观看 | 日韩午夜在线观看 | 久久国产精品精品国产色婷婷 | 亚洲精品一区国产精品 |