Youtube API错误在控制台的“x -帧-选项”到“sameorigin”。和net::ERR_BLOCKED_BY_RESPONSE

My auth.js is getting two error when running on http://localhost

我的身份验证。当在http://localhost上运行时，js会得到两个错误。

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

here is my code for 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();
  });
}

This is really my first attempt at using the youtube api so i'm not sure what i'm doing wrong here?

这是我第一次尝试使用youtube api，所以我不确定我在这里做错了什么?

My api and client id in the developers console look like this:

开发人员控制台中的api和客户机id是这样的:

1 个解决方案

#1

X-Frame-Options is a HTTP header sent by the server (accounts.google.com). When a browser is told by a webpage (e.g. http://localhost) to display another page (e.g. https://accounts.google.com/o/oauth2/...) inside the "host" page via an iFrame, it will first check if the embedded page sends this header. If it is set to sameorigin, the browser will refuse to render the iFrame. sameorigin means that this page should only be accessed directly or embedded into a page with the same origin (=same domain).

x帧选项是由服务器发送的HTTP头(accounts.google.com)。当浏览器被网页(例如http://localhost:)告知在“主机”页面中显示另一个页面(例如https://accounts.google.com/o/oauth2/…)时，它会首先检查嵌入的页面是否发送这个标题。如果设置为sameorigin，浏览器将拒绝渲染iFrame。sameorigin意味着这个页面只能被直接访问，或者被嵌入到一个具有相同源的页面中(=相同的域)。

This is a security mechanism. The server tells the browser: "Please don't embed me into other webpages, this might be a security risk for the user." Of course the browser doesn't have to obey this request, but I'd go so far as to say that all major browsers do - since they were designed to keep their users safe. If someone was to design his/her own web-browser, he/she could of course choose to ignore the header and render the iFrame regardless.

这是一个安全机制。服务器告诉浏览器:“请不要将我嵌入其他网页，这可能会给用户带来安全隐患。”当然，浏览器不需要遵从这个请求，但我想说的是，所有主流浏览器都是这样做的——因为它们是为了保护用户的安全而设计的。如果有人设计他/她自己的网络浏览器，他/她当然可以选择忽略标题和渲染iFrame。

What this means for you is that you have to redirect your users to the authorization page (https://accounts.google.com/o/oauth2/...) instead of embedding it. Now since you use the client library and the official example along with it, the question is why this doesn't work. My best guess is that Google has changed their OAuth policy to block cross-origin embeds but hasn't updated their library documentation to account for that change. The only viable option I see, since I'm not familiar with the JavaScript client library, is to do the authorization manually, without the library, and then use the library for the actual YouTube API requests.

这意味着您必须将用户重定向到授权页面(https://accounts.google.com/o/oauth2 ..)，而不是将其嵌入到授权页面中。既然您使用了客户端库和正式的示例，那么问题就是为什么这不起作用。我最好的猜测是谷歌已经改变了他们的OAuth策略来阻止跨源的em床，但是没有更新他们的库文档来解释这种变化。我所看到的唯一可行的选择是，我不熟悉JavaScript客户端库，而是手动执行授权，而不使用库，然后使用库获取实际的YouTube API请求。