test code online https://js.do/
By the end of this room, you’ll know how websites are created and will be introduced to some basic security issues.
When you visit a website your browser (like Safari or Google Chrome) makes a request to a web server asking for information about the page you’re visiting and will respond with data that your browser uses to show you the page; a web server is just a dedicated computer somewhere else in the world that handles your requests.
There are two major components that make up a website:
- Front End (Client-Side) – the way your browser renders a website.
- Back End (Server-Side) – a server that processes your request and returns a response.
There are many other processes involved in your browser making a request to a web server, but for now you just need to understand that you make a request to a server and it responds with data your browser uses to render information to you.
What term describes the way your browser renders a website?
Websites are primarily created using:
- HTML, to build websites and define their structure
- CSS, to make websites look pretty by adding styling options
HyperText Markup Language (HTML) is the language websites are written in. Elements (also known as tags) are the building blocks of HTML pages and tells the browser how to display content. The code snippet below shows a simple HTML document, the structure of which is the same for every website:
The HTML structure (as shown in the screenshot) has the following components:
<!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.
<html>element is the root element of the HTML page – all other elements come after this element.
<head>element contains information about the page (such as the page title)
<body>element defines the HTML document’s body, only content inside of the body is shown in the browser.
<h1>element defines a large heading
<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 (e.g. make the tag a different color)
<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 e.g. <p attribute1=”value1″ attribute2=”value2″>
Elements can also have an id attribute (
You can view the HTML of any website by right clicking, and selecting “View Page Source” (Chrome) / “Show Page Source” (Safari).
Let’s play with some HTML! On the right-hand side, you should see a box that renders HTML – If you enter some HTML into the box, and click the green “Render HTML Code” button it will render your HTML on the page; you should see an image of some cats.
One of the images on the cat website is broken – fix it and the image will reveal the hidden text answer!
Add a dog image to the page by adding another img tag (<img>) on line 11. The dog image location is img/dog-1.png
<script> tags or can be included remotely with the src attribute:
document.getElementById("demo").innerHTML = "Hack the Planet";
Add the button HTML from this task that changes the element’s text to “Button Clicked” on the editor on the right, update the code by clicking the “Render HTML+JS Code” button and then click the button.
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 login elsewhere on the application (or worse, used to access other backend components of the site).
Whenever you’re assessing a web application for security issues, one of the first things you should do is review the page source code to see if you can find any exposed login credentials or hidden links.
Input sanitization 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 – a vulnerability you’ll explore in another lab is database injection, where you can manipulate a database lookup query to login as another user by controlling the input that’s directly used in the query – but for now, let’s focus on HTML injection (which is client-side).