itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-28 13:31:06 +00:00
Code Issues Packages Projects Releases Wiki Activity
htmx/www/content/attributes/hx-headers.md
TGJ Gilmore 72b425f5fb
Documentation update to include the use of hx-headers to prevent CSRF (#3176) 
* Documentation update to include the use of hx-headers to prevent CSRF

* Update hx-headers.md

Revised follow review.
2025-02-10 20:35:31 +01:00

1.8 KiB
Raw Blame History

+++ title = "hx-headers" description = """
The hx-headers attribute in htmx allows you to add to the headers that will be submitted with an AJAX request.""" +++

The hx-headers attribute allows you to add to the headers that will be submitted with an AJAX request.

By default, the value of this attribute is a list of name-expression values in JSON (JavaScript Object Notation) format.

If you wish for hx-headers to evaluate the values given, you can prefix the values with javascript: or js:.

  <div hx-get="/example" hx-headers='{"myHeader": "My Value"}'>Get Some HTML, Including A Custom Header in the Request</div>

  <div hx-get="/example" hx-headers='js:{myVal: calculateValue()}'>Get Some HTML, Including a Dynamic Custom Header from Javascript in the Request</div>

Security Considerations

  • By default, the value of hx-headers must be valid JSON. It is not dynamically computed. If you use the javascript: prefix, be aware that you are introducing security considerations, especially when dealing with user input such as query strings or user-generated content, which could introduce a Cross-Site Scripting (XSS) vulnerability.

  • Whilst far from being a foolproof solution to Cross-Site Request Forgery, the hx-headers attribute can support backend services to provide CSRF prevention. For more information see the CSRF Prevention section.

Notes

  • hx-headers is inherited and can be placed on a parent element.
  • A child declaration of a header overrides a parent declaration.