Redirect URI - How to remove "#_=_" from Facebook Redirect? #12

Closed
niftylettuce opened this Issue May 24, 2012 · 21 comments

Projects

None yet
@niftylettuce

UPDATE: See this comment towards end of this issue comment thread for the latest version of the fix for this issue.


Not sure how to fix this, since there isn't an immediate answer as to how to set the redirect URI.

Found this on SO: http://stackoverflow.com/questions/7693663/remove-from-the-facebook-redirect-url.

Also this will help to provide context: https://developers.facebook.com/bugs/196125357123225.

@niftylettuce

Here was my fix using Modernizr (with alternative in comments) ...

// Remove the ugly Facebook appended hash
// <https://github.com/jaredhanson/passport-facebook/issues/12>
if (window.location.hash && window.location.hash === "#_=_") {
  // If you are not using Modernizr, then the alternative is:
  //   `if (window.history && history.pushState) {`
  if (Modernizr.history) {
    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;
  }
}
@niftylettuce

I'll add this to the Readme since this is a common problem due to Facebook's current bug.

@niftylettuce

Thanks!

@arxpoetica

FYI: it's actually better to use window.history.replaceState('', document.title, window.location.pathname); if you don't want the #_=_ bug to remain in the history.

@niftylettuce

@arxpoetica thanks, how does this look? /cc @jaredhanson (do we need to update docs?)

// Remove the ugly Facebook appended hash
// <https://github.com/jaredhanson/passport-facebook/issues/12>
if (window.location.hash && window.location.hash === "#_=_") {
  // If you are not using Modernizr, then the alternative is:
  //   `if (window.history && history.replaceState) {`
  if (Modernizr.history) {
    window.history.replaceState("", 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;
  }
}
@arxpoetica

Yup. That's what I did in my app.

@niftylettuce

@jerone why'd you remove your comment? how about this /cc @arxpoetica

// Remove the ugly Facebook appended hash
// <https://github.com/jaredhanson/passport-facebook/issues/12>
(function removeFacebookAppendedHash() {
  if (!window.location.hash || window.location.hash !== '#_=_')
    return;
  if (window.history && window.history.replaceState)
    return window.history.replaceState('', document.title, window.location.pathname + window.location.search);
  // 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;
}());
@arxpoetica

Word.

@jerone

@jerone why'd you remove your comment?

Because I posted exactly what the comment already noted, which I stupidly saw after posting.

// If you are not using Modernizr, then the alternative is:
//   `if (window.history && history.replaceState) {`
@pedramphp

I can't believe that facebook hasn't fixed this issue, yet.
But thanks for the fix Guys.

@grabbou

I am not sure if that's a Facebook issue @pedramphp.

https://developers.facebook.com/blog/post/552/

This week, we started adding a fragment #= to the redirect_uri when this field is left blank. Please ensure that your app can handle this behavior.

@arcanis

The fragment is added even when the redirect_uri is not blank (actually, it doesn't work anyway without the redirect_uri parameter, as far as I can see) ... :(

And Facebook seems to have removed the bug, so it's great.

Could this hash be removed from passport side ? : /

@arcanis

I've found another Facebook bug about this, which heavily implies that :

  • The bug is actually the blog post description
  • It will never be fixed
  • It is made to force-kill the hash

I think that node-passport should support this and drop the hash altogether, since its only purpose is to prevent the previous one from being transmitted.

@yozaira

Thanks for the fix, guys! It was driving me crazy

@m3commish

Where do I place the code?

// Remove the ugly Facebook appended hash
// #12
(function removeFacebookAppendedHash() {
if (!window.location.hash || window.location.hash !== '#=')
return;
if (window.history && window.history.replaceState)
return window.history.replaceState("", document.title, window.location.pathname);
// 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;
}());

@framerate framerate referenced this issue in jaredhanson/passport Jul 21, 2015
Closed

Facebook Callback appends '#_=_' to Return URL #378

@Pantela777

When user try to log in with FB, then I redirect him to my web url "/fb", but this code is clear my "/fb" get param...

@BjarniLeifs

I had this problem and tried a lot of things.

How ever when I added website and hit quick start in the app (in website title bar on app site)
I saw : Setup the Facebook SDK for JavaScript

They said to put it after body and So I did.

window.fbAsyncInit = function() {
FB.init({
appId YOUR_APP_ID,
xfbml : true,
version : 'v2.4'
});
};

(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Everything worked after what ..

Since I'm using jwt and not session I had to add in the callback

app.get('/auth/facebook/callback', passport.authenticate('facebook', {
session: false,
successRedirect : '/',
failureRedirect : '/login'
}));

Now I get the information from Facebook but some variable's undefined, but it is step forward.

Hope this works for you too :)

@Globik

Епт, на дворе 2016 год, а до сих пор не исправили баг.

@cadilhac

@niftylettuce For completeness, it would be good to add the query string to the url rewrite:

return window.history.replaceState("", document.title, window.location.pathname + window.location.search);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment