Tutor Lesson

Understanding web attacks begins with understanding how ordinary web applications operate. These foundations prepare you to study vulnerabilities such as cross-site scripting, cross-site request forgery, clickjacking, and tabnabbing.

Three technologies form the main parts of a web application:

• HTML (Hypertext Markup Language)supplies the page’s structure and content.
• CSS (Cascading Style Sheets)determines presentation, including colors, fonts, sizes, and layout.
• JavaScriptprovides dynamic behavior such as form validation, animation, and live page updates.

Clicking a link or entering a URL causes the browser to build an HTTP request and send it to the chosen server. A simple request can look like this:

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 ...
Referer: [external-link-removed]

• Theverb, such as GET or POST, states the requested action.
• TheURLidentifies the destination resource.
• Theprotocol versionidentifies the HTTP version in use.
• Request headerscarry extra details. For example, User-Agent identifies the browser, while Referer can tell the server which page led to the request.

After processing the request, the server returns an HTTP response:

HTTP/1.1 200 OK
Server: Apache
Set-Cookie: sessionId=abc123; Path=/
Content-Type: text/html

<html>
<body>
<h1>Hello World</h1>
</body>
</html>

• Thestatus codereports the result. For example, 200 OK indicates success, while 404 indicates that a resource was not found.
• Response headerscan identify the server, set a cookie, and tell the browser how to interpret the body through Content-Type.
• Theresponse bodycontains the returned data, which may be HTML, JavaScript, an image, or another kind of data.

An HTML response is organized into elements, also called tags. Consider this heading element:

<h1 id="title" style="color: red;">Hello World</h1>

• The<h1>tag starts a top-level heading.
• Attributes such asidandstylerefine the element’s identity, appearance, or behavior.
• The literal textHello Worldis the displayed content.
• The closing tag</h1>finishes the element.

CSS adds presentation rules to that structure. The following rule gives the page a blue background and makes its default text white:

body {
  background-color: blue;
  color: white;
}

A style sheet may appear inside the HTML document or be loaded from a separate file.

JavaScript supplies executable behavior and can be placed inside<script>tags:

<script>
document.getElementById('title').innerHTML = 'Goodbye World';
</script>

Because client-side JavaScript runs in the user’s browser, it can act within that web application as the user can: it may read or modify visible data, submit forms, and read cookies unless access is restricted.

Unrestricted JavaScript access across websites would let code on a malicious page reach information in another site, such as a bank page open for an authenticated user. The same-origin policy provides the central browser boundary that prevents this kind of access.

1. Scheme: the protocol, such ashttporhttps.
2. Host: the domain name, such asexample.org.
3. Port: for example,80for HTTP or443for HTTPS by default.

Two URLs share an origin only when all three components match exactly. The path after those components does not determine the origin.

<!-- Attacker's page -->
<iframe id="mail" src="[external-link-removed]"></iframe>
<script>
var iframe = document.getElementById('mail');
// This line tries to access the content inside the iframe
var emails = iframe.contentDocument.body.innerHTML;
</script>

A site can add another defense with theX-Frame-Optionsresponse header. Values such asDENYorSAMEORIGINtell the browser to refuse disallowed iframe embedding.

For example,www.example.comandblog.example.comare same-site because both belong toexample.com. By contrast,example.comandattacker.comare cross-site.

This distinction matters because browser protections, especially cookie behavior, increasingly depend on whether a request is same-site or cross-site.

Because HTTP does not preserve state by itself, a server needs another way to connect multiple requests to the same session. A cookie is a small value that the server asks the browser to store.

1. On the first visit, the server includes aSet-Cookieheader in its response.
2. The browser saves the cookie and associates it with the server’s domain.
3. On later requests to that domain, the browser automatically places the value in aCookierequest header.
4. The server reads the value, identifies the user, and retrieves session state such as the user’s authenticated identity.

Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure

Cookie: sessionId=abc123

This mechanism supports features such as authentication and shopping carts. It is also security-sensitive: anyone who steals a session cookie may impersonate its user without knowing the password.

A server can add protective flags when it sets a cookie:

• HttpOnlyhides the cookie from JavaScript, so it travels only with HTTP(S) requests. This prevents an XSS payload from reading it.
• Securelimits transmission to encrypted HTTPS connections, preventing the cookie from being sent over unencrypted HTTP where network traffic could be sniffed.
• SameSitegoverns cross-site transmission.Laxallows cookies during top-level navigation, such as following a link, while blocking uses such as cross-site images or iframes.Strictblocks all cross-site use.Nonepermits cross-site use but requiresSecure.

Web traffic should be encrypted with HTTPS, which carries HTTP over TLS. This applies to public websites and internal applications alike.

Strict-Transport-Security: max-age=31536000; includeSubDomains

Let’s Encrypt is a free certificate authority that provides trusted SSL/TLS certificates and offers a straightforward way to obtain valid certificates.

Security learning becomes concrete when you inspect the requests and responses moving between a browser and server. Several tools provide this view:

• Browser developer toolsshow the HTML through Inspect and display HTTP requests, responses, headers, cookies, and timing in the Network panel.
• Fiddleris a free Windows debugging proxy that presents HTTP and HTTPS traffic and supports inspecting or changing requests and responses.
• Burp Suiteis a widely used security-testing tool with a free community edition, an intercepting proxy, a repeater, and other features.
• ZAP (Zed Attack Proxy)is OWASP’s open-source alternative to Burp Suite.

These tools reveal server output, including headers such asSet-Cookie,X-Frame-Options, andContent-Type. They also let you change requests and observe the response.

These fundamentals provide the basis for understanding specific web application vulnerabilities:

• Cross-Site Scripting (XSS)injects malicious scripts that bypass the same-origin policy.
• Cross-Site Request Forgery (CSRF)tricks a browser into sending unwanted requests with cookies.
• Clickjackingconceals interface controls beneath transparent layers.
• Tabnabbinguses changed content in a background tab for phishing.

Each attack works through mechanisms already introduced here, including JavaScript, cookies, HTTP headers, and origin boundaries. Knowing those mechanisms makes both the attacks and their defenses easier to follow.