在实施Google Identity Services弹出代码模型时，如何处理CSRF？

发布于 2025-01-29 00:29:23 字数 1975 浏览 4 评论 0原文

在我的网站上，我已经使用a 弹出代码模型。

为了防止CSRF攻击文档说：

使用弹出模式，您可以在请求中添加自定义HTTP标头，并且然后在您的服务器上确认它与预期值和原点匹配。

这是文档中提供的弹出示例代码：

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + code);
  },
});

我的理解是，我需要在上面的代码中添加随机的CSRF代码字符串，然后在我的服务器上验证它。

但是我到底要把CSRF代码放在哪里？

我认为它应该在code this xhr.send（'code =' +''）中my_csrf_string'），但是当我这样做时，我的标题看起来像这样（my_csrf_string缺少，所以我无法在服务器上验证它）：

{
   "host":"localhost:5001",
   "connection":"keep-alive",
   "accept":"*/*",
   "access-control-request-method":"POST",
   "access-control-request-headers":"x-requested-with",
   "origin":"http://localhost:8080",
   "user-agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36",
   "sec-fetch-mode":"cors",
   "sec-fetch-site":"same-site",
   "sec-fetch-dest":"empty",
   "referer":"http://localhost:8080/",
   "accept-encoding":"gzip, deflate, br",
   "accept-language":"en-US,en;q=0.9",
   "severity":"INFO",
   "message":"googleAuthorization req.headers"
}

，如果CSRF代码不去那里，在代码变量中还应该做什么？

原文

On my site I have implemented Google Identity Services using a popup code model.

To prevent CSRF attacks the docs say this:

With Popup mode, you add a custom HTTP header to your requests, and
then on your server confirm it matches the expected value and origin.

Here is the popup sample code provided in the docs:

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + code);
  },
});

It's my understanding that I need to add a random CSRF code string to the above code, and then verify that on my server.

But where exactly do I put that CSRF code?

I thought that maybe it should go in the code variable like this xhr.send('code=' + 'MY_CSRF_STRING') but when I do that my headers look like this (MY_CSRF_STRING is missing so I cannot verify it on the server):

{
   "host":"localhost:5001",
   "connection":"keep-alive",
   "accept":"*/*",
   "access-control-request-method":"POST",
   "access-control-request-headers":"x-requested-with",
   "origin":"http://localhost:8080",
   "user-agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36",
   "sec-fetch-mode":"cors",
   "sec-fetch-site":"same-site",
   "sec-fetch-dest":"empty",
   "referer":"http://localhost:8080/",
   "accept-encoding":"gzip, deflate, br",
   "accept-language":"en-US,en;q=0.9",
   "severity":"INFO",
   "message":"googleAuthorization req.headers"
}

And if the CSRF code does not go there, what else is supposed to go in the code variable?

分享到QQ

分享到微博