[英]Should the OAuth2 Redirect URL be to the frontend or backend?
I'm setting up OAuth2 in my app using the Authorization Grant flow.我正在使用授权授予流程在我的应用程序中设置 OAuth2。 I am also using create-react-app, such that I'm developing on localhost:3000
, which proxies to my app server backend on localhost:8080
.我也在使用 create-react-app,这样我就在localhost:3000
上开发,它代理到我在localhost:8080
上的应用服务器后端。
Everything mostly works, except for the fact that I cannot get the CSRF
token working.除了我无法让CSRF
令牌正常工作之外,一切都正常。
I realized it was because I was having the OAuth2 Redirect URL set to the backend, and as a result it was not sending the private encrypted csrf_state
cookie along, because the request was originating from google instead of my app.我意识到这是因为我将 OAuth2 重定向 URL 设置为后端,结果它没有发送私有加密的csrf_state
cookie,因为请求来自谷歌而不是我的应用程序。
I don't think this will be a problem in production, because there won't be a proxy server.我不认为这会成为生产中的问题,因为不会有代理服务器。 Instead, both the backend and frontend will be served from the same mydomain.com
相反,后端和前端都将从同一个mydomain.com
So, should I just not have this work in development?那么,我应该不让这项工作在开发中吗? Or should I have the OAuth2 redirect URL set to my frontend ( localhost:3000
), which then automatically redirects to the backend ( localhost:8080
), such that it can send the private encrypted CSRF token along?或者我应该将 OAuth2 重定向 URL 设置为我的前端( localhost:3000
),然后它会自动重定向到后端( localhost:8080
),以便它可以发送私有加密的 CSRF 令牌?
Or is there a way to have the cookie originate from google, without having the multiple redirects?或者有没有办法让 cookie 来自谷歌,而无需多次重定向? Or should I just not bother with CSRF, since SameSite
has such large support amongst browsers now?或者我不应该打扰 CSRF,因为SameSite
现在在浏览器中拥有如此大的支持?
The OAuth2.0 Authorization Code grant includes CSRF protection using the state
parameter. OAuth2.0 授权代码授权包括使用state
参数的 CSRF 保护。 Use this instead of relying on cookies.使用它而不是依赖 cookie。
state状态
RECOMMENDED.受到推崇的。 An opaque value used by the client to maintain state between the request and callback.客户端用于维护请求和回调之间的状态的不透明值。 The authorization server includes this value when redirecting the user-agent back to the client.授权服务器在将用户代理重定向回客户端时包含此值。 The parameter SHOULD be used for preventing cross-site request forgery as described in Section 10.12.该参数应该用于防止跨站点请求伪造,如第 10.12 节所述。
Source: https://tools.ietf.org/html/rfc6749#section-4.1来源: https : //tools.ietf.org/html/rfc6749#section-4.1
Ahmad is right - and here is some more context on standard usage for react apps and APIs: Ahmad 是对的 - 这里有一些关于 React 应用程序和 API 标准用法的更多背景:
If you're using React then you have an SPA that should redirect directly to Google during logins如果您使用的是 React,那么您有一个 SPA 应该在登录期间直接重定向到 Google
So your redirect url should be localhost:3000所以你的重定向 url 应该是 localhost:3000
Your SPA should be entirely cookieless - and much simpler - which is one of the benefits of SPAs - also you can turn off CSRF checks in the API你的 SPA 应该完全没有 cookie - 而且更简单 - 这是 SPA 的好处之一 - 你也可以在 API 中关闭 CSRF 检查
Your SPA will then send an access token to your API and the API will need to validate the token rather than cookies然后,您的 SPA 将向您的 API 发送访问令牌,API 将需要验证令牌而不是 cookie
My tutorial and code sample may help you understand the moving parts: https://authguidance.com/2017/09/24/basicspa-overview/我的教程和代码示例可以帮助您了解移动部分: https : //authguidance.com/2017/09/24/basicspa-overview/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.