# Web Hacking Quickstart Reference
## Tooling
### Browser tools
* Developer tools:
- Inspect source code
- Javascript console
- Network logger
- Storage inspector
In most browsers the keys Ctrl+Shift+I will open the developer tools. The developer tools are great to take a look at the requests and responses that the browser sends and recieves, inspect cookies and look at the source code (only the client side source code. You can not see server side code like PHP).
But you can also manipulate the code. You can change the HTML as well as the Javascript code of a website (of course only in your own browser!). You can also change parameters of requests, also payload of POST requests and resend request,...
### Burp
The Burp Suite is a proxy software. A proxy is like a gateway right in front of your browser. All request that your browser sends, and responses that are sent to your browser first go through this proxy.
When using burp, you can see all these requests and can alter them. This is very usefull to see exactly which requests are sent between your browser and a website. Oftentimes, like when you log into a page, there are a couple of requests that are sent between your browser and the server, which you normaly can't see.
With burp it is very easy to manipulate payloads.
### The _Damn Vulnerable Web Application (DVWA)_
The [Damn Vulnerable Web Application](https://github.com/digininja/DVWA), or in short DVWA, is a "PHP/MySQL web application that is damn vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, help web developers better understand the processes of securing web applications and aid teachers/students to teach/learn web application security in a class room environment." (DVWA web page)
In this course we will use some of the DVWA examples in the pratical hacking sessions.
### The _OWASP Juice Shop_
> "OWASP Juice Shop is probably the most modern and sophisticated insecure web application!"
While the DVWA is tailored towards exploring individual vulnerabilities and learning als about the code behind it, the the Juice Shop by the OWASP (Open Web Application Security Project) is more geared towards CTFs. This also can be used for security trainings and awareness demos. In context of our course we can use it at the end, as a final mini CTF.
Check out the [OWASP Juice Shop website](https://owasp.org/www-project-juice-shop/) for more details.
Also the [help page](https://help.owasp-juice.shop/) might be worth a look.
## HTML
Basic build up of an HTML page:
```html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<!-- a comment: here could be lots of more meta tags -->
<title>This is a simple placeholder page</title>
<style>
/* some style sheet declarations */
</style>
<link rel="stylesheet" href="path/to/stylefile.css">
<script src="some/path/to/a/file.js"></script>
</head>
<body>
<header>
<h1>This is a simple placeholder page</h1>
</header>
<p>
No content here really
</p>
<footer>
<hr />
<small>🄯 by nothingness 🍪</small>
</footer>
<script src="https://tantemalkah.at/2022/hack-the-heck-out-of-this-website/hello.js"></script>
</body>
</html>
```
References:
* [HTML: HyperText Markup Language](https://developer.mozilla.org/en-US/docs/Web/HTML) @ MDN Web Docs
* [HTML Element Reference](https://www.w3schools.com/tags/default.asp) and [HTML Tutorial](https://www.w3schools.com/html/default.asp) @ W3Schools
## JavaScript
Here is a short language overview, in case you know other programming languages than JavaScript. The following snippets are from jackies artful coding course (you can also check the slides of [session 2 starting in the JS intro section](https://tantemalkah.at/2021/artful-coding/slides/session2.html#/13)):
A bit about variables and logging:
```javascript
/*
This is a comment about some placeholder variables.
Actually, it does not say an awful lot now anyway.
*/
var myNumber = 23;
let myAnswer = 42;
const myState = "This will never change!";
// Now, let's produce some very important debug output
console.log('Hey there, what\'s up? I have something for you:');
console.log('A number:', myNumber);
console.log('THE answer:', myAnswer);
console.log(myState);
```
Data types:
```javascript
let myString = 'Francine';
let myLongerString = 'Francine is a lovely name!';
let myNumber = 5000;
let myBoolen = true;
let myOtherBoolen = false;
let myArray = [42, 'is the answer', true, myLongerString, myBoolean];
let myObject = {
name: 'Elvira',
type: 'Bat',
strength: 1000,
mana: 777,
alive: true
};
myObject.type = 'Werebat';
```
Selecting elements and changing its text:
```javascript
const myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';
let playerName = 'Jane Doe (for now)';
const elPlayerName = document.getElementById('player-name');
elPlayerName.textContent = playerName;
```
Operators:
```javascript
const answer = 23 + 19;
let playerName = 'Francine';
let greeting = 'Welcome ' + playerName;
let arbitraryNumber = (9 - 3) * 8 + 9 / 3 * (23 + 2) / 2;
let isPlayerFrancine = playerName === 'Francine';
let truth = answer === 42;
let isFalse = 23 === 42;
let isTrue = 23 !== 42;
let alsoFalse = 42 === '42';
```
Conditionals:
```javascript
let iceCream = 'chocolate';
let players = 5;
if ( iceCream === 'chocolate' ) {
alert('Yay, I love chocolate ice cream!');
} else {
alert('Awwww, but chocolate is my favorite...');
}
if ( players >= 4 ) {
console.log('starting up the game engine');
}
```
Functions:
```javascript
// a function we already used:
alert ('Hiyaaaa!');
// another function we already used, which returns something useful:
let element = document.getElementById('player-name');
// a new function we create right now:
function multiply(num1,num2) {
let result = num1 * num2;
return result;
}
// using our new function
multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);
```
Some more advanced concepts are introduced in [Session III: Advanced Javascript, ES6 and beyond, jquery](https://tantemalkah.at/2021/artful-coding/slides/session3.html) of the mentioned course. In terms of web hacking you probably won't need most of them. But take a look, and also check out the reference materials linked below if you want to dig deeper into what you can do with Javascript.
References:
* [JavaScript — Dynamic client-side scripting](https://developer.mozilla.org/en-US/docs/Learn/JavaScript) @ MDN Web Docs
* [JavaScript Tutorial](https://www.w3schools.com/js/default.asp) @ W3Schools
* [Artful Coding 1: web-based games development](https://tantemalkah.at/artful-coding/2021wt/) (WT2021 @ dieAngewandte) - includes session 2 and 3 with quick intros on HTML, CSS, and JS, including slides and video recordings
## The Browser Environment
* Dev Tools
* Inspector
* 
* Console
* 
* Network
* 
* Storage
* 
* Some useful commands:
* `alert("hey there!")` or even simpler: `alert(1)`
* `document.body`
* `document.getElementById("someId")`
* `window.location`
* `window.onload`
* Clickable commands `onclick` in HTML tags:
* `<p onclick="alert('are you sure you should have clicked that?')">...some text here...</p>`
References:
* [Firefox DevTools User Docs](https://firefox-source-docs.mozilla.org/devtools-user/index.html)
* [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
* [Introduction to the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) @ MDN Web Docs
Sign in with Wallet
Connect another wallet