HTMX is great and is the only frontend development tool I don’t absolutely loathe. It enables lightweight SPA development, and provides a very simple and efficient mechanism for doing HTML over the wire.
Sure, wrong term. I think my point still stands though. A SPA is *generally *“rehydrated” DOM elements from JSON data pulled from an API though. Where as HTMX is more akin to classic AJAX style page dynamism.
A SPA is *generally *“rehydrated” DOM elements from JSON data pulled from an API though. Where as HTMX is more akin to classic AJAX style page dynamism.
You’ll forgive me if I say this is an instance of splitting hairs and having a particular definition for something that includes extra qualities separate from what those terms are actually describing for most people. Also, things like, I dunno, React, are going to extensively use ajax to accomplish what they do. It’s literally just asynchronous javascript. It’s like someone saying “my vehicle of choice is a motorcycle” and then someone else saying “A motorcycle isn’t really a vehicle. It’s a transportation device with wheels. A car is a vehicle.” They are both vehicles. They both have wheels. The wheels are ajax. A page made with htmx and a page made with React are both SPAs.
My point is just that I think to most people, HTMX doesn’t create what is classically considered to be a SPA any more than older MPA’s that called utilized AJAX would be. There’s a reason those old-style pages aren’t really considered SPA’s. Is it splitting hairs? Absolutely.
I think we’re gonna have to agree to disagree on definitions. To me, and I believe, to most people, an SPA refers to a UI/UX design pattern that can be implemented with any number of underlying techniques. I would also say that the Wikipedia page for SPAs (on the assumption that wikipedia is a valid tool for establishing consensus for definitions) supports my definition:
A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages.
There are various techniques available that enable the browser to retain a single page even when the application requires server communication.
And it goes on to list frameworks, AJAX, Websockets, etc.
Unfortunately it also kicks Content Security Policy square in the nuts and shoots a giant hole right through your website security, so if anyone on my team brings up using it I inform them it’s an instant security fail if we so much as touch it.
It’s a cute idea but horribly implemented. If your website has any security requirements, do not use htmx
Edit: the fact so many people have no idea about this and are downvoting is sad. People need to learn how CSP headers work, and why inherently HTMX completely bypasses this as it currently is designed.
how HTMX works and what it does inherently bypasses CSP
Well, no, not really. All HTMX really does are AJAX requests to remote resources, which are performed by interpreting attributes in HTML. You specify the type of request and the target for updating. Those requests can sometimes contain parameters, of course, but any API that accepts any kind of conditional or user generated input has to sanitize that input before doing anything meaningful with it. This requirement isn’t something particular to HTMX.
You fundamentally are invoking logic via HTML attributes, which bypasses CSP
This is not true, though. You are manipulating the DOM via HTMX, but CSP has nothing to do with dynamic content manipulation. CSP is more concerned with preventing the injection of malicious code. If what you’re referring to, however, is the possibility of someone maliciously injecting HTML with HTMX that performs some nefarious action, then I have to ask (again) why you didn’t properly sanitize user input or limit the possible connection sources in your CSP.
If you have a specific example, however, of a way in which HTMX by design violates CSP that can’t be dismissed with “you coded your website poorly,” I would love to know.
This is like someone pointing out that blowing a giant hole in the hull of your ship causes it to take on water, and you respond by asking “well why aren’t you bailing out the water with a bucket?”
You do understand why Content Security Policy exists, and what it is for… right?
“We don’t need a watertight ship hull for the voyage, just reinvent and implement a bunch of strapping young lads that 24/7 bail water out of the ship as it sails, it’s faster and more efficient than doing something crazy like building your ship to be secure and water tight.”
“Wow, these screen doors really suck. I’ve stuck them on my submarine, but they just don’t keep the water out at all. Some people are going to say that I’m a fucking moron and don’t understand the technology I use or that I’m too goddamn lazy to actually take the necessary steps to keep water out of my submarine, but I know they’re wrong and it’s the technology’s fault.”
In all seriousness, HTMX is a tool designed for a specific job. If you have an API that has either non-parameterized endpoints to hit or an endpoint that accepts a single integer value or UUID or…whatever to perform a database lookup and return stored values to be interpolated into the HTML that endpoint returns, then, great, you’ve got a lightweight tool to help do that in an SPA. If you’re using it to send complex data that will be immediately and unsafely exposed to other users, then…that’s not really what it’s for. So, I think the core issue here is that you don’t really understand the use case and are opposed to it because to use it in a way that is beyond or outside the scope of its established convention is unsafe without extra work involved to guarantee said safety. It also implies you are running a website with a content security policy that either explicitly allows the execution of unsafe inline scripts or which does not care about the sources to which a script connects, which is the only way you could realistically leverage HTMX for malicious ends. So, ultimately, the choice to not adopt comprehensive security measures is one you are free to make, but I wouldn’t exactly go around telling people about it.
If you in any way have functionality that handles anything remotely requiring security, do not use HTMX.
This goes way beyond “parameterized endpoints”.
Listen extremely closely and pray to God anyone dev with more than 2 brain cells groks how serious th8s vulnerability is:
HTMX enables arbitrary invocation of ANY api endpoint with cookies included, through html attributes, which inherently can’t be covered by Content Security Policy
This is deeply important for any web dev worth their salt to understand.
Sanitizing User input should be your LAST layer of defence against attack vectors. Not, NOT, your first and only
It’s supposed to be your “break in case of emergency” system, not your primary (and only remaining) defense layer.
HTMX enables arbitrary invocation of ANY api endpoint with cookies included, through html attributes, which inherently can’t be covered by Content Security Policy
Actually, as an even more basic question…you do know that HTMX is literally just an AJAX library, right? It doesn’t actually “do” anything via HTML attributes. The additional HTMX attributes, like hx-get, hx-post, etc. just tells HTMX where and how to make the API requests. These requests are executed by the browser’s native fetch or XMLHttpRequest APIs, depending on compatibility and implementation. Therefore, HTMX is subject to the same security constraints and policies as any other JavaScript-based operation that makes HTTP requests. Which also, by definition, means that it adheres to the Content Security Policy directives configured for that website.
In other words, an HTML button element with hx-get=“https://www.some-endpoint.com/” on it would eventually translate into
HTMX is great and is the only frontend development tool I don’t absolutely loathe. It enables lightweight SPA development, and provides a very simple and efficient mechanism for doing HTML over the wire.
Not sure I would call HTMX a SPA framework though? Like it all’s easy async content fetching for sure, but it’s usually done across a MPA?
Where did I call it a framework?
Sure, wrong term. I think my point still stands though. A SPA is *generally *“rehydrated” DOM elements from JSON data pulled from an API though. Where as HTMX is more akin to classic AJAX style page dynamism.
You’ll forgive me if I say this is an instance of splitting hairs and having a particular definition for something that includes extra qualities separate from what those terms are actually describing for most people. Also, things like, I dunno, React, are going to extensively use ajax to accomplish what they do. It’s literally just asynchronous javascript. It’s like someone saying “my vehicle of choice is a motorcycle” and then someone else saying “A motorcycle isn’t really a vehicle. It’s a transportation device with wheels. A car is a vehicle.” They are both vehicles. They both have wheels. The wheels are ajax. A page made with htmx and a page made with React are both SPAs.
My point is just that I think to most people, HTMX doesn’t create what is classically considered to be a SPA any more than older MPA’s that called utilized AJAX would be. There’s a reason those old-style pages aren’t really considered SPA’s. Is it splitting hairs? Absolutely.
I think we’re gonna have to agree to disagree on definitions. To me, and I believe, to most people, an SPA refers to a UI/UX design pattern that can be implemented with any number of underlying techniques. I would also say that the Wikipedia page for SPAs (on the assumption that wikipedia is a valid tool for establishing consensus for definitions) supports my definition:
And it goes on to list frameworks, AJAX, Websockets, etc.
Unfortunately it also kicks Content Security Policy square in the nuts and shoots a giant hole right through your website security, so if anyone on my team brings up using it I inform them it’s an instant security fail if we so much as touch it.
It’s a cute idea but horribly implemented. If your website has any security requirements, do not use htmx
Edit: the fact so many people have no idea about this and are downvoting is sad. People need to learn how CSP headers work, and why inherently HTMX completely bypasses this as it currently is designed.
HTMX comes with a variety of CSP options, though…
Doesn’t matter, the entire implementation principle of how HTMX works and what it does inherently bypasses CSP. There’s no getting around that.
You fundamentally are invoking logic via HTML attributes, which bypasses CSP
Well, no, not really. All HTMX really does are AJAX requests to remote resources, which are performed by interpreting attributes in HTML. You specify the type of request and the target for updating. Those requests can sometimes contain parameters, of course, but any API that accepts any kind of conditional or user generated input has to sanitize that input before doing anything meaningful with it. This requirement isn’t something particular to HTMX.
This is not true, though. You are manipulating the DOM via HTMX, but CSP has nothing to do with dynamic content manipulation. CSP is more concerned with preventing the injection of malicious code. If what you’re referring to, however, is the possibility of someone maliciously injecting HTML with HTMX that performs some nefarious action, then I have to ask (again) why you didn’t properly sanitize user input or limit the possible connection sources in your CSP.
If you have a specific example, however, of a way in which HTMX by design violates CSP that can’t be dismissed with “you coded your website poorly,” I would love to know.
This is like someone pointing out that blowing a giant hole in the hull of your ship causes it to take on water, and you respond by asking “well why aren’t you bailing out the water with a bucket?”
You do understand why Content Security Policy exists, and what it is for… right?
“We don’t need a watertight ship hull for the voyage, just reinvent and implement a bunch of strapping young lads that 24/7 bail water out of the ship as it sails, it’s faster and more efficient than doing something crazy like building your ship to be secure and water tight.”
“Wow, these screen doors really suck. I’ve stuck them on my submarine, but they just don’t keep the water out at all. Some people are going to say that I’m a fucking moron and don’t understand the technology I use or that I’m too goddamn lazy to actually take the necessary steps to keep water out of my submarine, but I know they’re wrong and it’s the technology’s fault.”
In all seriousness, HTMX is a tool designed for a specific job. If you have an API that has either non-parameterized endpoints to hit or an endpoint that accepts a single integer value or UUID or…whatever to perform a database lookup and return stored values to be interpolated into the HTML that endpoint returns, then, great, you’ve got a lightweight tool to help do that in an SPA. If you’re using it to send complex data that will be immediately and unsafely exposed to other users, then…that’s not really what it’s for. So, I think the core issue here is that you don’t really understand the use case and are opposed to it because to use it in a way that is beyond or outside the scope of its established convention is unsafe without extra work involved to guarantee said safety. It also implies you are running a website with a content security policy that either explicitly allows the execution of unsafe inline scripts or which does not care about the sources to which a script connects, which is the only way you could realistically leverage HTMX for malicious ends. So, ultimately, the choice to not adopt comprehensive security measures is one you are free to make, but I wouldn’t exactly go around telling people about it.
That’s not broad enough.
If you in any way have functionality that handles anything remotely requiring security, do not use HTMX.
This goes way beyond “parameterized endpoints”.
Listen extremely closely and pray to God anyone dev with more than 2 brain cells groks how serious th8s vulnerability is:
HTMX enables arbitrary invocation of ANY api endpoint with cookies included, through html attributes, which inherently can’t be covered by Content Security Policy
This is deeply important for any web dev worth their salt to understand.
Sanitizing User input should be your LAST layer of defence against attack vectors. Not, NOT, your first and only
It’s supposed to be your “break in case of emergency” system, not your primary (and only remaining) defense layer.
I want you to please explain how HTMX bypasses the Content Security Policy connect-src directive, or any -src directive, for that matter, assuming it is specified (which it should be). Because I’m genuinely curious why the HTMX dev team would include a section on CSP in their docs if it did literally nothing, as you say.
Actually, as an even more basic question…you do know that HTMX is literally just an AJAX library, right? It doesn’t actually “do” anything via HTML attributes. The additional HTMX attributes, like hx-get, hx-post, etc. just tells HTMX where and how to make the API requests. These requests are executed by the browser’s native fetch or XMLHttpRequest APIs, depending on compatibility and implementation. Therefore, HTMX is subject to the same security constraints and policies as any other JavaScript-based operation that makes HTTP requests. Which also, by definition, means that it adheres to the Content Security Policy directives configured for that website.
In other words, an HTML button element with hx-get=“https://www.some-endpoint.com/” on it would eventually translate into
const xhr = new XMLHttpRequest(); xhr.open("GET", "https://www.some-endpoint.com/"); xhr.send();on click.
You do understand that, right?