Oddzwanianie na Facebooku dołącza „# _ = _” do zwracanego adresu URL

Oddzwanianie na Facebooku zaczęło dodawać #_=_podkreślenie skrótu do zwrotnego adresu URL

Czy ktoś wie dlaczego? Jakie jest rozwiązanie?

za pośrednictwem aktualizacji platformy Facebook :

Zmiana zachowania przekierowania sesji

W tym tygodniu zaczęliśmy dodawać fragment # ____ = ____ do redirect_uri, kiedy to pole jest puste. Upewnij się, że aplikacja obsługuje ten problem.

Aby temu zapobiec, ustaw redirect_uri w żądaniu adresu URL logowania w następujący sposób: (używając Facebooka php-sdk)

$facebook->getLoginUrl(array('redirect_uri' => $_SERVER['SCRIPT_URI'],'scope' => 'user_about_me'));

AKTUALIZACJA

Powyżej jest dokładnie tak, jak mówi dokumentacja , aby to naprawić. Udokumentowane rozwiązanie Facebooka nie działa. Rozważ zostaw komentarz na blogu na temat aktualizacji platformy Facebook i śledź ten błąd, aby uzyskać lepszą odpowiedź. Do tego czasu dodaj następujący tag do tagu head, aby rozwiązać ten problem:

<script type="text/javascript">
    if (window.location.hash && window.location.hash == '#_=_') {
        window.location.hash = '';
    }
</script>

Lub bardziej szczegółowa alternatywa (dzięki 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>

TL; DR

if (window.location.hash === "#_=_"){
    history.replaceState 
        ? history.replaceState(null, null, window.location.href.split("#")[0])
        : window.location.hash = "";
}

Pełna wersja z instrukcjami krok po kroku

// 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 = "";

    }

}

Krok po kroku:

1. Wchodzimy do bloku kodu tylko wtedy, gdy fragmentjest #_=_.
2. Sprawdź, czy przeglądarka obsługuje window.replaceStatemetodę HTML5 .
   1. Wyczyść adres URL, dzieląc #i biorąc tylko pierwszą część.
   2. Powiedz, historyaby zastąpić bieżący stan strony czystym adresem URL. Zmienia to bieżący wpis historii zamiast tworzyć nowy. Oznacza to, że przyciski Wstecz i Dalej będą działać tak, jak chcesz. ;-)
3. Jeśli przeglądarka nie obsługuje wspaniałych metod historii HTML 5, po prostu najlepiej wyczyść adres URL, ustawiając skrót na pusty ciąg znaków. Jest to kiepski powrót, ponieważ wciąż pozostawia końcowy skrót (przykład.com/#), a także dodaje pozycję historii, więc przycisk Wstecz zabierze Cię z powrotem #_-_.

Dowiedz się więcej o history.replaceState.

Dowiedz się więcej o window.location.

jeśli chcesz usunąć pozostałe „#” z adresu URL

$(window).on('load', function(e){
  if (window.location.hash == '#_=_') {
    window.location.hash = ''; // for older browsers, leaves a # behind
    history.pushState('', document.title, window.location.pathname); // nice and clean
    e.preventDefault(); // no page reload
  }
})

Zostało to wdrożone przez Facebooka ze względów bezpieczeństwa. Oto wyjaśnienie Erica Osgooda, członka zespołu Facebooka:

Zostało to oznaczone jako „zgodnie z projektem”, ponieważ zapobiega potencjalnej luce w zabezpieczeniach.

Niektóre przeglądarki dołączają fragment skrótu z adresu URL na końcu nowego adresu URL, do którego zostały przekierowane (jeśli ten nowy adres URL sam nie ma fragmentu skrótu).

Na przykład, jeśli example1.com zwraca przekierowanie do example2.com, to przeglądarka przechodząca do example1.com # abc przejdzie do example2.com # abc, a zawartość fragmentu skrótu z example1.com będzie dostępna dla skryptu na example2 .com.

Ponieważ możliwe jest przekierowanie jednego uwierzytelnienia do drugiego, możliwe byłoby, aby wrażliwe dane uwierzytelniające z jednej aplikacji były dostępne dla innej.

Aby temu zaradzić, należy dodać nowy fragment skrótu do adresu URL przekierowania, aby zapobiec temu zachowaniu przeglądarki.

Jeśli niepokojąca jest estetyka lub zachowanie wynikowego adresu URL po stronie klienta, możliwe byłoby użycie window.location.hash (lub nawet własnego przekierowania po stronie serwera), aby usunąć obrażające znaki.

Źródło: https://developers.facebook.com/bugs/318390728250352/

Nie jestem pewien, dlaczego to robią, ale możesz to obejść, resetując skrót u góry strony:

if (window.location.hash == "#_=_")
  window.location.hash = "";

Możesz również określić swój skrót w redirect_uriparametrze wywołania zwrotnego na Facebooku, co może być pomocne w pewnych okolicznościach, np /api/account/callback#home. Gdy zostaniesz przekierowany z powrotem, będzie to przynajmniej skrót, który odpowiada znanej trasie, jeśli używasz backbone.js lub podobnego (nie jestem pewien co do jquery mobile).

Facebook używa ramki, a wszystko wewnątrz niej działa przy użyciu komunikacji AJAX. Największym problemem w tym przypadku jest zachowanie bieżącego stanu strony. O ile rozumiem, Facebook postanowił użyć symulowanych kotwic. Oznacza to, że jeśli gdzieś kliknąłeś, symulują to jako zakotwiczenie na twojej stronie, a kiedy rozpoczyna się komunikacja AJAX, zmieniają również bit zakotwiczenia twojego adresu URL.

To rozwiązanie pomaga normalnie przy ponownym ładowaniu strony (nie ENTER, naciśnij F5), ponieważ przeglądarka wysyła cały adres URL z kotwicami do serwera Facebook. Dlatego Facebook wybiera najnowszy stan (to, co widzisz) i możesz odtąd kontynuować.

Gdy funkcja zwrotna powraca z #_=_nią, oznacza to, że strona była w stanie podstawowym przed opuszczeniem. Ponieważ ta kotwica jest analizowana przez przeglądarkę, nie musisz się o nią martwić.

Duże irytujące, szczególnie dla aplikacji, które analizują URI, a nie tylko czytają $ _GET ... Oto hack, który rzuciłem razem ... Ciesz się!

<html xmlns:fb='http://www.facebook.com/2008/fbml'>
<head>
        <script type="text/javascript">
        // Get rid of the Facebook residue hash in the URI
        // Must be done in JS cuz hash only exists client-side
        // IE and Chrome version of the hack
        if (String(window.location.hash).substring(0,1) == "#") {
                window.location.hash = "";
                window.location.href=window.location.href.slice(0, -1);
                }
        // Firefox version of the hack
        if (String(location.hash).substring(0,1) == "#") {
                location.hash = "";
                location.href=location.href.substring(0,location.href.length-3);
                }
        </script>
</head>
<body>
URI should be clean
</body>
</html>

Może to stać się poważnym problemem, jeśli używasz frameworka JS z adresami URL mieszania (/ #! /), Np. Angular. Rzeczywiście, Angular uzna adresy URL z fragmentem nie będącym hashbangiem za nieprawidłowe i zgłosi błąd:

Error: Invalid url "http://example.com/#_=_", missing hash prefix "#!".

Jeśli jesteś w takim przypadku (i przekierowujesz do katalogu głównego domeny), zamiast robić:

window.location.hash = ''; // goes to /#, which is no better

Po prostu wykonaj:

window.location.hash = '!'; // goes to /#!, which allows Angular to take care of the rest

Nie widzę związku tego problemu z Facebookiem AJAX. W rzeczywistości problem występuje również przy wyłączonym JavaScript i logowaniu opartym wyłącznie na przekierowaniach.

Przykładowa wymiana z Facebookiem:

1. GET <https://www.facebook.com/dialog/oauth?client_id=MY_APP_ID&scope=email&redirect_uri=MY_REDIRECT_URL> RESPONSE 302 Found Location: <https://www.facebook.com/connect/uiserver.php?[...]>  
2. GET <https://www.facebook.com/connect/uiserver.php?[...]> RESPONSE 302 Found MY_REDIRECT_URL?code=FB_CODE#_  
3. GET MY_REDIRECT_URL?code=FB_CODE#_  

Zdarza się tylko dla Firefoksa.

Dodanie tego do mojej strony przekierowania naprawiło dla mnie problem ...

if (window.location.href.indexOf('#_=_') > 0) {
    window.location = window.location.href.replace(/#.*/, '');
}

Za pomocą kątowego i kątowego routera interfejsu użytkownika możesz to naprawić

    app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

      // Make a trailing slash optional for all routes
      // - Note: You'll need to specify all urls with a trailing slash if you use this method.
      $urlRouterProvider.rule(function ($injector, $location) {
        /***
        Angular misbehaves when the URL contains a "#_=_" hash.

        From Facebook:
          Change in Session Redirect Behavior
          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.

        Fix:
          http://stackoverflow.com/questions/7131909/facebook-callback-appends-to-return-url#answer-7297873
        ***/
        if ($location.hash() === '_=_'){
          $location.hash(null);
        }

        var path = $location.url();

        // check to see if the path already has a slash where it should be
        if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
          return;
        }
        else if (path.indexOf('?') > -1) {
          $location.replace().path(path.replace('?', '/?'));
        }
        else {
          $location.replace().path(path + '/');
        }
      });

      // etc ...
    });
});

Jeśli korzystasz z routera vue, możesz dołączyć do listy tras:

{
  path: '/_=_',
  redirect: '/', // <-- or other default route
},

Niedawno wprowadzono zmianę w sposobie, w jaki Facebook obsługuje przekierowania sesji. Zobacz „Zmiana w zachowaniu przekierowania sesji” w poście na blogu Operation Developer Love w tym tygodniu .

Dla mnie przekierowuję JavaScript na inną stronę, aby się go pozbyć #_=_. Poniższe pomysły powinny zadziałać. :)

function redirect($url){
    echo "<script>window.location.href='{$url}?{$_SERVER["QUERY_STRING"]}'</script>";        
}

Obejściem, które zadziałało dla mnie (przy użyciu Backbone.js), było dodanie „# /” na końcu adresu URL przekierowania przekazywanego do Facebooka. Facebook zachowa podany fragment i nie doda własnego „_ = _”.

Po zwrocie Backbone usunie część „# /”. W przypadku AngularJS, dołączając „#!” na zwrotny adres URL powinien działać.

Zauważ, że identyfikator fragmentu oryginalnego adresu URL jest zachowywany podczas przekierowania (przez kody stanu HTTP 300, 301, 302 i 303) przez większość przeglądarek, chyba że adres URL przekierowania również ma identyfikator fragmentu. To wydaje się być zalecanym zachowaniem .

Jeśli używasz skryptu procedury obsługi, który przekierowuje użytkownika w inne miejsce, możesz dodać „#” do adresu URL przekierowania, aby zastąpić identyfikator fragmentu pustym ciągiem.

Wiem, że ta odpowiedź jest spóźniona, ale jeśli używasz paszportów, możesz chcieć to zobaczyć.

return (req, res, next) => {
    console.log(req.originalUrl);
    next();
};

Napisałem to oprogramowanie pośrednie i zastosowałem je do ekspresowej instancji serwera, a oryginalny adres URL, który mam, jest bez "#_=_". Wygląda na to, że gdy zastosujemy instancję passporJS jako oprogramowanie pośrednie do instancji serwera, nie przyjmuje ona tych znaków, ale jest widoczna tylko na pasku adresu naszych przeglądarek.

Używam tego, aby również usunąć symbol „#”.

<script type="text/javascript">
    if (window.location.hash && window.location.hash == '#_=_') {
        window.location.href = window.location.href.split('#_=_')[0];
    }
</script>

Używam Angular 2 (RC5) i tras opartych na haszowaniu, robię to:

const appRoutes: Routes = [
  ...
  {path: '_', redirectTo: '/facebookLoginSuccess'},
  ...
]

i

export const routing = RouterModule.forRoot(appRoutes, { useHash: true });

O ile rozumiem, =znak na trasie jest interpretowany jako część opcjonalnej definicji parametrów trasy (patrz https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters ) , więc nie bierze udziału w dopasowywaniu trasy.

Dla użytkowników PHP SDK

Rozwiązałem problem po prostu usuwając dodatkową część przed przekazaniem.

 $loginURL = $helper->getLoginUrl($redirectURL, $fbPermissions);
 $loginURL = str_replace("#_=_", "", $loginURL);
 header("Location: " . $loginURL);

Spowoduje to usunięcie dołączonych znaków do Twojego adresu URL

<script type="text/javascript">
 var idx=window.location.toString().indexOf("#_=_"); 
   if (idx > 0) { 
     window.location = window.location.toString().substring(0, idx); 
   } 
</script>

Najprostszym i czystym rozwiązaniem do usunięcia „# _ = _” (PHP):

Zamiast „nagłówka („ Lokalizacja: xxx.php ”);” użyć „echo (” location.href = 'xxx.php'; ”);”