5

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

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

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

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

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

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

4

2 回答 2

11

如果您想将其保持为一个简单的、仅限客户端的小部件，那么简单的答案是您不能完全按照您的描述进行操作。

为此想到的两个解决方案如下，第一个是妥协但简单，第二个涉及更多（对于您和您的小部件的用户）。

推荐人检查

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

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

服务器检查

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

  1. 网站www.foo.com希望为它从用户接收的当前页面请求嵌入您的小部件。
  2. 服务器向您托管的www.foo.comAPI 发出 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页面抓取嵌入代码和参数。
于 2013-08-21T08:23:07.450 回答
0

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

于 2015-01-27T20:57:02.817 回答