我正在开发一个 Javascript 小部件，它将使用 Iframe 嵌入到客户站点上。
小部件代码使用 API 密钥对我的后端服务进行 API 调用。每个不同客户端的 API 密钥都会改变。
此刻，API 密钥在 iframe src 标记中可见。这意味着任何人都可以轻松地在页面源代码中找到 API 密钥，并且未经授权的用户可以轻松调用 API。
在这种情况下保护 API 访问的最佳方法是什么？我考虑过使用客户端密码来加密 API 密钥，但这并不能解决问题，因为任何拦截密钥的人仍然可以通过验证并在 API 后端进行调用。
网上已经有一些关于此的问题，但没有关于如何实施的详细建议。
我的小部件是由 React.js 应用程序生成的 HTML，API 后端是 Ruby on Rails。
Google 地图允许您嵌入地图，如 https://mapsurl.com/?address=123Street&api_key=KDFJSDKFHSH
并且密钥是公开的。之所以安全，是因为他们会检查引荐来源网址。它不能在其他网站上使用，因为它们会发送错误的引荐来源网址。因此，如果您正在创建一个人们可以嵌入到他们网站中的小部件，您可以从他们那里收集嵌入的 URL，并在没有该引用的情况下拒绝请求。