javascript - 控制台中的 Youtube API 错误为 'X-Frame-Options' 到 'sameorigin' 。和 net::ERR_BLOCKED_BY_RESPONSE

Question

我的 auth.js 在 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

这是我的 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();
  });
}

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

开发者控制台中我的 api 和客户端 ID 如下所示:

Answer 1

X-Frame-Options 是服务器 (accounts.google.com) 发送的 HTTP header 。当网页(例如 http://localhost)告诉浏览器显示另一个页面(例如 https://accounts.google.com/o/oauth2/...)通过 iFrame 在“主机”页面内，它将首先检查嵌入页面是否发送此 header 。如果设置为sameorigin，浏览器将拒绝渲染 iFrame。 sameorigin 表示该页面只能直接访问或嵌入到具有相同来源(=相同域)的页面中。

这是一种安全机制。服务器告诉浏览器:“请不要将我嵌入到其他网页中，这可能会给用户带来安全风险。”当然，浏览器不必遵守此请求，但我什至可以说所有主要浏览器都会这样做 - 因为它们的设计目的是为了确保用户的安全。如果有人要设计他/她自己的网络浏览器，他/她当然可以选择忽略标题并渲染 iFrame。

这对您来说意味着您必须将用户重定向到授权页面 (https://accounts.google.com/o/oauth2/...)，而不是嵌入它。现在，既然您使用了客户端库和官方示例，那么问题是为什么这不起作用。我最好的猜测是，Google 已更改其 OAuth 策略以阻止跨源嵌入，但尚未更新其库文档以解释该更改。由于我不熟悉 JavaScript 客户端库，我看到的唯一可行的选择是在没有库的情况下手动进行授权，然后使用该库来处理实际的 YouTube API 请求。