How To Prevent The Most Common Cross Site Scripting Attack

Key Takeaways

hello everybody how you doing in my JavaScript shopping cart tutorial I got a comment related to JavaScript injection and how it could be a problem for people that are using javascript I figured that this was such a great topic that I've decided to make an entire video about the most common form of JavaScript injection that you'll run into when you're developing your own websites so let's get started doing that right now so I'll have this amazing website that at first glance look completely normal you type in an input here just hi for example you click search and it'll just say you queried hi and in the URL it'll put your query up here that's all it does super simple straightforward website and you'd think there's nothing wrong with this website right type in whatever you want hit enter and there you go shows you exactly what you queried right there but this site is actually vulnerable to JavaScript injection now your first thought would be if you want to inject your author script into a page you'd put some script tags here write some JavaScript inside of it so let's just say hi inside of an alert and then you would end that script tag and you'd think by running this you would inject JavaScript into the page and you are correct you do inject this script tag into the page but script tags will not run when they're injected into the page in this manner in order to actually inject JavaScript into the page we need to use an image tag surprisingly with a blank source when an image tag has no source it'll throw an error so we can use the on error function of this image source to run some code whenever this image gets loaded into our page since there is no source port so we'll just put that alert inside of our on error function here close out our image tag and if we hit search you'll see that we now have this alert box that pops up this is hi I'm anything that we put in outside of here for example when we search it'll show up in here so we've essentially injected JavaScript into the page and now you may be thinking that's not really a problem because you're just injecting JavaScript into your own page so the only person you can affect is yourself but since this query is inside of the URL here if I send this URL to somebody as soon as they go to it it will inject this into their page so for example if I go to a new tab here and search this URL you see that I get this hacked message which is what a hacker would want to do and you may think well what can they do with this they can access some pretty sensitive information for example they can access the document cookies so we'll just go in here with another alert we'll just say document dot cookie and if we run this again you can obviously their they have access to my username and my password which are stored in the cookies for this website now in a normal website they wouldn't actually store your password and username but they will store a session ID which is essentially both your password and user name together and if you have access to that you can log into the site as that user so this is something that a hacker could do in order to gain your information and then all they would have to do inside of their script is just email this or send it to their own site and then they'll have that information available to themselves just based on this simple JavaScript injection that they're able to perform with this search query so now let's look at how we can solve this problem if we look at the actual code for this page here we see that when our page loads we get our query from the URL so we get this attribute here that we sent to the page with the search and then we're setting that to the input so that it's this plate here and we're also setting it to this query output where it says you query it and then whatever you've queried but we're using inner HTML and inner HTML is not safe to injection if the user inputs valid HTML or a script tag or an image tag it'll render that as actual HTML instead of as text in order to get around this all we need to do is change this to be inner text now if we save that and run you see that it just shows the text that they put inside of the input box and not actually injects it into the page and you may think that you're never gonna end up running into this problem because obviously why would you use inner HTML here but there are many instances where you may want to inject dynamic HTML into your page and in order to do that you're going to need to use inner HTML but if you do use inner HTML you need to make sure nothing that goes into that inner age email is sent to you by the user unless you first escape that user input so essentially make us that that user input will render as a string no matter what you do because you escape out all of the different HTML specific symbols so that it can no longer be rendered as HTML and must be rendered as text so I hope you guys enjoyed this quick video on one of the most common ways that JavaScript injection will happen in your web pages thank you guys very much for watching and have a good day