客户端的顶级重定向 Facebook Canvas / X-Frame-Options Deny答案

【问题标题】：Top level redirect at client side Facebook Canvas / X-Frame-Options Deny客户端的顶级重定向 Facebook Canvas / X-Frame-Options Deny
【发布时间】：2016-11-11 17:40:33
【问题描述】：

我正在尝试使用 Java/Spring Social Facebook 库构建 Facebook Canvas 应用程序。

当用户第一次访问 Canvas 页面 (apps.facebook.com/mycanvasapp) 时，facebook 正在对我的应用程序 URL 进行 HTTP POST，正文中包含“signed_request”。

当用户第一次访问应用程序时，facebook 在 POST 正文中发送空的“oauth_token”；因此我的应用程序返回 HTTP 200 代码和下面的 Java 脚本代码，以向用户显示授权对话框。

top.location.href='https://www.facebook.com/v2.5/dialog/oauth?client_id=12345&redirect_uri=https://myapp.com/canvas/';

这是为了在客户端/浏览器端进行顶级重定向，因为 iframe 中不允许 HTTP 服务器重定向。

但是，我确实在浏览器/Chrome 日志中遇到以下错误，并且无法向用户显示授权窗口。

拒绝在框架中显示“https://myapp.com/canvas/”，因为它将“X-Frame-Options”设置为“DENY”。

在其他帖子中提出了类似的问题 - Web App in Facebook Canvas / X-Frame-Options Deny Case 它建议进行浏览器端顶级重定向而不是 HTTP 服务器重定向。

我只在 Java Script 中使用“top.location.href”进行顶级浏览器重定向，但仍然遇到同样的问题。

当我在 curl/命令行中重放请求时，这是我的应用返回的响应，这对我来说似乎没问题。

 HTTP/1.1 200 OK
 Connection: keep-alive
 Server: Apache-Coyote/1.1
 X-Content-Type-Options: nosniff
 X-Xss-Protection: 1; mode=block
 Cache-Control: no-cache, no-store, max-age=0, must-revalidate
 Pragma: no-cache
 Expires: 0
 Strict-Transport-Security: max-age=31536000 ; includeSubDomains
 X-Frame-Options: DENY
 Access-Control-Allow-Origin: *
 Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS, DELETE
 Access-Control-Max-Age: 3600
 Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, X-Auth-Token
 Content-Language: en-US
 Transfer-Encoding: chunked
 Date: Sat, 09 Jul 2016 04:40:17 GMT
 Via: 1.1 vegur
<script>top.location.href='https://www.facebook.com/v2.5/dialog/oauth?client_id=12345&redirect_uri=https://myapp.com/canvas/';</script>

调整“X-Frame-Options”标头字段似乎没有多大帮助。

我错过了什么？有人可以提出一个可行的解决方案吗？

有一些关于使用 Facebook Java Script SDK 库的建议。但由于我的应用包含在 Facebook Canvas 页面中，在访问 Canvas 页面时，Facebook 会向我的服务器发送 HTTP Post，因此想知道如何在此过程开始之前加载 HTML/Java Script 以加载 Facebook Java Script SDK 库。

PS：我在我的应用程序中使用 org.springframework.social.facebook.web.CanvasSignInController Spring 预构建控制器。

【问题讨论】：

“所以想知道如何在此过程开始之前加载 HTML/Java Script 以加载 Facebook Java Script SDK 库” - 在此之前你不能这样做。但是你可以继续检查 signed_request 服务器端——如果它不包含登录用户，那么你输出 HTLM/JS 代码来触发登录客户端。（你永远不应该“自动”这样做，这只是糟糕的用户体验——为用户提供一个链接/按钮，他们可以点击登录。）
感谢您的有用提示。

标签： facebook spring-security facebook-canvas x-frame-options spring-social-facebook

【解决方案1】：

我通过禁用/抑制来自我的服务器的 POST 响应的安全标头解决了这个问题，

X-Content-Type-Options: nosniff X-Xss-Protection: 1;模式=块缓存控制：无缓存，无存储，最大年龄=0，必须重新验证严格的传输安全性： max-age=31536000 ；包括子域 X 框架选项：拒绝访问控制允许来源：* 访问控制允许方法：POST、GET、PUT、OPTIONS、DELETE Access-Control-Max-Age: 3600 Access-Control-Allow-Headers: Origin, X-Requested-With、Content-Type、Accept、X-

关键是在标题中排除 X-Frame-Options 和 Strict-Transport-Security，这现在为我解决了问题。

【讨论】：