postMessage前端跨域並前端監聽

時間 2019-12-08

標籤 postmessage 前端監聽简体版

原文原文鏈接

有時候會遇到傻X需求，好比前端單點登錄！遇到需求，就要去想解決辦法，
這裏我給你們作一個簡單的前端單點登錄的解決方案，
用到的就是postMessage跨域信息傳輸以及onstorage的監聽。
本文用到的知識點 koa架設靜態資源服務、跨域、postMessage的用法
、onstorage監聽storage

第一步、架設兩個不一樣端口的服務

咱們這裏用koa2來搭建兩個服務到不一樣的端口，來模擬一下真正的工做中須要出現的跨域狀況。
很是的簡單主要用到 koa-static這個中間件
搭建起來也是很是容易的，若是你們想學node相關的知識能夠加我微信shouzi_1994 或者在博客下面留言你的聯繫方式這裏就很少說廢話了直接上代碼視頻內會有詳細的搭建步驟html

// localhost:4000
const Koa = require('koa');
const path = require('path')
const static = require('koa-static')
const app = new Koa();

//設置靜態資源的路徑 
const staticPath = './static'

app.use(static(
    path.join( __dirname,  staticPath)
  ))

  
console.log("服務啓動在4000端口")

app.listen(4000);


// localhost:3000
const Koa = require('koa');
const path = require('path')
const static = require('koa-static')
const app = new Koa();

//設置靜態資源的路徑 
const staticPath = './static'

app.use(static(
    path.join( __dirname,  staticPath)
  ))


console.log("服務啓動在4000端口")

app.listen(4000);

第二步、跨域通信postMessage

咱們首先來看一下 postMessage的API前端

otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow
其餘窗口的一個引用，好比iframe的contentWindow屬性、執行window.open返回的窗口對象、或者是命名過或數值索引的window.frames。
message
將要發送到其餘 window的數據。它將會被結構化克隆算法序列化。這意味着你能夠不受什麼限制的將數據對象安全的傳送給目標窗口而無需本身序列化。[1]
targetOrigin
經過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值能夠是字符串""（表示無限制）或者一個URI。在發送消息的時候，若是目標窗口的協議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值，那麼消息就不會被髮送；只有三者徹底匹配，消息纔會被髮送。這個機制用來控制消息能夠發送到哪些窗口；例如，當用postMessage傳送密碼時，這個參數就顯得尤其重要，必須保證它的值與這條包含密碼的信息的預期接受者的origin屬性徹底一致，來防止密碼被惡意的第三方截獲。若是你明確的知道消息應該發送到哪一個窗口，那麼請始終提供一個有確切值的targetOrigin，而不是。不提供確切的目標將致使數據泄露到任何對數據感興趣的惡意站點。
transfer 可選
是一串和message 同時傳遞的 Transferable 對象. 這些對象的全部權將被轉移給消息的接收方，而發送一方將再也不保有全部權。node

怎麼樣是否是很容易理解，這裏給你們中文化一下。
要傳輸的那個（父）子窗口.postMessage(傳輸的內容, 傳輸到哪一個地址, [權限是否轉移（通常不用）]);算法

提早說一下，要想跨域傳輸，必須是父子頁面，也就是說，是經過js Open的頁面，或者ifream嵌套的頁面
好了咱們開始來寫代碼跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <!-- postMessage和iframe解決普通的跨域問題 -->
    我是端口3000網站的內容
    <button onclick="send()">發消息給兒子</button>
    
    <iframe style="display:none" src="http://localhost:4000" frameborder="0"></iframe>
<script>
        function send() { 
                window.frames[0].postMessage({a:"1"},"http://localhost:4000"); // 觸發跨域子頁面的messag事件
        }

    window.addEventListener('message', function(event) {
        console.info('兒子來信了', event);
    }, false);




</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <!-- postMessage和iframe解決普通的跨域問題 -->
    我是端口4000網站的內容
    <button onclick="send()">發消息給爸爸</button>
    
    <iframe style="display:none" src="http://localhost:4000" frameborder="0"></iframe>
<script>
       window.addEventListener("message",function(event){
           console.log("爸爸來信了：", event)
        },false)

      function send() {
        parent.postMessage({a:1}, 'http://localhost:3000'); // 
     }

</script>

</body>
</html>

寫到這裏咱們已經實現了父子頁面的跨域通信，可是這個通信只發生在一個窗口內啊，並無達到我想要的效果，該怎麼辦呢。瀏覽器

監聽數值變化，作出及時反應

到這裏你們須要思考，什麼東西是瀏覽器上的全部同域名網站都能看到的呢？
沒錯，storage，咱們只須要對這個進行監聽就行了。安全

這裏咱們選擇監聽 loacalStorage 如今咱們對子頁面作一下改進微信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <!-- postMessage和iframe解決普通的跨域問題 -->
    我是端口4000網站的內容
    <button onclick="send()">發消息給爸爸</button>
    
    <iframe style="display:none" src="http://localhost:4000" frameborder="0"></iframe>
<script>
    
       window.addEventListener("message",function(event){
           console.log("爸爸來信了：", event)
           var data = JSON.stringify(event.data)
           window.localStorage.setItem("data",data)
        },false)

        window.onstorage(function(st){
            console.log(st.key,st.value)
        })
      function send() {
        parent.postMessage({a:1}, 'http://localhost:3000'); // 
     }

</script>

</body>
</html>

看，咱們是否是到如今就可以針對跨域傳輸的內容作出響應了呢？app