Youtube API Erreurs dans la console pour 'X-Frame-Options' à 'sameorigin'. et net :: ERR_BLOCKED_BY_RESPONSE

Question

Mon auth.js devient deux erreurs lors de l'exécution sur http://localhost

Refused to display 'https://accounts.google.com/o/oauth2/auth?client_id=161882282037-ol1lu4rp1q9qs17qsfjub0q2fil7au9a.apps.googleusercontent.com&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube&immediate=true&include_granted_scopes=true&proxy=oauth2relay345555543&redirect_uri=postmessage&origin=http%3A%2F%2Flocalhost&response_type=token&gsiwebsdk=1&state=796381777%7C0.998470879&authuser=0&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.2sYoz5cQVqo.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCNCqOBGqlGE0dE8R-n44r2KGTwetA' in a frame because it set 'X-Frame-Options' to 'sameorigin'. 
cb=gapi.loaded_0:545 GET https://accounts.google.com/o/oauth2/auth?client_id=161882282037-ol1lu4rp1q9qs17qsfjub0q2fil7au9a.apps.googleusercontent.com&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube&immediate=true&include_granted_scopes=true&proxy=oauth2relay345555543&redirect_uri=postmessage&origin=http%3A%2F%2Flocalhost&response_type=token&gsiwebsdk=1&state=796381777%7C0.998470879&authuser=0&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.2sYoz5cQVqo.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCNCqOBGqlGE0dE8R-n44r2KGTwetA net::ERR_BLOCKED_BY_RESPONSE 

voici mon code pour auth.js:

// The client ID is obtained from the {{ Google Cloud Console }} 
// at {{ https://cloud.google.com/console }}. 
// If you run this code from a server other than http://localhost, 
// you need to register your own client ID. 
var OAUTH2_CLIENT_ID = '161882282037-ol1lu4rp1q9qs17qsfjub0q2fil7au9a.apps.googleusercontent.com'; 
var OAUTH2_SCOPES = [ 
    'https://www.googleapis.com/auth/youtube' 
]; 

// Upon loading, the Google APIs JS client automatically invokes this callback. 
googleApiClientReady = function() { 
    gapi.auth.init(function() { 
    window.setTimeout(checkAuth, 1); 
    }); 
} 

// Attempt the immediate OAuth 2.0 client flow as soon as the page loads. 
// If the currently logged-in Google Account has previously authorized 
// the client specified as the OAUTH2_CLIENT_ID, then the authorization 
// succeeds with no user intervention. Otherwise, it fails and the 
// user interface that prompts for authorization needs to display. 
function checkAuth() { 
    gapi.auth.authorize({ 
    client_id: OAUTH2_CLIENT_ID, 
    scope: OAUTH2_SCOPES, 
    immediate: true 
    }, handleAuthResult); 
} 

// Handle the result of a gapi.auth.authorize() call. 
function handleAuthResult(authResult) { 
    if (authResult && !authResult.error) { 
    // Authorization was successful. Hide authorization prompts and show 
    // content that should be visible after authorization succeeds. 
    $('.pre-auth').hide(); 
    $('.post-auth').show(); 
    loadAPIClientInterfaces(); 
    } else { 
    // Make the #login-link clickable. Attempt a non-immediate OAuth 2.0 
    // client flow. The current function is called when that flow completes. 
    $('#login-link').click(function() { 
     gapi.auth.authorize({ 
     client_id: OAUTH2_CLIENT_ID, 
     scope: OAUTH2_SCOPES, 
     immediate: false 
     }, handleAuthResult); 
    }); 
    } 
} 

// Load the client interfaces for the YouTube Analytics and Data APIs, which 
// are required to use the Google APIs JS client. More info is available at 
// https://developers.google.com/api-client-library/javascript/dev/dev_jscript#loading-the-client-library-and-the-api 
function loadAPIClientInterfaces() { 
    gapi.client.load('youtube', 'v3', function() { 
    handleAPILoaded(); 
    }); 
} 

C'est vraiment ma première tentative d'utiliser l'api youtube donc je ne suis pas sûr de ce que je fais mal ici?

Mon api et id client dans le regard de la console des développeurs comme ceci:

Answer 1

X-Frame-Options est un en-tête HTTP envoyé par le serveur (accounts.google.com). Lorsqu'un navigateur est informé par une page Web (par exemple http://localhost) pour afficher une autre page (par exemple https://accounts.google.com/o/oauth2/...) dans la page "hôte" via un iFrame, il vérifie d'abord si la page incorporée envoie cet en-tête. S'il est défini sur sameorigin, , le navigateur refusera pour afficher le iFrame. sameorigin signifie que cette page doit uniquement être accessible directement ou incorporée dans une page avec la même origine (= même domaine).

Ceci est un mécanisme de sécurité. Le serveur dit au navigateur: "S'il vous plaît, ne m'incorporez pas à d'autres pages, cela pourrait représenter un risque pour la sécurité de l'utilisateur." Bien sûr, le navigateur n'a pas à obéir à cette demande, mais j'irais même jusqu'à dire que tous les principaux navigateurs le font, car ils ont été conçus pour assurer la sécurité de leurs utilisateurs. Si quelqu'un devait concevoir son propre navigateur Web, il/elle pourrait bien sûr choisir d'ignorer l'en-tête et de rendre le iFrame indépendamment. Pour vous, cela signifie que vous devez rediriger vos utilisateurs vers la page d'autorisation (https://accounts.google.com/o/oauth2/...) au lieu de l'intégrer. Maintenant que vous utilisez la bibliothèque cliente et l'exemple officiel, la question est de savoir pourquoi cela ne fonctionne pas. Ma meilleure estimation est que Google a modifié sa politique OAuth pour bloquer les renvois d'origine croisée, mais n'a pas mis à jour sa documentation de bibliothèque pour tenir compte de ce changement. La seule option viable que je vois, puisque je ne suis pas familier avec la bibliothèque cliente JavaScript, est de faire l'autorisation manuellement, sans la bibliothèque, puis d'utiliser la bibliothèque pour les demandes d'API YouTube.