2013 05-03 - HTML5 & JavaScript Security

Security
Created by Johannes Hoppe

ZielAngriffsvektoren aufzeigen.
Strategien besprechen.
Mehr nicht!

Ein Formular
Username:
Password:
Login
<form id="login" action="#">
Username: <input type="text" name="username">
Password: <input type="password" name="password">
<input type="submit" value="Login">
</form>

Formaction
Username:
Password:
Login
Klick mich!
<form id="login" action="#">
Username: <input type="text" name="username">
Password: <input type="password" name="password">
<input type="submit" value="Login">
</form>
<button type="submit" form="login" formaction="http://example.org">
Klick mich!
</button>

SVG
Presto, WebKit, Gecko und sogar Trident 9
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
<circle cx="20" cy="20" r="15" fill="yellow" stroke="black"/>
<circle cx="15" cy="15" r="2" fill="black" stroke="black"/>
<path d="M 13 26 A 5 3 0 0 0 27 26" stroke="black" fill="none" stroke
-width="2"/>
</svg>

SVG
kann JavaScript enthalten!
Test
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="50">
<defs><style> </style></defs>
<circle cx="20" cy="20" r="15" fill="yellow" stroke="black"/>
<path d="M 13 26 A 5 3 0 0 0 27 26" stroke="black" fill="none" stroke
-width="2" transform="rotate(180, 20, 28)"/>
<text x="11" y="50" id="display">Test</text>
<script>
</script>
</svg>
<![CDATA[ text { font-size:6pt; } ]]>
alert(document.cookie);
document.getElementById('display').textContent = document.cookie;

2013 05-03 - HTML5 & JavaScript Security

Business as usual
HTML5 es ist auch nicht schlimmer als HTML 4
» http://html5sec.org

XSSEingeschleuster JavaScript-Code

Oldies but Goldies
index.html?message=Daten gespeichert
index.html?message=<script>alert('XSS')</script>
<script>
var message = $.url().param('message');
if (message) {
Notifier.success(message);
}
</script>

Eval everywhere
Eval is evil
» Demo

<input onfocus="alert('XSS onfocus')" autofocus>

<video><source onerror="javascript:alert('XSS onerror')"></video>

<form id=test onforminput=alert('XSS onforminput')>
<input>
</form>
<button form=test onformchange=alert('XSS onformchange')>X</button>
1 2 3

OWASPOpen Web Application Security Project
XSS Filter Evasion Cheat Sheet

<IMG SRC="&#34&#32&#111&#110&#101&#114&#114&#111&#114&#61&#34&#97&#108&
#101&#114&#116&#40&#39&#88&#83&#83&#39&#41&#59">
» Old IE Demo

1.Hier sollten dynamische
Daten niemals verwendet werden
<script> </script>

<div HIER="test"/>
<HIER href="test" />
<style> </style>
HIER
HIER

2.HTML escape
dynamic data
& → &
< → <
> → >
" → "
' → ' / '
<div>HTML ESCAPE</div>

Testen?
function htmlEncode(input) {
// jquery.text == document.createTextNode
return ($('<div/>').text(input).html());
}
var saveFormat = function () {
var args = Array.prototype.slice.call(arguments);
var txt = args.shift();
$.each(args, function (i, item) {
item = htmlEncode(item);
txt = txt.replace("{" + i + "}", item);
});
return txt;
};

Testen!
describe("saveFormat", function () {
var original = '{0} - {1} - {2}';
it("should replace placeholders", function () {
var expected = 'A - B - C';
var formated = saveFormat(original, 'A', 'B', 'C');
expect(formated).toEqual(expected);
});
it("should encode injected content", function () {
var expected = 'A - <b>TEST</b> - C';
var formated = saveFormat(original, 'A', '<b>TEST</b>', 'C');
});
});

Test
finished in 0.007s
••
No try/catch
Jasmine 1.3.1 revision 1354556913
Passing2specs
saveFormat
should replace placeholders
should encode injected content
» Demo

Moment...
describe("saveFormat", function () {
var original = '<a title="{0}">Test</a>';
it("should replace quotes", function () {
var expected = '<a title=""">Test</a>';
var formated = saveFormat(original, '"');
});
});

Richtig testen!
finished in 0.006s
x
No try/catch
Jasmine 1.3.1 revision 1354556913
Failing1spec
1spec|1 failing
saveFormat should replace quotes.
Expected '<a title=""">Test</a>' to equal '<a
title=""">Test</a>'.
Error: Expected '<a title=""">Test</a>' to equal '<a title=""">Test</a>'.
at new jasmine.ExpectationResult (http://localhost:1332/examples/jasmine/lib/j
at null.toEqual (http://localhost:1332/examples/jasmine/lib/jasmine-1.3.1/jasm
at null.<anonymous> (http://localhost:1332/examples/jasmine-demo2/saveFormat.s
at jasmine.Block.execute (http://localhost:1332/examples/jasmine/lib/jasmine-1
at jasmine.Queue.next_ (http://localhost:1332/examples/jasmine/lib/jasmine-1.3
» Demo

3.Attribute escape
dynamic data
a-z A-Z 0-9 → immun
, . - _ → immun
Rest → &#xHH;
<div attr="ATTRIBUTE ESCAPE"></div>

<div attr=ATTRIBUTE ESCAPE></div>

4. DO NOTJavaScript escape
dynamic data
HTML parser runs before the JavaScript parser!
you are doing it wrong

Das hier ist Alltag
UserList.cshtml / Kendo UI Template
# if(ID != 0) { #
<a href="javascript:DialogManager.ShowPartialDialog('@Url.Action("UserM
anagement", "Management")', { userId : '#= htmlEncode(ID) #' }, {title:
'#= htmlEncode(Alias) #'})"#= htmlEncode(Alias) #</a>
# } else { #
#= htmlEncode(Alias) #
# } #

?Offensichtlich läuft beim Umgang
mit Daten etwas prinzipiell falsch!

Egal
ob Cookies
ob Session Storage
ob Local Storage
ob WebSQL
die Daten sind nicht vertrauenswürdig!

Vertraulichen Informationen
gehören in die SERVER-Session!

WebSQL
SQL Injection:
Prepared Statement:
executeSql("SELECT foo FROM bar WHERE value=" + value);
executeSql("SELECT foo FROM bar WHERE value=?", [value]);

Mashups!
define(['jquery', 'knockout',
'knockout.mapping', 'domReady!'], function ($, ko, mapping) {
var url ='http://search.twitter.com/search.json?q=%23xss&callback=?';
$.getJSON(url).done(function (data) {
var viewModel = mapping.fromJS(data);
ko.applyBindings(viewModel, $('#tweets').get(0));
});
});

JSON
JSON with Padding
{"hello": "world"}
<script>
</script>
<script src="http://search.twitter.com/search.json?q=%23dnc13&callback=
foo"></script>
var foo = function(json) {
$('#output').text(JSON.stringify(json, undefined, 2));
};
foo({"hello": "world"});
» Demo

SOP
Same origin policy → Not macht erfinderisch (JSONP)
CORS
Cross-Origin Resource Sharing → Access-Control-Allow-Origin: *
WebSockets
do what you want

» Sicherheit von Web-Anwendungen

2013 05-03 - HTML5 & JavaScript Security

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to 2013 05-03 - HTML5 & JavaScript Security (20)

More from Johannes Hoppe (20)

Recently uploaded (20)

2013 05-03 - HTML5 & JavaScript Security