To get a better perception of HTML Injection, firstly we should know what HTML is:
HTML is a markup language, where all the website’s elements are written in the tags. It is mostly being used for creating websites. Web pages are being sent to the browser in the form of HTML documents. Then those HTML documents are being converted into normal websites and displayed for the final users.
And about the HTML injection
HTML injection is a type of injection issue that occurs when a user is able to control an input point and is able to inject arbitrary HTML code into a vulnerable web page. This vulnerability can have many consequences, like disclosure of a user’s session cookies that could be used to impersonate the victim, or, more generally, it can allow the attacker to modify the page content seen by the victims.
We can see many tutorials of 'HTML injection' technique in the Internet, but it hard to newbie to understand. I will introduce two specific examples to see how to use 'HTML injection' technique to test security. We will try to test with the disabled fields and hidden fields as below:
In some websites, some elements on the page are disabled because of some behind logics such as authorizations, validation of these fields... So, the question is how can we change the HTML to make them be enabled? Then we can input data, perform actions... on these disabled fields.
To do that, we need to open the Development tool of the browser then navigate to the Console tab and input this magic code:
It will find all disabled fields and remove the disabled attribute then change the color to red, so we can easily know what fields that were disabled before.
Now, it is your jobs to using these fields for testing security or data validation. It depends on your website's logic.
When registering account for a site it requires to input phone number. If you do not input the phone number, the 'Register' button is always disabled.
Then, use the magic code above to enable the 'Register' button.
Finally, click the button and see how your website reacts: Will it allow user to create new user without phone number OR will it show the error message that require the phone number?
In the website, some fields or buttons are hidden base on the requirement of the customer. E.g: If you do not input all required fields the 'Save' button will be hidden. So, how can save data even though required field are not entered. Let's see how can we test in this situation:
We need to known where is the hidden field/button...
Inspect this place to see the field's property. Then, we will see the 'invisible' property.
Remove the 'invisible' property and then the hidden field/button will be shown
Finally, we can see the hidden field/button, just use it as usual and see how your website reacts: Will it allow user to save data without entering required field?
Moreover, when testing the website, you will use many users with different roles on the website to test, such as: Admin, write, read-only...You will notice that the page is different with different logged user. All fields are shown with admin user but hidden with read-only user. Use this technique to see if the user with read-only/write access can perform some actions that only available for the user with Admin access.
Here are some ways that we can use the HTML injection technique to test security or data validation. However, it's limit for testing in front-end only. If you want to test the security in the Server side, please see my first post about using Fiddler https://ritvn.com/how-to-use-fiddler-to-inspect-and-modify-request-response/