HTMX IS INSECURE (XSS) | Prime News

I'm not sure if this is actually something that is it is a thing but if you haven't been on Twitter in the last couple days you probably don't know about this but htmx our new love for the front end which is just an attempt to kind of simplify the front end overall uh has been Under Fire a lot recently and why it's under Fire is that what it does is it allows your server to respond with HTML and then it takes that HTML and puts it directly into it I forgot to turn off the alerts little Bonaparte thank you very much I appreciate that two months sub anniversary on the first day of new job here in Palo Alto let's go it's a beautiful place um anyways it allows your server to respond with HTML and the HTML goes directly into your document and you kind of specify how you want the replacement strategy to happen do you want to replace the current div some other div apparentive blah blah there's like a bunch of different strategies they can swap out the inside the outside however it wants to do it but it does something uh all right and so that's how it goes and right now someone on the internet has pointed out that if you allow users to store data that contain cross-eyed scripting attacks and when you respond you do absolutely no forms of validation you will get a cross-side scripting attack that's actually true also the other one was servers compromise don't forget step one of the flow chart though yeah I guess step one would be that your server has been taken over by hostile hackers that's true are you rendering yes it's so over no we're so back no but I I mean it is it is this weird world where when you use something like react or any of these front-end Frameworks they really do keep you on a very special guard rail right like everything because you aren't you aren't actually manipulating the Dom yourself like react you don't even manipulate anything instead it builds an in-memory tree Compares it to a different in-memory tree and then it determines what changes it needs to make to the Dom and so the sanitization is always done on the front end in some sense whereas when it comes to htmx you're producing HTML which means that there's an expectation of the encoding you need right like you already know how you want to format which also means that your server can have a slash API which does respond in Json if you want Json or you can have it as an HTML or you can just use headers like the old-fashioned way you use headers to say hey and you know whatever it is uh I forget the exact header for content type whatever you say whatever you need to do or accept the content type I don't know HTML and whatnot yeah and then there you go you you got it and now you can actually get a smell back but your server is the one that's meant to do it and I'll tell you a little story at Netflix we have these things called Rich Text fields on the television right and they would allow for you to add in a bunch of like a little extra stuff right but what it also did is it by doing that and allowing bold and italicized and all this stuff but does it oh no it turns out that the users put symbols in which would break the text and so then we had the front end sanitize it out and then the back end said oh we'll sanitize it out and so then we had double sanitization so that it was just like Ampersand semicolon you know like trying to do an HTML escape on top of an already escaped item and it was just a nightmare and where we ended up Landing was just like let the back end sanitize we just accept strings as they are it is always sanitized it is not our responsibility to do anything but accept what is and display what is and that is it and so I always feel like that was the best thing but what was very surprising is when I said this people were saying no the front end should be the place responsible for sanitization you with extensively zero experience doing the web what do you think DJ what an intro thanks underscore DV everybody as someone who's an idiot what are your thoughts on this topic rightful feedback here well my thought is uh skateboard well so I feel like it super depends on on like the kind of thing that you're doing right so if if you are controlling the front end and the back end like you would for Netflix right where you're basically making the app for Netflix and you're the ones who own the back end I don't know that there necessarily has to be one right answer but the back end seems fine because you can also like sanitize it when you save it to your database or do other stuff like that and then it's just ready to go right so then it would just be done that seems fine to me I don't even want to sanitize pre-database and the reason being is that imagine if you had a Json endpoint in an HTML endpoint how do you encode it because there's HTML encoding there's URI encoding right there's this I'm saying for like a user input right like a user type something in of what they're going to put into like a text box or something I don't know it seems fine yeah and so the general generally that's kind of my Approach which is your sanitization level depends on your output level so if you're outputting HTML there's a defined sanitization for HTML I see what you're saying yeah and so yep sanitized at the HTML production point which is why you see these things about htmx being unsafe is because inherently people don't understand what react is doing therefore it feels unsafe because you don't realize your react in the HTML World react does not react you are react you produce the correct thing yeah I guess the other thing too is like if you have multiple clients it's nice if more of the work happens in the back end right because then that can be shared between your different clients that seems like a win right yeah it is definitely a win but that would be that would be my thought that seems good yeah plus you got validation everything as long as you're really you know it this is such like a weird argument because to me it seems like the only place to do any of this is on the server just because that's the only place you can fully control it's absolutely the controllable Point whereas on the client you can only control to some certain amount sure I mean if you do it right then the client can only get reflected you know cross-site scripting meaning that they disable the HTML or the javascripts and now they've hacked up your website now it can you know Echo out alert help me and so it's just like is that really a win did you really yeah prove anything no not really right but I don't know personal opinion it seems fun it seems fine to me I mean I I I don't really get the complaint that a lot of people had for this because there's very few people I think who are using htmx that are not using some sort of like back-end server framework thing in front of it to generate stuff with it which makes like automatically sanitizes like there's no way to put it in there except with the same kinds of things that you would do with react like dangerously set in your HTML right yeah so here we go here's the other this is the tweet that kind of started it all right here which is htmx is the most dangerous thing to come out in a long time here's why I need to copy this because this is a really good this is a really great tweet even if it's factually not true it is it really is because it just it sucks people in uh there's something called it's an attack where someone injects code into your application which then runs and wrecks the user most modern Frameworks makes this explicitly hard to do because they don't allow anything to eval HTML or JavaScript but HTML doesn't disable this by default like every other framework instead it uses it as a first class citizen here's a video of an xss trap that would be easy for an unsuspecting Dev to fall into chat messages click me best chat ever boom attacked so it's able to do this all it is doing is that it's able to just take data throw it into an alert make it happen boom right so this again this is kind of what we were talking about which is you allowed your user to upload data which was unsanitized yeah which is good I think that that's good and then when you played the data out you did not sanitize and therefore you got this oh someone's trying to someone's trying to give it to me right now look at this I don't know what's happening here but I'm happiness right now I'm getting hacked right now getting hacked getting hacked son um because they don't know a way to prevent it from rendering so I want to actually go back up to this right here to me this is not a bad thing instead let me quote it for you in case you can't see it instead it uses it as a first class citizen to me this is actually the highlight of htmx which it doesn't do anything it only facilitates making a request and swapping out HTML so your full responsibility lands in a singular place the server which means that if you use react on the server then this first class citizen becomes a performance win this is why you win right right there you don't even have to worry about it because then react has already done the sanitization for you and boom you just started in there's no problems yeah but I like for me so a lot of people seem to hate hmx because it seems like they're just trying to say JS bad LOL Keck wjs you know like that kind of thing but they're just missing hyper media you know like they don't they don't get the point of why this is an interesting like idea for a lot of applications yeah and I think the when so we have this thing where I I hear it a lot which is people say oh yeah there's some applications that would be good for it the thing is that you can Define a lot of applications that would be good for this approach in fact I would say the wide majority of almost every site could benefit from just htmx yeah in terms of like just if it's a site or not not necessarily like number of users or something like that right just like do we have do we read heavily yes okay yes we read heavily when we write what are we writing to and how are we writing yeah like that's pretty much it I mean it's like as simple as that and even then you can still have web sockets and I don't know and it pairs perfectly with serverless as much as it pairs with run your own server on-prem stuff right like there's no there's no dictation anywhere whereas like react server components to be able to run it it's still in this kind of confusing world and there is only one true implementation of it anyways which is next.js so it's kind of like you're already like you're like becoming really tight whereas with htmx it's like oh you're an O camel rust go JavaScript oh it doesn't matter because we don't care that's your job and your template back end that's not our job we don't care right yeah I think you know this kind of thing it's it's just it just makes it really simple to evolve what you want to do I mean I the meme of hyper media as the engine of application state is not actually a meme I just like it because it sounds fun as well but this idea of like all of your state is contained in the server you expose the actions that a user can take by sending the hypermedia controls to the front end and then if and then all of the state and everything that happens is all in the back end right so if someone sends a request to some endpoint and they're not authorized it doesn't work right yes so it's like okay well I exposed these things if someone wants to try and send a thing it's just the same Pathway to send the slash post with this form data well it never works there's no like front-end state that someone can like flip a bit and we didn't actually check that in the back end because we thought we were checking in the front end we only exposed this in this react all these things right it's like so that part is really cool and I like that like for me it's a conceptually simple model to do a lot of these these kinds of things and it also is the model that like Ruby on Rails or live view or all these other ones are like already doing and they're already just sending HTML to the front end so I don't understand am I take a crazy belt you know what I mean yeah you're you're you're 100 correct on pretty much everything you just said which is pretty good for an idiot pretty good for a dummy but uh but the big takeaway is that the state it's better to think of htmx more like UDP or RTP where you're trying to create a client server where the server effectively drives the client so think of like if you could play a game boy on any device and it just streamed the video to your phone and you could walk around and do all that your actions are your controller right I'm gonna run jump slide start select whatever I'm doing and those just gets sent to the server rendered and sent back down htmx is like identical you can play an entire game without having to have any state on your clients I mean stadia did this but they did it with like Apex right they did it at the Tiffany top right so like even if you don't go don't compare htmx like Stadium I mean stadium is obvious stadium is the obvious problem is that it did it did uh it was made by Google well it's made by Google so they always quit but they quit they've abandoned more projects than I have but that is an achievement that is I mean gold star but the other thing they do is they also they they chose to do AAA gaming which means that you could only have one pretty much one computer for one game right which is like that's not what you want to do like if you're trying to commoditize gaming you'd probably want to choose something more like the you know like the arpg level the kind of the more like you know the simpler switch games vampire survivors Halls of Torment something like that yeah and something that's not hyper input sensitive like uh like if you're playing Apex and you have 200 milliseconds between when you move or Mouse and and see it like yeah you look like me it just look like you playing games it'd be awful um but the other thing I want to say someone in the chat said well how does CSS work you said CSS blah blah blah blah um the thing about that is that htmx again makes no assumptions about anything you want Tailwind compile Tailwind send down the CSS right yeah you you want to just raw dog CSS then do that like there's you don't even have to compile Tailwind you can just include the script tag and like load the whole thing I mean it's bigger like it's a bigger bundle but like if but it's still less than bundling a bunch of JS dependencies too right so it's not it's not that big yeah um and so it's kind of both I'm gonna get this you just get to choose that's the ants hdmi's the simplest way to put it is htmx is like a super optimized subset of jQuery jQuery allows you to just do everything and run via JavaScript it also had all these Ajax Hooks and everything now what happened if you could shrink all the Ajax to Ajax stuff down attach it to elements and say how to use it that's pretty much what it is is it's just like a shrunk down version of it that's highly specific and it ends up being actually fairly useful so yes CSS whatever you want custom JavaScript they have custom JavaScript hooks one thing I don't know is do they have custom JavaScript hooks because actually this is something I really wanted to bring up to Carson anyways he's going to be on the show here soon I wanted to see if you could have a custom JavaScript function that returns a promise and the HTML string it produces could be put in so that way if you really needed to do something that's more interactive or more different and you felt like it was only a client-side operation you could still do it there I don't know if that's possible I don't know if that's something I think you can because they um there's like events that you can handle in JavaScript land for HDMI so they omit their own events for some of the stuff so I think so but I'm not 100 sure okay cool yeah so they do have events but I was wondering if they have a fully okay so it sounds like they can even do that so like at that point you you have an escape hatch for full client interactivity which is like you can eat you can do a whole bunch of stuff there if you really needed to and yeah but it just doesn't seem like the the other thing is it's it's just like there's an alternate universe where instead of everybody just immediately writing billions of lines of JavaScript we continue to extend HTML like it's kind of crazy that you can only do git and post yeah from from HTML what's the h stand for in HTML hyper you know and then like what's the H in HTTP like we have these verbs and you can't even send all the verbs from HTML right that doesn't make any sense why do I have to resort to JavaScript to make a patch request instead of like in instead of just being able to do that right that doesn't even make sense so what if we had just extended HTML to do the things that HDMX is basically trying to do it doesn't even matter if it's exactly how htmx does right like the point would be what if HTML HTML just like in the browser straight up regular no loading additional JavaScript thing okay what if you just did that and then the browser managed those things right there's no there's no inherent technical reason that HTML could not say we're not going to do a full page reload when you submit a patch instead we'll take the response and replace it that's reasonable thing we're open robot you know like so oh man DJ I hope that you know that right now the front end devs are shook okay they can't handle they can't handle this okay just see things right now you just destroyed millions of line of JavaScript in a few sentences yeah so anyways that's I think htmx's goal a lot of those ideas aren't necessarily my own because I'm an idiot when it comes to the web it's true I stole them from Reading uh hmx's book which is really good it's a fun it's a fun read and interesting to think about uh it is I'm sorry but htmx is unsafe though okay it's unsafe well that's why I like it it makes it makes me feel like I'm living on the edge that's what everyone's talking about with Edge Computing right I mean I I'm public edging it's what people want I all that's all I see on Twitter is about Edge compute and like so yeah I'm gonna use unsafe Technologies to kind of feel like oh I'm an edgy programmer nice goddess bleeding edge here I come here I am oh cross-eyed scripting maybe if I make a mistake by compromised oh no users wrecked um I really appreciate this hey thanks for coming on this was great uh thank you for being a part of this I know that you're not really experienced with web technology it's kind of a dummy but I really do appreciate the time you took to do this with me and TJ is the hyper media as the engine of application to stay together let's go and this is this is right afterwards it's so adorable it's a good one it's so adorable and at yet at the same time so terrifying due to the unsafety you are promoting I'm I'm spreading uh fake news on Twitter or x.com sorry everybody I apologize I'll go uh think about my crimes okay bye everybody is the prime machine

Channel: ThePrimeTime

Views: 117,354

Keywords: programming, computer, software, software engineer, software engineering, program, development, developing, developer, developers, web design, web developer, web development, programmer humor, humor, memes, software memes, engineer, engineering, Regex, regexs, regexes, netflix, vscode, vscode engineer, vscode plugins, Lenovo, customer service

Id: j5LPDuFRDP0

Length: 19min 57sec (1197 seconds)

Published: Sat Aug 05 2023