Javascript 客户端网站上的Iframe小部件和API认证

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

小部件是一个javascript，它从托管在我的服务器上的页面加载到iframe中。该页面是一个react前端，通过API与我的.NET后端通信。在url中，我获取用户id，以知道要加载哪个小部件。www.example.com/widget/userid

该小部件不需要最终用户登录或获得身份验证，但是，我不想公开我的API，我需要至少从我自己的用户那里获得身份验证，然后他们才能收到可以嵌入的javascript或任何其他有人建议的实践

---

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

如果我正确理解了您的问题，您应该使用postmessage。 在发送方：

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

然后在接收器端，您可以执行以下操作：

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

通过这种方式，您可以使iFrame与其他JS元素通信

---

希望能有所帮助。

如果我正确理解了你的问题，你应该使用postmessage。 在发送方：

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

然后在接收器端，您可以执行以下操作：

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

通过这种方式，您可以使iFrame与其他JS元素通信

希望对你有帮助