Facebook回调已经开始追加#_=_哈希下划线返回URL
有人知道为什么吗?解决方案是什么?
Facebook回调已经开始追加#_=_哈希下划线返回URL
有人知道为什么吗?解决方案是什么?
当前回答
使用Angular 2 (RC5)和基于哈希的路由,我这样做:
const appRoutes: Routes = [
...
{path: '_', redirectTo: '/facebookLoginSuccess'},
...
]
and
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });
据我所知,路由中的=字符被解释为可选路由参数定义的一部分(见https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters),因此不涉及路由匹配。
其他回答
博士TL;
if (window.location.hash === "#_=_"){
history.replaceState
? history.replaceState(null, null, window.location.href.split("#")[0])
: window.location.hash = "";
}
完整版本与一步一步的说明
// Test for the ugliness.
if (window.location.hash === "#_=_"){
// Check if the browser supports history.replaceState.
if (history.replaceState) {
// Keep the exact URL up to the hash.
var cleanHref = window.location.href.split("#")[0];
// Replace the URL in the address bar without messing with the back button.
history.replaceState(null, null, cleanHref);
} else {
// Well, you're on an old browser, we can get rid of the _=_ but not the #.
window.location.hash = "";
}
}
循序渐进:
We'll only get into the code block if the fragment is #_=_. Check if the browser supports the HTML5 window.replaceState method. Clean the URL by splitting on # and taking only the first part. Tell history to replace the current page state with the clean URL. This modifies the current history entry instead of creating a new one. What this means is the back and forward buttons will work just the way you want. ;-) If the browser does not support the awesome HTML 5 history methods then just clean up the URL as best you can by setting the hash to empty string. This is a poor fallback because it still leaves a trailing hash (example.com/#) and also it adds a history entry, so the back button will take you back to #_-_.
了解更多关于历史的知识。
了解window.location的更多信息。
这是Facebook出于安全考虑而设计的。下面是Facebook团队成员埃里克·奥斯古德的解释:
This has been marked as 'by design' because it prevents a potential security vulnerability. Some browsers will append the hash fragment from a URL to the end of a new URL to which they have been redirected (if that new URL does not itself have a hash fragment). For example if example1.com returns a redirect to example2.com, then a browser going to example1.com#abc will go to example2.com#abc, and the hash fragment content from example1.com would be accessible to a script on example2.com. Since it is possible to have one auth flow redirect to another, it would be possible to have sensitive auth data from one app accessible to another. This is mitigated by appending a new hash fragment to the redirect URL to prevent this browser behavior. If the aesthetics, or client-side behavior, of the resulting URL are of concern, it would be possible to use window.location.hash (or even a server-side redirect of your own) to remove the offending characters.
来源:https://developers.facebook.com/bugs/318390728250352/
通过Facebook平台更新:
更改会话重定向行为 本周,我们开始在redirect_uri中添加一个片段#____=____ 该字段为空。请确保您的应用程序可以处理这个问题 的行为。
为了防止这种情况,在你的登录url请求中设置redirect_uri(使用Facebook php-sdk)
$facebook->getLoginUrl(array('redirect_uri' => $_SERVER['SCRIPT_URI'],'scope' => 'user_about_me'));
更新
上述内容正是文档中所述的修复此问题的方法。然而,Facebook记录的解决方案并不奏效。请考虑在Facebook平台更新博客上留下评论,并关注这个错误以获得更好的答案。在此之前,将以下内容添加到head标签以解决此问题:
<script type="text/javascript">
if (window.location.hash && window.location.hash == '#_=_') {
window.location.hash = '';
}
</script>
或者一个更详细的选择(感谢niftylettuce):
<script type="text/javascript">
if (window.location.hash && window.location.hash == '#_=_') {
if (window.history && history.pushState) {
window.history.pushState("", document.title, window.location.pathname);
} else {
// Prevent scrolling by storing the page's current scroll offset
var scroll = {
top: document.body.scrollTop,
left: document.body.scrollLeft
};
window.location.hash = '';
// Restore the scroll offset, should be flicker free
document.body.scrollTop = scroll.top;
document.body.scrollLeft = scroll.left;
}
}
</script>
我知道这个回复晚了,但如果您正在使用passportjs,您可能想看到这个。
return (req, res, next) => {
console.log(req.originalUrl);
next();
};
我已经编写了这个中间件,并将其应用于表示服务器实例,我得到的原始URL没有“#_=_”。看起来,当我们将passporJS的实例作为中间件应用到服务器实例时,它不接受这些字符,而只在浏览器的地址栏上可见。
使用Angular 2 (RC5)和基于哈希的路由,我这样做:
const appRoutes: Routes = [
...
{path: '_', redirectTo: '/facebookLoginSuccess'},
...
]
and
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });
据我所知,路由中的=字符被解释为可选路由参数定义的一部分(见https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters),因此不涉及路由匹配。