HTML5 and CSS3 security 09. November 2012 Florian
Werbung
HTML5 and CSS3 security
09. November 2012
Florian Brunner, BSc
Holistic Security Consulting
risk assessment | red teaming | security awareness
Agenda
2
New things in HTML5 and CSS3
Input validation
Practical examples
Florian Brunner, BSc
09. November 2012
New Things in HTML5 »
Bild: W3C (http://www.w3.org/)
Semantics
4
New media elements
New structural elements
New semantics for internationalization
New link relation types
New attributes
New form types
New microdata syntax for additional semantics
Florian Brunner, BSc
09. November 2012
5
Input
color
date
datetime
datetime-local
email
month
number
range
search
tell
time
url
week
www.holisticsec.com/html5/input_validation.php
Florian Brunner, BSc
09. November 2012
6
Audio/Video
first-class citizens
access, control and manipulate timeline data and network
states of the files
read and write raw data to audio files (future)
manipulate captions in videos (future)
Florian Brunner, BSc
09. November 2012
7
File access
read files [a]synchronously
create arbitrary Blobs
write files to a temporary location
recursively read a file directory
perform file drag and drop from the desktop to the browser
upload binary data using XMLHttpRequest2
Florian Brunner, BSc
09. November 2012
Connectivity
8
Web Sockets
Server-Sent Events
Florian Brunner, BSc
09. November 2012
Storage
9
allows the app to save data on the client
sync back to the server
Florian Brunner, BSc
09. November 2012
Offline
10
application cache
local storage
web SQL & indexed database
online/offline events
Florian Brunner, BSc
09. November 2012
Structure
11
<!DOCTYPE html>
<html>
<head>
<title>HTML5 f**kups</title>
...
</head>
<body>
<p>looks exactly as html4</p>
...
</body>
</html>
Florian Brunner, BSc
09. November 2012
New Things in CSS3 »
Bild: Tetris CSS3 by Geoffrey Warnants http: // mzl. la/ SH7fcG
Media queries
13
can change stylesheet based on:
height
widht
viewport
...
Florian Brunner, BSc
09. November 2012
Web fonts
14
@font-face { font-family: Delicious;
src: url(’Delicious-Roman.otf’); }
@font-face { font-family: Delicious;
font-weight: bold;
src: url(’Delicious-Bold.otf’); }
h3 { font-family: Delicious, sans-serif; }
Florian Brunner, BSc
09. November 2012
15
Attribute selectors
Syntax
element[att*=val]
Example
a[href*=’google.com’]
p[title$=’orl’]
http://www.css3.info/preview/attribute-selectors
Florian Brunner, BSc
09. November 2012
What can go wrong »
Bild: Robert Thomson (http://www.flickr.com/photos/92154034@N00/440515255/)
What can possibly go wrong?
17
Cross Origin Requests
Client-side and offline storage
Web workers
Cross Document Messaging
Florian Brunner, BSc
09. November 2012
localStorage and sessionStorage
18
Attack on local PC
Sensitive data in storage
Long persistance
Very much like cookies, but:
size
not sent to server
Florian Brunner, BSc
09. November 2012
WebSQL
19
SQL to client side
Prepared statements
XSS and SQL Injection
Florian Brunner, BSc
09. November 2012
WebSQL
20
Use Prepared Statements
Output encoding
Create database and store data over TLS
Ask user for permission
Florian Brunner, BSc
09. November 2012
21
Cross Document Messaging
Sender and receiver
Communication between frames in different origins
http://www.holisticsec.com/html5/cross_domain_
messaging.php
Florian Brunner, BSc
09. November 2012
22
Cross Document Messaging
Sender
window.postMessage(’message’, ’targetOrigin’);
Receiver
window.addEventListener(’message’, recv, false);
function recv(event) {
if (event.origin != ’http://example.org’) {
...
}
}
Florian Brunner, BSc
09. November 2012
23
Cross Site Scripting via HTML5
Before
<input type=’text’ value=’--> inject here’
onmouseover=’alert(’injected value’)’>
After
<input type=’text’ value=’--> inject here’
onfocus=’alert(’injected value’)’ autofocus>
Florian Brunner, BSc
09. November 2012
24
Cross Site Scripting via HTML5
self-executing focut event via autofocus
http://html5sec.org/test/#7
self-executing blur event via autofocus competition
http://html5sec.org/test/#8
self-executing javascript via <body> onscroll autofocus
http://html5sec.org/test/#12
passive javascript execution via <body> and oninput attribute
http://html5sec.org/test/#86
keylogger
http://html5sec.org/keylogger
Florian Brunner, BSc
09. November 2012
Bruteforcing with CSS3 and HTML5
25
http://html5sec.org/invalid?start=0
Florian Brunner, BSc
09. November 2012
26
Websockets
Port Status
Open
Closed
Filtered
WebSocket (ReadyState 0)
< 100ms
1000ms
> 30000ms
COR (ReadyState 1)
< 100ms
1000ms
> 30000ms
http://www.andlabs.org/tools/jsrecon.html
http://www.holisticsec.com/html5/portscan.php
Florian Brunner, BSc
09. November 2012
5 aspects about HTML5 »
Bild: W3C (http://www.w3.org/)
Conclusio
28
You shall validate on the server
You shall not trust the user’s input
You shall not covet other’s web origins
You shall obey security recommendations
You shall not store sensitive data at the client
Florian Brunner, BSc
09. November 2012
29
Further information
HTML5 Security Cheatsheat
http://html5sec.org/
Mario Heiderich
HTML5 Security
http://html5security.org/
@lavadumark
Attacking clients without Javascript
http://www.youtube.com/watch?v=22Ujc7hTcD0
Mario Heiderich
OWASP HTML5 Security Cheatsheet
https://www.owasp.org/index.php/HTML5_Security_
Cheat_Sheet
Open Web Application Security Project
Florian Brunner, BSc
09. November 2012
