${alert}The Dark Side`

>Dark Side

=> Functions


An arrow function expression (also known as fat arrow function) has a shorter syntax compared to function expressions and lexically binds the this value. Arrow functions are always anonymous.
You get to skip typing function and return, as well as some parentheses, braces, and a semicolon.
var a = [

var a2 ={ return s.length });

var a3 = s => s.length );

>> Array [ 8, 6, 7, 10 ]

Dark Side

 Lack of Curlies


It might help in scenarios, where an injection or sandbox bypass has trouble getting a reference to window or any other global object. 

{ }

( )

Lack of parentheses 


>> Window {top: Window, ..., document: document, external: Object,}


for ... of Statements


The for...of statement creates a loop Iterating over iterable objects (including Array, Map, Set, arguments object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
var arr = ["A","B","C"];

>> ["A", "B", "C"]

for (i in arr) {console.log(i);}

>> 0 1 2

for (i of arr) {console.log(i);}

>> A B C

Dark Side

It might facilitate shortening of attack vectors in the sense that it saves the characters that would be otherwise necessary if a statement was chosen.

arr = [$=>alert(1)];
for (i of arr) { i() }

>> Function Execution!


...Spread Call Operator


The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.
>> "a","b","c"

>> "a"

function myFunction(x, y, z) { }
var args = [0, 1, 2];

var merge = ['b', 'c'];
console.dir(['a', ...merge, 'd', 'e'])
>> ["a", "b", "c", "d", "e"]

Dark Side

Note: It can only be used with objects that are iterable. But functions containing the yield keyword (i.e., Generators) are automatically flagged to be iterable too, so the bandwidth of objects a spread operator can work with is actually quite large

var a = { hello: eval };
var b = Iterator(a);
>> Function Execution!

function* a(){ yield eval }
>> function eval()
>> Function Execution!
Object.prototype[Symbol.iterator] = String.prototype[Symbol.iterator];

>>Array [ "f", "u", "n", "c", "t", "i", "o", "n", " ", "O", 29 more… ]

Simply borrow the functionality of an iterable and inject it into a non-iterable.



import * From


The import statement is used to import functions that have been exported from an external module, another script, etc. An import from one side requires an export on the other side to work, so only code that is offered as a library can actually be imported and used by others.
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
export function diag(x, y) {
    return sqrt(square(x) + square(y));
//------ main.js ------
import { square, diag } from 'lib';
>> 121
console.log(diag(4, 3)); 
>> 5

Dark Side

Modules might have great impact on browser and web security, as they allow fetching and processing of external resources, and henceforth have to follow a large set of complex rules to work nicely in a browser environment. 

//------ module ------
export function $(){}


import {$} from "//"
export * from "//"

//------ module2 ------
export function i(){return alert}

import {i} from '//'


No Support and Maybe Never!

(Default, a="Func"+"tion", C"Parameters")


Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed.
function multiply(a, b = 1) {
  return a*b;
>> 5

function singularAutoPlural(singular, plural = singular+"s",
                            rallyingCry = plural+" ATTACK!!!") {
  return [singular, plural, rallyingCry ]; 

>> ["Gecko","Geckos", "Geckos ATTACK!!!"]

>> ["Fox","Foxes", "Foxes ATTACK!!!"]

singularAutoPlural("Deer", "Deer", "Deer ... change.")
>> ["Deer", "Deer", "Deer ... change."]

Dark Side

Now it is possible to make use of an injection into that part of a function declaration, which we formerly knewn and loved as a usual dead-end.  The execution occurs in the function scope but before the body of the function is available.

function a(a=alert(1)){};

>> Function Executed!

function a(a, b, c, d=alert(arguments[0]),e=alert(abc)){
 var abc = 2;

>> Function Executed! | Function Executed with undefined.


Computed Properties




 Computed property names allow you to put an expression in brackets [], that will be computed as the property name. 
var prop = "foo";
var o = {
  [prop]: "hey",
  ["b" + "ar"]: "there",
>> Object { foo: "hey", bar: "there" }

obj = {
        ['h'+'ello']() {
            return 'hi';

>> "hi"

Dark Side

 Computed Properties as the name indicates, allow for code execution where the property name should be - and it takes what the code returns as its name.

a={[1+1]: 1};
>> Object { 2: 1 }

({[alert(1)]: 1})

>> Function Executed!





A shorter syntax for method definitions on objects initializers is introduced. It is a shorthand for a function assigned to the method's name.
//Old Way
var obj = {
  foo: function() {},
  bar: function() {}

//New Way
var obj = {
  foo() {},
  bar() {}

Dark Side

Declaring the property name and the function name independently was quite expressive. This nice short version combines both. No more anonymous functions!

obj = { foo: function foo() { alert(1) } };

//Shorthand Methods.
obj = { foo() { alert(1) } }

//No curly braces because code block is only a single expression.
var obj = { foo() alert(1) }

//Just to avoid
var obj = {get foo() alert(1) }

//The valueOf() method returns the primitive value of the specified object.
+{valueOf() {alert(1)}}

+{valueOf() alert(1)}


`Quasi Literals`


Template strings are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.
`string text`

//Multiline Strings
`string text line 1 \nstring text line 2`

//Expression Interpolation
`string text ${expression} string text`

//Tagged Templates
tag `string text ${expression} string text`

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);

>> "Fifteen is 15 and
>> not 20."

Dark Side

Note: We don’t really call the function but rather decorate the string with an output from the function. So it’s a tagged template and not a different way to call alert.
WAF and IDS need to be updated as we can see back-tick now have a function.



+{[alert`1`]: 1}




They are coming

Generator Functions*
Spread Call Operator
Proper Tail Calls


class a{@alert`ES7 will be Awesome too...` get}



by Renato Rodrigues | @simps0n |

Content by:

Tony Delfino

Images by:

ECMAScript6 - The Dark Side

By Renato Rodrigues

ECMAScript6 - The Dark Side

The Dark Side of ECMAscript6 (ES6) features. Presentation for Autumn Security Champions Event @OPO (08/10/2015)

  • 4,040
Loading comments...

More from Renato Rodrigues