How?
-------------------------------------------------------------------------------
There are two major components that make up a website:
1. Front End (Client-Side) - the way your browser renders a website.
2. Back End (Server-Side) - a server that processes your request and returns a response.
https://assets.tryhackme.com/additional/how-websites-work/client%20server.png
What do we need to know about HTML injection as a beginner?
-------------------------------------------------------------------------------
https://assets.tryhackme.com/additional/how-websites-work/html_injection.png
HTML Injection is a vulnerability that occurs when unfiltered user input is displayed on the page. If a website fails to sanitise user input (filter any "malicious" text that a user inputs into a website), and that input is used on the page, an attacker can inject HTML code into a vulnerable website.
Input sanitisation is very important in keeping a website secure, as information a user inputs into a website is often used in other frontend and backend functionality.
------------------------------------------------------------------------------------------------------- HTML
-------------------------------------------------------------------------------------------------------
Websites are primarily created using:
- HTML, to build websites and define their structure
- CSS, to make websites look pretty by adding styling options
- JavaScript, implement complex features on pages using interactivity
-------------------------------------------------------------------------------------------------------
HyperText Markup Language (HTML)
-------------------------------------------------------------------------------------------------------
=> The HTML structure has the following components:
1. The <!DOCTYPE html> defines that the page is a HTML5 document. This helps with standardisation across different browsers and tells the browser to use HTML5 to interpret the page.
2. The <html> element is the root element of the HTML page - all other elements come after this element.
3. The <head> element contains information about the page (such as the page title).
4. The <body> element defines the HTML document's body; only content inside of the body is shown in the browser.
5. The <h1> element defines a large heading.
6. The <p> element defines a paragraph
#. There are many other elements (tags) used for different purposes. For example, there are tags for buttons (<button>), images (<img>), lists, and much more.
-------------------------------------------------------------------------------------------------------
* Tags can contain attributes such as the class attribute which can be used to style an element.
<p class="bold-text">
* or the src attribute which is used on images to specify the location of an image.
<img src="img/cat.jpg">
* An element can have multiple attributes each with its own unique purpose.
<p attribute1="value1" attribute2="value2">
* Elements can also have an id attribute which is unique to the element.
<p id="example">
Unlike the class attribute, where multiple elements can use the same class, an element must have different id's to identify them uniquely. Element id's are used for styling and to identify it by JavaScript using DOM api.
-------------------------------------------------------------------------------------------------------
You can view the HTML of any website by right-clicking and selecting "View Page Source" (Chrome) / "Show Page Source" (Safari).
-------------------------------------------------------------------------------------------------------
JavaScript
-------------------------------------------------------------------------------------------------------
JavaScript is added within the page source code and can be either loaded within <script> tags
or can be included remotely with the src attribute:
<script src="/location/of/javascript_file.js"></script>
The following JavaScript code finds a HTML element on the page with the id of "demo" and changes the element's contents to "Hack the Planet"
document.getElementById("demo").innerHTML = "Hack the Planet";
HTML elements can also have events, such as "onclick" or "onhover" that execute JavaScript when the event occurs. The following code changes the text of the element with the demo ID to Button Clicked:
<button onclick='document.getElementById("demo").innerHTML = "Button Clicked";'>Click Me!</button>
-------------------------------------------------------------------------------------------------------
Sensitive Data Exposure
-------------------------------------------------------------------------------------------------------
Sensitive Data Exposure occurs when a website doesn't properly protect (or remove) sensitive clear-text information to the end-user; usually found in a site's frontend source code.
Sensitive information can be potentially leveraged to further an attacker's access within different parts of a web application.
For example, there could be HTML comments with temporary login credentials, and if you viewed the page's source code and found this, you could use these credentials to log in elsewhere on the application (or worse, used to access other backend components of the site).
---------------------------------------------------------------------------------------------------------------------
Thanks for reading,
Roger
Comments