hsctf – accessible rich internet applications

(Part of a series of writeups from HSCTF 2019.)

The challenge text reads:

A very considerate fellow, Rob believes that accessibility is very important!

NOTE: The flag for this challenge starts with flag{ instead of hsctf{

The challenge links to a download of a file index.html , a "Magic Number Generator" powered by an obfuscated piece of JavaScript.

When unobfuscated (but otherwise unchanged), it looks like this.

var lookup = ['\x0b=\x22epduzqf!...snip...{f1=0ejw?=0ejw?', 'charCodeAt', 'write'];

(function(_lookup, counter) {
    var fn = function(c) {
        while (--c) {
            _lookup['push'](_lookup['shift']());
        }
    };
    fn(++counter);
}(lookup, 0xbd));

var get = function(hex) {
    hex = hex - 0x0;
    var value = lookup[hex];
    return value;
};

var s = get('0x0');
m = '';

for (i = 0x0; i < s['length']; i++)
    m += String['fromCharCode'](s['charCodeAt'](i) - 0x1);

document.write(m)

Standard obfuscation, but easily "defeated" by inspecting the rendered source in something as accessible as devtools.

At the bottom of the page is a set of 1040 binary bits, in an unknown order, each with its position in the set attached to it.

<div id="list" role="listbox">
    <div role="option" aria-posinset="525" aria-setsize="1040">1</div>
    <div role="option" aria-posinset="642" aria-setsize="1040">1</div>
    <div role="option" aria-posinset="291" aria-setsize="1040">0</div>
    <div role="option" aria-posinset="317" aria-setsize="1040">0</div>
    <div role="option" aria-posinset="792" aria-setsize="1040">0</div>
    <div role="option" aria-posinset="107" aria-setsize="1040">1</div>
    <div role="option" aria-posinset="698" aria-setsize="1040">1</div>
    <div role="option" aria-posinset="420" aria-setsize="1040">0</div>
    <!-- ... -->
</div>

I made the assumption that this was an ASCII bitstream, and the calculation 1040/8 equating to a whole number gave me even more reason to believe it.

Since document.write is synchronous, any code afterwards can now read the new DOM . Each bit needs to be read out and put at the right position in the set. The length is read only once, because efficiency.

const list = document.querySelector('#list')
const set = {}
let len = null

for (const el of list.children) {
    set[el.getAttribute('aria-posinset')] = +el.innerText
    if (len === null) {
        len = el.getAttribute('aria-setsize')
    }
}

The following code loops through the bits in groups of 8, uses bit shifting to create a byte, then converts it to an ASCII character.

let flag = ''

for (let i = 0; i < len; i += 8) {
    let char = 0;

    for (let j = 8 - 1; j >= 0; --j) {
        char = char | (set[i + j] << (8 - j - 1))
    }

    flag += String.fromCharCode(char)
}

console.log(flag)

Running this shows the message containing the flag.

im gonna add some filler text here so the page is a bit longer. lorem ipsum... here's the flag btw, flag{accessibility_is_crucial}