Notes: How Websites Work | THM
- solbergtonje
- 25 dec. 2024
- 3 min läsning
How Websites Work
You visit a website - your browser send request to a web server - it responds with data your browser use to show you the page
Browser -> Request from browser -> Internet -> Request from browser -> Server -> Response from server -> Internet -> Response from server -> Browser
web server: a dedicated computer
Two major components make up a website:
1. Front End (Client-Side): browser renders website
2. Back End (Server-Side): server process request and return response
HTML
Websites created using
- HTML: build website/define structure
- CSS: styling options
- JavaScript: complex features using interactivity
HyperText Markup Language (HTML)
- language websites are written in
- elements/tags building blocks of HTML pages <- tell browser how to display content
Standard HTML Structure
<!DOCTYPE html> (define the page as HTML5 document - tell browser to use HTML5 to interpret page)
<html> (root element - all other elements come after this)
<head> (contain info about page - like title)
<title>Page Title</title>
</head>
<body> (only content inside body is shown in browser)
<h1>Example Heading</h1> (large heading)
<p>Example paragraphj..</p> (a paragraph)
</body>
</html>
Elements/Tags
- many for different purposes (button for buttons, img for images etc)
- can contain attributes like class attribute to style element: <p class="bold-text"> or <img src="img/cat.jpg">
- can have multiple attributes: <p attribute1="value2" attribute2="value2">
- can have an id attribute = unique to the element <- used to identify the element by JavaScript: <p id="example">
View HTML
- right-click on the website and choose "View Page Source/Show Page Source"
JavaScript
JavaScript (JS)
- make pages interactive
- control funtionality of web pages
- can update page in real-time
- added within the page source code
- loaded with <script> tags or included with the src attribute <script src="/location/of/javascript_file.js"></script>
JavaScript code which finds a HTML element on page with id "demo" and change the element's content to "Hack the Planet":
:document.getElementById("demo").innerHTML = "Hack the Planet";
HTML elements can have events ("onclick", "onhover") which execute JavaScript
(onclick - can be defined inside JS script tags)
Code which change text of the element with id "demo" to Button Clicked:
<button onclick='document.getElementByID("demo").innerHTML = "Button Clicked";'>Click Me!</button>
Sensitive Data Exposure
- occurs when website hasn't protected/removed sensitive clear-text info to end-user (usually site's frontend source code)
Websites built using many HTML elements/tags <- for everyone to see by viewing the page source
Website developer forgot remove login credentials, hidden links to private parts or other sensitive data shown in HTML or JS
There could be HTML comments with temporary login credentials
When assessing web application - first check page source code for exposed login credentials or hidden links
HTML Injection
- a vulnerability
- occur when unfiltered user input is displayed on page
- possible to inject HTML code into a vulnerable website
- client-side
- user can input HTML (or JavaScript) code - allowing the user to control the page's appearance and functionality)
Input sanitisation
- filter malicious text user inputs
- keep website secure
Database Injection
- manipulate database lookup query to log in as another user
General rule
- never trust user input
- prevent malicious input
- website developer should sanitise all user input before using it in the JS function - fex remove any HTML tags
