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

# Lab 2

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

Custom tags are HTML elements you invent yourself, like `<my-widget>` or `<user-card>`, that browsers accept and treat as valid elements. They must contain a hyphen (`-`) in the name to distinguish them from built-in tags.

So if we want it to automatically load, there's one way. If you know hashing (#1, #2) you know that if you put in your URL it automatically redirects you to a section of the page.&#x20;

{% hint style="info" %}
If you going to put a \<script> tag, make sure what's in it is valid JS! You can not put more HTML code inside of a javascript tag.&#x20;
{% endhint %}

`location = 'https://YOUR-LAB-ID.web-security-academy.net/?search=%3Cxss+id%3Dx+onfocus%3Dalert%28document.cookie%29%20tabindex=1%3E#x';`

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

There's two ways to do mainly - use location or another iframe. We'll be showing location

```
<script>
location = 'https://0aa4007303b5f6cc81751b33008000f8.web-security-academy.net/?search=%3Cxss+id%3Dx+onfocus%3Dalert%28document.cookie%29%20tabindex=1%3E#x';
</script>
```

location = '<https://0aa4007303b5f6cc81751b33008000f8.web-security-academy.net/?search=\\><xss id=x onfocus=alert(document.cookie) tabindex=1>#x';<br>

**`<script>...</script>`** — you're on the exploit server. Content inside `<script>` runs as JS when the victim loads the exploit page.

**`location = '...'`** — assigning to `location` navigates the victim's browser to the URL. Simplest possible delivery.

**`?search=<xss ...>`** — the lab reflects the `search` parameter into the page's HTML. Your payload lands in the DOM.

**`<xss>`** — custom tag. The lab's filter blocklist doesn't include arbitrary hyphenated-or-unknown tag names, so `<xss>` slips through where `<script>`, `<img>`, `<svg>`, etc. would be blocked.

**`id=x`** — labels the element so the URL fragment `#x` can find it.

**`onfocus=alert(document.cookie)`** — the event handler that runs when the element gets focused. Prints the cookie.

**`tabindex=1`** — makes the custom tag **focusable**. Without this, `<xss>` is inert (custom tags aren't focusable by default). With `tabindex`, any element can receive focus.

**`#x`** — URL fragment. When the browser loads the page, it looks for the element with `id="x"`, scrolls to it, and **focuses it** (because it's focusable via `tabindex`). That focus fires `onfocus` → runs the alert.

{% hint style="info" %}
`location` is a **built-in browser object** that represents the current URL of the page. It's always available in JavaScript — you don't have to import it or create it
{% endhint %}

### Lab 3

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

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

This leads to the same error.

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

Using the tag wordlist.

We see that \<animate> has a 200 response.&#x20;

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

It specifies svg, so would svg probably work?&#x20;

\<svg>

`<svg>` is an HTML tag for **Scalable Vector Graphics** — a way to embed vector images (shapes, lines, paths defined by math, not pixels) directly in HTML.

To have text in a svg, such as a "Click Me" We need to specify a text and anchor tag.&#x20;

```
<svg><a xlink:href="javascript:alert(1)"><text x=20 y=20>click</text></a></svg>
```

In this, we need to have svg, but also dimensions (x and y) alongside the \<text>.&#x20;

The "xlink:href="javascript:alert(1)"" can work, as this creates a **clickable link inside an SVG** that, when clicked, runs JavaScript. xlink is the favored to href because of svg.

### Animate

```
<svg><a><animate attributeName=href values=javascript:alert(1) /><text x=20 y=20>click</text></a></svg>
```

`<animate>` requires `attributeName` to know **which attribute** it's animating. Without it, the animation has no target and does nothing.&#x20;

* `attributeName=href` → says "animate the `href` attribute"
* `values=javascript:alert(1)` → set the `href` to this value