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

Question

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

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

弹出窗口将从我的网站加载内容,但我的问题涉及嵌入的javascript(或iframe)行.这样做的最佳做法是什么？Google分析并优化使用javascript来修改主页.显然,iFrame也会起作用.

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

我的第一个想法就是使用iframe来加载我网站上的页面,并使用特定于页面/网站组合的网址参数.如果我走这条路线,有没有办法确定页面只是从嵌入特定域或网址前缀的iframe加载？可以通过javascript实现类似的功能吗？

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

Answer 1

如果你想把它保持为一个简单的,仅客户端的小部件,简单的答案就是你不能像你描述的那样完成它.

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

Referer Check

您可以验证引用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.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页面刮取嵌入代码和参数.