客戶端網站上的iframe小部件和API驗證

Question

我正在構建一個應用程序，用戶可以在其中接收他們可以在自己的網站上嵌入的JavaScript行，以加載小部件並向網站訪問者提供某些信息並允許交互來自最終用戶。

這個小部件是一個javascript，它從我的服務器上託管的頁面加載到iframe中。該頁面是一個反應前端，通過API講述我的.NET後端。在url中，我得到用戶id來知道要加載哪個小部件。 www.example.com/widget/userid

小部件不需要最終用戶登錄或獲得身份驗證但是，我不想讓我的API公開，並且我至少需要從我自己的用戶進行身份驗證在他們收到他們可以嵌入的JavaScript或任何其他人可以建議的做法之前。

什麼是API認證的最佳實踐，即使頁面加載到我的用戶網站上的iframe中，頁面可以與其交談的最佳做法是什麼？並且不需要我的用戶網站訪問者登錄？

Answer 1

如果我正確理解你的問題，你應該使用postmessage。 在發送方：

parent.postMessage({ type: 'something',more data...}, '*') 

，然後在接收端，你可以這樣做：與其它JS元素

window.addEventListener('message', function (event) { 
    switch (event.data.type) { 
     case 'something': 
     // Do something 
     break; 
    } 
} 

這種方式可以使一個iFrame的通信。

希望它有一些幫助。