如何使用 CSP cookie 和 http referer 限制对我的 iframe 小部件的访问答案

【问题标题】：how to limit access to my iframe widget using CSP cookies and http referer如何使用 CSP cookie 和 http referer 限制对我的 iframe 小部件的访问
【发布时间】：2021-07-12 05:03:25
【问题描述】：

我正在开发一个网络应用程序（如小部件），我的潜在客户将在他们的网站上使用它来造福他们的用户。我正在考虑向他们提供应用程序的最佳方式，同时能够控制谁在使用我的小部件，以便我可以正确地向他们收费。

我查看了之前的一些帖子，例如 iframe for a widget 和 iframe best practices limitations 和 JS to load iframe，但它们已经 7 到 10 岁了，并不是我想要做的。

话虽如此，到目前为止......最好的交付方式似乎是以下几种方式的组合：

iframe
Content-Security-Policy frame-ancestorsHTTP 头
cookies + $http_referer 在服务器端检查以避免偷偷摸摸的用户

在加载时，我将发送带有 URL 的密钥以提供定制/品牌版本，并且我计划依靠 cookie 进行后续调用

我有几个问题：

我是否应该直接使用带有特定 URL 的 iframe 标记，例如

<iframe src="https://superwidget.com/SecretKey=12345678"></iframe>

或者我应该使用 JavaScript 使用相同的 URL 加载/创建 iframe 元素？除了能够在 JS 版本中延迟加载 iframe 之外，使用其中一种或另一种有什么好处？

所以我打算使用iframe / CSP / http referer / cookie 组合...有没有其他（更好的）方法来提供小部件并确保只允许观众使用它？
我在这里缺少的其他任何东西

任何帮助表示赞赏！

【问题讨论】：

为什么需要 iframe？这听起来就像您可以轻松地使用 javascript 将您的小部件添加到页面中，您将摆脱 iframe 的所有麻烦，并且您可以获得与源页面交互的能力，例如能够在需要时重定向到另一个页面，或检查屏幕大小并在移动设备上最小化，并允许最大化到完整的视口大小等...您可以验证对后端的任何调用来自该已知域，也...

标签： javascript security cookies iframe

【解决方案1】：

我的建议是使用 javascript。这样，在您的 javascript 中，您可以验证调用 javascript 的页面的 DOMAIN NAME 是否已获得该客户端令牌的授权。如果是，则使用自定义内容加载 IFrame。

这也将使您能够更好地控制用户体验。

【讨论】：

【解决方案2】：

如果我是你，我会使用简单的 iframe。应使用密钥（例如?key=some-special-key-in-base-16-58-or-64）检索该页面。

您的后端应稍后验证 Refer: not-your-site.com header 是否已针对该特定 API 密钥列入白名单。

如果您需要使用 js 小部件，则可以在请求 js 文件时使用密钥作为参数，并让验证后端使用经典的 Host: not-your-site.com 标头。

如果密钥或推荐无效，您可以发送一个自定义小部件，要求他们支付/更新系统。一些访问该站点的人可能不喜欢这个想法，因此请仔细考虑实施它。如果您不在团队金字塔的顶端，请让责任更大的人选择。

使用 iframe 小部件优于 js 小部件的优点是它有一个沙箱，因此父站点无法访问。请注意，如果您想让您的消费者使用他们自己的 js 修改小部件，这可能是一个缺点。

请注意，如果您希望所有这些都正常工作，则必须始终正确设置 SCP。

最后提示：至少在 Windows 10 上，使用 hosts 文件在同一台机器上伪造两个站点是行不通的，因此您必须使用两台不同的机器。

【讨论】：