嵌入式 iframe/javascript 小部件中的安全性

Security in embedded iframe/javascript widget

本文关键字：安全性 小部 iframe javascript 嵌入式      更新时间：2023-09-26

我正在建立一个功能类似于Google Analytics的网站。我不是在做分析，但我正在尝试提供一行javascript或一行iframe，这将为其他网站添加功能。

具体来说，嵌入的内容将是一个按钮，该按钮将弹出一个新窗口并允许用户执行某些操作。最终，用户将完成并且窗口将关闭，此时按钮将更新为反映用户已完成流的新元素。

弹出窗口将从我的网站加载内容，但我的问题与javascript(或iframe(的嵌入式行有关。 执行此操作的最佳实践方法是什么？谷歌分析和优化使用javascript来修改主机页面。显然，iFrame也可以工作。

我担心的是有人会从一个站点复制嵌入代码并将其放在另一个站点上。实现我的脚本/iframe 的每个页面/网站组合都将有一个唯一的 ID，该网站的开发人员将从我的网站上经过身份验证的帐户生成该 ID。 然后，我为他们提供适当的嵌入代码。

我的第一个想法是只使用一个 iframe，它使用特定于页面/网站组合的 url 参数从我的网站上加载页面。如果我走这条路，有没有办法确定页面仅从嵌入在特定域或 url 前缀上的 iframe 加载？用javascript可以完成类似的事情吗？

我阅读了这篇文章，这很有帮助，但我的用例有点不同，因为我实际上会弹出内容供用户交互。 令人担忧的是，托管我的嵌入的网站的敌人会欺骗性地引诱他们自己的用户使用小部件。这些用户会认为他们代表敌方网站与我的网站进行交互，但实际上是代表友好网站进行交互。

如果你想

把它保留为一个简单的，仅限客户端的小部件，简单的答案是你不能完全按照你的描述去做。

为此

想到的两个解决方案如下，第一个是折衷但简单，第二个涉及更多(对于您和您的小部件的用户(。

推荐人检查

您可以验证引用 HTTP 标头以检查域是否与特定站点 ID 的预期域匹配，但请记住，并非所有浏览器都会发送此标头(如果引用页面是 HTTPS，则大多数浏览器不会发送(，并且某些浏览器隐私插件可以配置为保留它，在这种情况下，您的小部件将无法工作，或者您需要额外的， 笨拙，一步到用户体验。

  1. 网站www.foo.com使用嵌入式脚本嵌入您的小部件<script src="//example.com/widget.js?siteId=1234&pageId=456"></script>
  2. 您的小部件使用服务器端代码动态生成.js文件(例如，对.js文件的请求可以遵循服务器上的重写规则以映射到PHP/ASPX(。
  3. 服务器端代码检查referer HTTP 标头，以查看它是否与数据库中的预期值匹配。
  4. 在匹配时，小部件正常运行。
  5. 在不匹配时，或者如果引用为空白/丢失，小部件仍将运行，但会有一个额外的步骤要求用户确认他们已从www.foo.com访问小部件
  6. 为了使确认免受点击劫持，您必须在弹出窗口中打开确认步骤。

服务器检查

对于您的目的来说可能有点过度设计，并且对于希望嵌入您的小部件的客户来说，可能会变得过于复杂 - 您决定。

  1. 网站www.foo.com希望为从用户接收的当前页面请求嵌入您的小部件。
  2. www.foo.com服务器向您托管的 API 发出 API 请求(传递密钥(，请求页面 ID 456 的一次性密钥。
  3. 您的 API 验证密钥，生成安全的一次性密钥并传回一个值，同时将请求记录在数据库中。
  4. www.foo.com嵌入脚本，如下所示<script src="//example.com/widget.js?siteId=1234&oneTimeKey=231231232132197"></script>
  5. 您的小部件使用服务器端代码动态生成 js 文件(例如，.js可以遵循服务器上的重写规则以映射到 PHP/ASPX(。
  6. 服务器端代码检查oneTimeKey和siteId组合以检查其是否有效，如果是，则生成小部件代码并删除数据库记录。
  7. 如果用户重新加载页面，将重复上述步骤，并生成新的一次性密钥。这将防止页面抓取嵌入代码和参数evil.com。

这里的回应非常彻底，并提供了很多很棒的信息和想法。我通过在服务器端验证 X-Frame-Options 标头来解决这个问题，尽管在浏览器中对这些标头的支持不完整，并且可能是欺骗性的。

相关文章：