客户端网站上的iframe小部件和API的身份验证

Question

我正在构建一个应用程序，用户可以在其中接收可以嵌入自己网站的javascript行，以加载小部件并向网站访问者提供某些信息，并允许最终用户进行交互。

小部件是一个javascript，它从我的服务器上托管的页面加载iframe。该页面是一个反应前端，通过API与我的.NET后端进行通信。在网址中，我获取用户ID以了解要加载的窗口小部件。 www.example.com/widget/userid

小部件不需要最终用户登录或获得身份验证，但是，我不想公开我的API，我需要至少从我自己的用户进行身份验证才能收到他们可以嵌入的javascript或任何其他可以建议的做法。

即使在我的用户网站上的iframe中加载并且不要求我的用户网站访问者登录，页面可以与之交谈的API进行身份验证的最佳做法是什么？

Answer 1

如果我理解你的问题，你应该使用postmessage。 在发件人方面：

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

然后在接收方，您可以：

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

这样你就可以让iFrame与其他JS元素进行通信。

希望它有所帮助。