Callback di Facebook aggiunge '# _ = _' all'URL di ritorno

La richiamata di Facebook ha iniziato ad aggiungere la #_=_sottolineatura dell'hash all'URL di ritorno

Qualcuno sa perché? Qual'è la soluzione?

tramite gli aggiornamenti della piattaforma di Facebook :

Modifica del comportamento di reindirizzamento della sessione

Questa settimana, abbiamo iniziato ad aggiungere un frammento # ____ = ____ a redirect_uri quando questo campo viene lasciato vuoto. Assicurati che la tua app sia in grado di gestire questo comportamento.

Per evitare ciò, impostare redirect_uri nella richiesta dell'URL di accesso in questo modo: (usando Facebook php-sdk)

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

AGGIORNARE

Quanto sopra è esattamente come dice la documentazione per risolvere questo problema. Tuttavia, la soluzione documentata di Facebook non funziona. Ti consigliamo di lasciare un commento sul post sul blog degli aggiornamenti della piattaforma di Facebook e seguire questo errore per ottenere una risposta migliore. Fino ad allora, aggiungi quanto segue al tag head per risolvere questo problema:

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

O un'alternativa più dettagliata (grazie 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 = "";
}

Versione completa con istruzioni dettagliate

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

    }

}

Passo dopo passo:

1. Entreremo nel blocco di codice solo se lo fragmentè #_=_.
2. Controlla se il browser supporta il window.replaceStatemetodo HTML5 .
   1. Pulisci l'URL suddividendolo #e prendendo solo la prima parte.
   2. Indica historydi sostituire lo stato della pagina corrente con l'URL pulito. Ciò modifica la voce della cronologia corrente invece di crearne una nuova. Ciò significa che i pulsanti avanti e indietro funzioneranno nel modo desiderato. ;-)
3. Se il browser non supporta i fantastici metodi di cronologia HTML 5, ripulisci l'URL nel miglior modo possibile impostando l'hash su stringa vuota. Questo è un fallback scadente perché lascia ancora un hash finale (esempio.com/#) e inoltre aggiunge una voce di cronologia, quindi il pulsante Indietro ti riporterà a #_-_.

Ulteriori informazioni su history.replaceState.

Ulteriori informazioni su window.location.

se desideri rimuovere il "#" rimanente dall'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
  }
})

Questo è stato implementato da Facebook per motivi di sicurezza. Ecco la spiegazione di Eric Osgood, un membro del team di Facebook:

Questo è stato contrassegnato come "progettato" perché impedisce una potenziale vulnerabilità della sicurezza.

Alcuni browser aggiungeranno il frammento di hash da un URL alla fine di un nuovo URL a cui sono stati reindirizzati (se quel nuovo URL non ha esso stesso un frammento di hash).

Ad esempio, se example1.com restituisce un reindirizzamento a example2.com, un browser andando a example1.com # abc andrà a example2.com # abc e il contenuto del frammento di hash da example1.com sarebbe accessibile a uno script su example2 .com.

Dal momento che è possibile avere un flusso di reindirizzamento di un flusso verso un altro, sarebbe possibile avere dati di autenticazione sensibili da un'app accessibile a un'altra.

Ciò viene mitigato aggiungendo un nuovo frammento di hash all'URL di reindirizzamento per impedire questo comportamento del browser.

Se l'estetica o il comportamento sul lato client dell'URL risultante sono preoccupanti, sarebbe possibile utilizzare window.location.hash (o anche un reindirizzamento sul lato server) per rimuovere i caratteri offensivi.

Fonte: https://developers.facebook.com/bugs/318390728250352/

Non sei sicuro del perché lo stiano facendo, ma potresti aggirare il problema reimpostando l'hash nella parte superiore della pagina:

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

Puoi anche specificare il tuo hash sul redirect_uriparametro per il callback di Facebook, che potrebbe essere utile in determinate circostanze, ad es /api/account/callback#home. Quando verrai reindirizzato indietro, sarà almeno un hash che corrisponde a una route nota se stai usando backbone.js o simili (non sei sicuro di jquery mobile).

Facebook utilizza una cornice e al suo interno tutto funziona utilizzando la comunicazione AJAX. Il problema più grande in questo caso è preservare lo stato della pagina corrente. A quanto ho capito, Facebook ha deciso di utilizzare ancore simulate. Ciò significa che se hai fatto clic da qualche parte, lo simulano come un'ancora all'interno della tua pagina e quando inizia la comunicazione AJAX, cambiano anche il bit di ancoraggio del tuo URL.

Questa soluzione ti aiuta normalmente quando tenti di ricaricare la pagina (non INVIO, premi F5), perché il tuo browser invia l'intero URL con ancore al server di Facebook. Pertanto Facebook rileva l'ultimo stato (quello che vedi) e sei quindi in grado di continuare da lì.

Quando il callback ritorna con #_=_esso significa che la pagina era nel suo stato di base prima di lasciarla. Poiché questo ancoraggio viene analizzato dal browser, non è necessario preoccuparsene.

Importante fastidioso, specialmente per le app che analizzano l'URI e non solo leggono $ _GET ... Ecco l'hack che ho messo insieme ... Divertiti!

<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>

Questo può diventare una specie di problema serio se stai usando un framework JS con URL hashbang (/ #! /), Ad esempio Angular. Infatti, Angular considererà gli URL con un frammento non hashbang come non validi e genererà un errore:

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

Se ti trovi in ​​questo caso (e stai reindirizzando alla radice del tuo dominio), invece di fare:

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

Fai semplicemente:

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

Non vedo come questo problema sia legato a Facebook AJAX. In effetti il ​​problema si verifica anche con JavaScript disabilitato e accessi basati sul reindirizzamento puramente.

Uno scambio di esempio con Facebook:

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#_  

Succede solo con Firefox anche per me.

L'aggiunta di questo alla mia pagina di reindirizzamento ha risolto il problema per me ...

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

Con il router angolare e angolare, puoi risolvere questo problema

    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 ...
    });
});

Se stai usando vue-router, puoi aggiungere all'elenco dei percorsi:

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

Recentemente è stato introdotto un cambiamento nel modo in cui Facebook gestisce i reindirizzamenti delle sessioni. Vedere "Modifica del comportamento di reindirizzamento della sessione" nel post sul blog di Operation Developer Love di questa settimana per l'annuncio.

Per me, faccio il reindirizzamento JavaScript su un'altra pagina per sbarazzarmi di #_=_. Le idee qui sotto dovrebbero funzionare. :)

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

Una soluzione alternativa che ha funzionato per me (utilizzando Backbone.js) è stata l'aggiunta di "# /" alla fine dell'URL di reindirizzamento passato a Facebook. Facebook manterrà il frammento fornito e non aggiungerà il proprio "_ = _".

Al ritorno, Backbone rimuoverà la parte "# /". Per AngularJS, aggiungere "#!" all'URL di ritorno dovrebbe funzionare.

Si noti che l'identificatore di frammento dell'URL originale viene conservato al reindirizzamento (tramite i codici di stato HTTP 300, 301, 302 e 303) dalla maggior parte dei browser, a meno che l'URL di reindirizzamento abbia anche un identificatore di frammento. Questo sembra essere un comportamento raccomandato .

Se si utilizza uno script del gestore che reindirizza l'utente altrove, è possibile aggiungere qui "#" all'URL di reindirizzamento per sostituire l'identificatore di frammento con una stringa vuota.

So che questa risposta è in ritardo, ma se stai usando passportjs, potresti voler vedere questo.

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

Ho scritto questo middleware e l'ho applicato per esprimere l'istanza del server e l'URL originale che ho è senza "#_=_". Sembra che quando applichiamo l'istanza di passporJS come middleware all'istanza del server, non accetta quei caratteri, ma sono visibili solo sulla barra degli indirizzi dei nostri browser.

Uso questo per cancellare anche il simbolo '#'.

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

Utilizzando Angular 2 (RC5) e percorsi basati su hash, faccio questo:

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

e

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

Per quanto ho capito, il =carattere nel percorso viene interpretato come parte della definizione dei parametri del percorso opzionale (vedere https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters ) , quindi non coinvolto nella corrispondenza del percorso.

Per utenti SDK PHP

Ho risolto il problema semplicemente rimuovendo la parte extra prima di inoltrare.

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

Ciò eliminerebbe i caratteri aggiunti all'URL

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

La soluzione più semplice e pulita per rimuovere "# _ = _" (PHP):

Invece di "header (" Location: xxx.php ");" usare "echo (" location.href = 'xxx.php'; ");"