Invalid csrf token

[jamesli2021]

By default, my Go app serving a contact form with CSRF is working fine in development machine localhost:3008

Recently, I have adopt new JavaScript framework e.g. AstroJS that use SSR Sever-side localhost:3000 which will render it own contact form, I have crafted another echo route /getNewCSRFToken for Node app to read CSRF token then render into the HTML

When submit the form, it appear that I have an invalid token.
{"message":"invalid csrf token"}

Assume form:coo is not enough or will only work with both Go and Node app behind nginx reverse proxy?

e.Use(middleware.CSRFWithConfig(middleware.CSRFConfig{
		Skipper:     nil, // middleware.DefaultSkipper
		TokenLength: 64,
		TokenLookup: "form:coo",
		CookiePath:     "/",
		CookieSecure:   true,
		CookieHTTPOnly: true,
		CookieSameSite: http.SameSiteStrictMode,
		ContextKey:   "coo",
		CookieName:   "coo",
		CookieMaxAge: 86400,
	}))

[jamesli2021]

I tried to swap to header in echo config TokenLookup: "header:coo",.

The fetch post send from Node to Go would look like this and still get invalid csrf token that has random string:

const r = await fetch('http://localhost:9002/form', {
            headers: {
                'coo': coo,
            },
            body: d,
            method: 'post',
});

[aldas]

I think your problem is that you are sending that post request without sending cookie containing csrf token. CRSF middleware is doing the simplest CSRF check - it checks if crsf token in session cookie matches the submitted (form/header/url) token.

Here we get the token from cookie

echo/middleware/csrf.go

Line 134 in 0d47b7e

if k, err := c.Cookie(config.CookieName); err != nil {

later it is compared to extracted token - TokenLookup: "header:coo", means that token is extracted from header.

NB: fetch does not send cookies. See https://stackoverflow.com/a/70591228

About sending cookies with fetch
The Fetch standard specifies a list of forbidden header names; Cookie is one of them. You cannot set a header named Cookie on a request sent with fetch; the standard simply forbids it. If you want to attach existing cookies to a cross-origin request, use the 'include' value for the credentials parameter passed in fetch options.

[jamesli2021]

In my other test with form:coo and HTML has hidden coo, I could send from client side JavaScript fetch() to Go backend.

Passing formdata from Node backend :3000 to Go :9003 means cookie is still need in the header?

[aldas]

you probably need to set up Skip(...) callback or remove the middleware. API to API calls do not need CSRF/CORS etc - these are for cases when web browser is communicating with the server - to protect user from maliciously (included) scripts and sending request or including resources from other domains.

some other thoughts from internet https://security.stackexchange.com/questions/166724/should-i-use-csrf-protection-on-rest-api-endpoints

update: maybe this https://stackoverflow.com/questions/34558264/fetch-api-with-cookie (if you are doing web browser related things)

[jamesli2021]

I did tried credentials: "same-origin" which didn't work.

I have further troubleshoot and found another problem, if the user first visit the page which is serving from Node, CSSRF token will not appear in the header or CSRF with empty value in the form. It will only appear after a page reload, I think this is another issue that the only option is either Node serving it own CSRF or skip Go side.

In the above scenario. assume if Echo can accept new token (which keep changing on reload page), not rejected then it can solve this case.

My only solution is back to serving page from Go.