2013-06-25 - HTML5 & JavaScript Security
0 likes1,229 views
The document focuses on HTML5 security, discussing various attack vectors and strategies to mitigate them. It highlights specific examples of JavaScript execution vulnerabilities, Cross-Site Scripting (XSS) techniques, and the importance of data sanitization to prevent unauthorized access. The document serves as a presentation outline by Johannes Hoppe, aiming to educate on securing web applications.
![SVG
kann JavaScript enthalten!
Test
<?xmlversion="1.0"?>
<svgxmlns="http://www.w3.org/2000/svg"width="200"height="50">
<defs><style> </style></defs>
<circlecx="20"cy="20"r="15"fill="yellow"stroke="black"/>
<circlecx="15"cy="15"r="2"fill="black"stroke="black"/>
<circlecx="25"cy="15"r="2"fill="black"stroke="black"/>
<pathd="M1326A530002726"stroke="black"fill="none"stroke-width="2"transform="rotate(180,2
0,28)"/>
<textx="11"y="50"id="display">Test</text>
<script>
</script>
</svg>
<![CDATA[text{font-size:6pt;}]]>
alert(document.cookie);
document.getElementById('display').textContent=document.cookie;](https://image.slidesharecdn.com/2013-06-25-html5javascriptsecurity-130622180340-phpapp01/85/2013-06-25-HTML5-JavaScript-Security-8-320.jpg)
![WebSQL
SQL Injection:
Prepared Statement:
executeSql("SELECT foo FROM bar WHERE value=" + value);
executeSql("SELECT foo FROM bar WHERE value=?", [value]);](https://image.slidesharecdn.com/2013-06-25-html5javascriptsecurity-130622180340-phpapp01/85/2013-06-25-HTML5-JavaScript-Security-31-320.jpg)
![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));
});
});](https://image.slidesharecdn.com/2013-06-25-html5javascriptsecurity-130622180340-phpapp01/85/2013-06-25-HTML5-JavaScript-Security-33-320.jpg)
2013-06-25 - HTML5 & JavaScript Security
- 1. Security bit.ly/HTML5Sec Interaktive Version der Präsentation! Created by Johannes Hoppe
- 2. JohannesHoppe.de bit.ly/HTML5Sec Interaktive Version der Präsentation!
- 5. 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>
- 6. 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>
- 7. 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"/> <circle cx="25" 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>
- 8. SVG kann JavaScript enthalten! Test <?xmlversion="1.0"?> <svgxmlns="http://www.w3.org/2000/svg"width="200"height="50"> <defs><style> </style></defs> <circlecx="20"cy="20"r="15"fill="yellow"stroke="black"/> <circlecx="15"cy="15"r="2"fill="black"stroke="black"/> <circlecx="25"cy="15"r="2"fill="black"stroke="black"/> <pathd="M1326A530002726"stroke="black"fill="none"stroke-width="2"transform="rotate(180,2 0,28)"/> <textx="11"y="50"id="display">Test</text> <script> </script> </svg> <![CDATA[text{font-size:6pt;}]]> alert(document.cookie); document.getElementById('display').textContent=document.cookie;
- 9. Business as usual HTML5 es ist auch nicht schlimmer als HTML 4 » http://html5sec.org
- 11. 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>
- 12. Eval everywhere Eval is evil » Demo <!-- Self-executing onFocus event via autoFocus --> <input onfocus="alert('XSS onfocus')" autofocus> <!-- Video OnError --> <video><source onerror="javascript:alert('XSS onerror')"></video> <!-- Presto only: Form surveillance --> <form id=test onforminput=alert('XSS onforminput')> <input> </form> <button form=test onformchange=alert('XSS onformchange')>X</button> 1 2 3
- 13. OWASPOpen Web Application Security Project XSS Filter Evasion Cheat Sheet <!-- Long UTF-8 Unicode encoding without semicolons --> <IMG SRC="" onerror="al& #101rt('XSS');"> » Old IE Demo
- 14. XSS Vorbeugen
- 15. 1.Hier sollten dynamische Daten niemals verwendet werden <script> </script> <!-- HIER --> <div HIER="test"/> <HIER href="test" /> <style> </style> HIER HIER
- 16. 2.HTML escape dynamic data & → & < → < > → > " → " ' → ' / ' <div>HTML ESCAPE</div>
- 17. 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; };
- 18. 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'); expect(formated).toEqual(expected); }); });
- 19. Test finished in 0.004s •• No try/catch Jasmine 1.3.1 revision 1354556913 Passing2specs saveFormat should replace placeholders should encode injected content » Demo
- 20. 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, '"'); expect(formated).toEqual(expected); }); });
- 21. Richtig testen! finished in 0.005s 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://johanneshoppe.github.io/HTML5Security at null.toEqual (http://johanneshoppe.github.io/HTML5Security/examples/jasmine at null.<anonymous> (http://johanneshoppe.github.io/HTML5Security/examples/jas at jasmine.Block.execute (http://johanneshoppe.github.io/HTML5Security/example at jasmine.Queue.next_ (http://johanneshoppe.github.io/HTML5Security/examples/ » Demo
- 22. 3.Attribute escape dynamic data a-z A-Z 0-9 → immun , . - _ → immun Rest → &#xHH; <div attr="ATTRIBUTE ESCAPE"></div> <!-- NIEMALS ohne quotes! --> <div attr=ATTRIBUTE ESCAPE></div>
- 23. 4. DO NOTJavaScript escape dynamic data HTML parser runs before the JavaScript parser! you are doing it wrong
- 24. 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) # # } #
- 25. ?Offensichtlich läuft beim Umgang mit Daten etwas prinzipiell falsch!
- 26. Storage
- 27. Egal ob Cookies ob Session Storage ob Local Storage ob WebSQL die Daten sind nicht vertrauenswürdig!
- 29. Vertraulichen Informationen gehören in die SERVER-Session!
- 31. WebSQL SQL Injection: Prepared Statement: executeSql("SELECT foo FROM bar WHERE value=" + value); executeSql("SELECT foo FROM bar WHERE value=?", [value]);
- 32. Kommunikation
- 33. 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)); }); });
- 34. Loading...
- 35. 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
- 36. JSONP
- 37. SOP Same origin policy → Not macht erfinderisch (JSONP) CORS Cross-Origin Resource Sharing → Access-Control-Allow-Origin: * WebSockets do what you want
- 38. JS-Recon Shell of the Future
- 43. » Sicherheit von Web-Anwendungen