The Foundations

What is Client-Side Hacking?

Architecture Overview

🗃 Database

→

Web Server

↔

HTTP Request / Response

↔

🌐 Browser (Client)

Looking for vulnerabilities that are exploited within a victim's browser
Our browser loads HTML, CSS, and JS from the server when we visit a website
We can read this javascript and hack with a more "whitebox" approach
XSS is the focus today but there are other client-side vulnerabilities like client-side path traversal, CSRF, CSS injection, etc.

JavaScript

JavaScript Properties

Object-Oriented Platform Independent Update HTML via DOM Exception Handling Anonymous Functions Make Web Pages Alive

The Language Of The Web
Meant to give interactivity to web pages so they do more than just display static content
Has control over the page as well as a lot of other browser functions (i.e. redirects, cookies, making requests)
Malicious javascript execution can lead to account takeover, exfiltration of sensitive data, and manipulation of the web page

Variables, Functions, Conditionals, and Objects

JavaScript

// variable assignment
myVariable = 2;

// function definition
function myFunc(val) {
    console.log("Input val is: ", val);
    // log if val is positive or negative
    if (val >= 0) {
        console.log("input val is positive");
    }
    else {
        console.log("input val is negative");
    }
    return val+1;
}

// calling function
result = myFunc(myVariable)
console.log("result: ",result);

// object definition
myObject = {"key1":"value1","key2":1,"key3":{"hello":"world"}};
// access properties with [] or . notation
console.log("key1 is: ", myObject['key1']);
console.log("key3.hello is: ", myObject.key3["hello"]);

Output Input val is: 2 input val is positive result: 3 key1 is: value1 key3.hello is: world

Variables = placeholders for values that can be of different types (i.e. string, numbers, objects)
Functions = reusable blocks of code that can take inputs, process them, and produce output
Conditionals = only run some code if a certain condition is true
Object = data structure that consists of key-value pairs

The DOM

DOM Tree Structure

Document

└─ html

└─ head

└─ title

└─ body

└─ div

└─ p h1

└─ ul

└─ li li li

Document Object Model (DOM) is how javascript understands and interacts with a web page
Has its own API that the browser exposes to javascript to let it access the DOM
Represented as a tree of nodes
Everything on the page can be accessed and modified by javascript via the DOM

Safe vs Dangerous DOM Manipulation

Safe — Won't Cause XSS

// These will not cause XSS
document.body.innerText =
  "<img/src/onerror=alert()>";

document.body.textContent =
  "<img/src/onerror=alert()>";

Dangerous — Can Lead to XSS

// These can lead to XSS
document.body.innerHTML =
  "<img/src/onerror=alert('XSS!')>";

document.write(
  "<img/src/onerror=alert('XSS!')>");

⚠ This page says:

XSS!

DOM exposes a number of ways to modify the page
Some are safe while others can lead to javascript execution if malicious input is passed in
innerText and textContent treat input as plain text — safe
innerHTML and document.write() parse input as HTML — dangerous

Next: Sources & Sinks →