htmx.config.mode

View as Markdown Open this page as Markdown
For LLMs
llms.txt htmx overview for LLMs
llms-full.txt Complete htmx docs for LLMs

Sets request mode for fetch()

The htmx.config.mode option sets the default mode for Fetch requests.

Per-element hx-config cannot override it. htmx resets that value to the global mode so injected markup cannot widen request scope from same-origin to cors.

Default: "same-origin"

Valid Values

  • "same-origin" - Only allow same-origin requests (default, most secure)
  • "cors" - Allow cross-origin requests
  • "no-cors" - Limited cross-origin requests
  • "navigate" - Navigation mode

Example

htmx.config.mode = "cors";
<meta name="htmx-config" content='{"mode":"cors"}'>

Security

The default "same-origin" means the browser will reject any cross-origin fetch outright, even if an attacker injects an hx-get pointing to an external URL.

If your app legitimately needs CORS (e.g. an API on a different subdomain), set mode globally and pair it with a Content-Security-Policy connect-src directive to limit reachable origins:

<meta http-equiv="Content-Security-Policy"
      content="connect-src 'self' https://api.example.com">

This way, even if an attacker injects a target URL, CSP blocks connections to origins you haven’t explicitly allowed.