Using nosurf with HTMX's hx-delete

[andrewah64]

Hi,

I'm building an app using HTMX that leverages HTMX & the DELETE HTTP request method. I'm passing the csrf token to my backend, for example:

<a href="#" hx-delete="/user/1" hx-vals='{"csrf_token": "AGVpyLkjmMpD9UboB&#43;ybDxGSESY&#43;kFWlwLhyxCCz99WgQAmaHLt/jd4ygvuJLMLnU6bHNbrjhhQMgCzqMDQ5Xg=="}'>Delete</a>

But I'm receiving a 400 response from nosurf. There's no issue if I flip the method to GET or POST.

Can anyone offer any suggestions as to how to make nosurf work with DELETE?

Thanks.

[andrewah64]

For anyone reading this in the distant future nosurf works with fine with hx-delete. This is my solution:

Step 1: Setup your nosurf middleware in the normal way

func CSRFHandler(next http.Handler) http.Handler {
	csrfHandler := nosurf.New(next)
	csrfHandler.SetBaseCookie(http.Cookie{
		HttpOnly: true,
		Path    : "/",
		Secure  : true,
	})

	return csrfHandler
}

Step 2: Grab the token from the request:

nosurf.Token(r)

Step 3: Embed the token in your link, but use hx-headers. The variable in my template is "csrfToken", it might be different in yours. Alternatively, because hx-headers is inherited you could add it a parent of the link.

<a href="#" hx-swap="none" hx-delete="/your/endpoint" hx-headers='{"X-CSRF-Token": "{{$csrfToken}}"}'>Delete</a>