hx-headers

Добавляет пользовательские заголовки к запросу

Атрибут hx-headers позволяет добавлять заголовки, которые будут отправляться с AJAX-запросом.

По умолчанию значение этого атрибута представляет собой список значений «имя — выражение» в формате JSON (нотация объектов JavaScript).

Синтаксис

<div hx-get="/data" hx-headers='{"myHeader": "My Value"}'>Get Data</div>

Если вы хотите, чтобы hx-headers вычислял заданные значения, добавьте перед ними префикс javascript: или 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>

Наследование

По умолчанию hx-headers не наследуется дочерними элементами. Используйте модификатор :inherited, чтобы применять заголовки ко всем запросам htmx внутри поддерева. Это удобно для передачи токена CSRF в пределах раздела страницы:

<div hx-headers:inherited='js:{"X-CSRF-Token": getCsrfToken()}'>
  <button hx-post="/transfer">Submit</button>
  <button hx-delete="/item/1">Delete</button>
</div>

Объявление заголовка в дочернем элементе переопределяет объявление родительского элемента.

Вопросы безопасности

По умолчанию значение hx-headers должно быть корректным JSON. Оно не вычисляется динамически. Если вы используете префикс javascript:, помните о связанных с этим вопросах безопасности, особенно при работе с пользовательским вводом, например строками запроса или пользовательским содержимым, которое может привести к уязвимости типа межсайтового скриптинга (XSS).
Хотя атрибут hx-headers и не является надежной защитой от межсайтовой подделки запросов, он может помочь серверным службам обеспечить защиту от CSRF. Подробнее см. в разделе Защита от CSRF.

Licensed under the Zero-Clause BSD License.
https://four.htmx.org/reference/attributes/hx-headers/