Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So there are a few attributes that kind of section off parts of your site or your page or your dom, and do different things with them. So h x preserve was one of those, so that as you make an Ajax request through h x get or whatever and place it into the page, you can section off a little bit, to not be updated with HX preserve. So the precedent for kind of setting, doing something with a section of your code, is is already there and h x disable is like that except, what it does is everything inside h x disable cannot use HTMX. So why would you want you know, you're using HTMX to build your site. Why would you want to disable a section of your site for HTMLX and not allow HTMLX to run within that?
Lazarus:The primary reason is are security reasons because you don't always have control over the code or the text that shows up in your browser within your site. Right? Sometimes you do, but if you allow for comments, for example, or just kind of posts, if you allow users to make their own posts on your site, if they if you there's plenty of of times, plenty of sites, plenty of applications, lots of applications where the user is able to type in some stuff. Particularly, you know, maybe you trust your own users at some level who are paid users or something but, and you shouldn't. But maybe you have even a public section of your site where anybody can post anything and and who knows what kind of stuff is gonna end up there.
Lazarus:Even if they are humans, you know, you can put a CAPTCHA on it, but, humans might do something like that. So anytime you have a section of your site that has user generated content, you don't want them writing HTMX for your site. Do you? No. So there's also ways you can escape your code, a, not your HTML, but HTMLX runs.
Lazarus:So, you know, you can protect it from your server and stuff by doing your escape stuff. Laravel does that for you automatically, probably a lot of different things do, but HTMLX runs on your front end. So like other front end frameworks, it runs in your browser, it runs in your it's your client. You can just right click, inspect element, go in there and change things. So you have a responsibility to, you know, if if by allowing stuff to run on the front end by giving them these nice front end tools, you do have to kind of keep in mind that a bad actor, somebody could could try to run some HTMX on your, on your site that might do something unintended.
Lazarus:And, you know, who knows what that would be, how hard that would be to figure out if there's anything they can actually do that's useful. But it's just good practice to disable the ability for sections of your site to run HTMX code. So the way you disable it, you just put h x disable onto that element. So let's say you have, you know, an area that shows all your comments, you could just cover the whole thing with h tech h x disable. Or you could get kind of, you know, more specific.
Lazarus:And you could say, okay, just each comment, has the a checks disable on it because that's the little area that's gonna be affected by the user. So it's just good practice to disable, HTMLX within any section that you're gonna allow user generated stuff on the site. And once you disable it, whatever element you disable it in, it's not one of those attributes where you can then go in and then enable a section within it. So it's like, oh, well, I I disabled this whole, div but I want one little div inside that to be able to run h t m x. That does not work.
Lazarus:So once whatever div or element you put h x disable on, it's going to be permanently disabled within that. So it's permanently blocked, that's a security thing, that's intentional, that's the way it's supposed to work. So just a quick note, don't not don't confuse this with there's another element, h x disabled e l t element. So, you can use that other one which, you know, maybe we'll talk about separately, but I don't wanna kinda mix them up, but, that one is for like disabling a button after you've clicked it so that it can't be clicked a second time. That's not what this one is for.
Lazarus:HX disable is to disable HTMX within a section of your site permanently so that nobody can run, you know, malicious code, that that it uses HTMX, on your front end.