Golang CSRF 与 React 的问题答案

【问题标题】：Golang CSRF issues with ReactGolang CSRF 与 React 的问题
【发布时间】：2022-01-31 15:20:48
【问题描述】：

我正在创建一个与用 Go 编写的后端对话的 React 应用程序。我已经使用 Gorilla 库设置了 CSRF。 React 代码将首先向csrfToken 端点发送一个 GET 请求，并在该端点接收令牌。发送 POST 请求时在标头中设置此令牌。

func main() {
    r := mux.NewRouter()
    r.HandleFunc("/signup/post", SubmitSignupForm).Methods(http.MethodPost, http.MethodOptions)
    r.HandleFunc("/csrfToken", func(w http.ResponseWriter, r *http.Request) {
        w.Write([]byte(csrf.Token(r)))
    })

    r.Use(csrf.Protect(
        []byte("fff"),
        csrf.Path("/"),
        csrf.Secure(false),
        csrf.TrustedOrigins([]string{"http://localhost:3001/"}),
        csrf.RequestHeader("TOKEN"),
    ))

    c := cors.AllowAll()

    http.ListenAndServe(":8000", c.Handler(r))
}

React 代码如下所示：

import React from 'react';
import './App.css';
import useAxios from "axios-hooks";

function App() {
    const [{response: csrfToken}] = useAxios<string>({url: "http://localhost:8000/csrfToken"})
    const [{response}, doRequest] = useAxios<string>({
        url: "http://localhost:8000/signup/post",
        method: "POST"
    }, {manual: true})

    return (
        <div className="App">
            <header className="App-header">
                <h1>hello</h1>
                <h1>csrf: {csrfToken?.data}</h1>
                <h1>Response: {response?.data}</h1>
                <button onClick={e => {
                    doRequest({data: {key: "something"}, headers: {"TOKEN": csrfToken!.data}})

                }}>click
                </button>
            </header>
        </div>
    );
}

export default App;

让我最困惑的是，我能够通过 Postman 向 /csrfTokenendpoint 发送请求，并将该值与标头一起使用。

但是，当我在浏览器中执行相同操作时，我得到一个 403 并回复 Forbidden - CSRF token invalid。

任何想法我做错了什么？

【问题讨论】：

标签： reactjs go csrf

【解决方案1】：

我不熟悉 axios-hooks，但是你不想在你的 react 代码中执行 csrf 函数并像你使用 doRequest() 那样获取 CSRF 令牌吗？ csrf 中没有第二个属性像 doRequest() 那样被解构。

如果在没有第二个属性的情况下执行 csrf 函数会执行 axios 函数，您可能需要一个 await 或 .then 链，因为它可能会返回一个 Promise。

我认为这个问题可能比 Go 更与 React 相关，这对我来说很好。

【讨论】：

我刚刚发布了问题的解决方案。你是对的，Go 代码很好，这是前端的问题。

【解决方案2】：

我发现了问题。

我首先创建了一个设置简单得多的虚拟项目，从而开始调试应用程序。在那里，我成功地设置了一切。在了解这两个应用程序的差异时，我注意到 cookie 没有在不工作的应用程序中发送。

一段时间后，我了解到由于跨源，cookie 没有从浏览器发送到 API。所有这些都在本地运行，而我痛苦的错误是：

localhost != 127.0.0.1

我需要做的就是将我使用 localhost 的所有位置更改为 127.0.0.1。由于浏览器认为这两者的来源不同，因此不会发送 cookie...

【讨论】：