Web Security

Stepan Suvorov

CTO @ Studytube

@stevermeister

Information Security Masters Degree

Agenda

What is security?
Tokens
- JWT
- Transfer
- Storage
SQL Injection
XSS
CSRF
Project dependencies
Content Security Policy
HTTPS

What is Security?

Prevent vulnerabilities
- XSS
- XSRF
- ...
Access Management
- authentication/authorisation
- ACL

Authentification

Authorization

Almost every web application needs to make authorization decisions
- Authorization is about checking if an entity has the proper privileges for an action
- Authorization requires the notion of the identity of the entity performing the action
Authentication is about verifying that an entity is who it claims to be
- In web applications, authentication is often done with a username and password
- Authentication happens once, and the authenticated state is kept in a session
Session management is the glue between authentication and authorization
- It propagates the authenticated state throughout the session
- Even stateless APIs depend on session data, to keep track of this authenticated state

Traditional Server-Side session-management

Modern Client-Side session-management

What's the best way?

3 Properties of Session-Management

The locality

The storage mechanism

The transport mechanism

Where will you keep your session data? How will you represent your session data?

E.g., server-side vs client-side sessions, session identifiers vs self-contained JWT tokens

cookies vs localStorage vs SessionStorage

cookies vs authorization header

Server-Side vs Client-Side

stateless backend
no control
lager requests
encoded session object on client side

Server-Side

Results in stateful backend
Gives server full control (invalidate)
Id to server side Object

Client-Side

Authorization based on JWT

JSON Web Token

https://jwt.io/#debugger

The storage mechanism

What are the difference between cookies and localStorage?

Can you spot security issue here?

export class TokenInterceptor implements HttpInterceptor {
    constructor(public auth: AuthService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      
        request = request.clone({
          setHeaders: {
            Authorization: `Bearer ${this.auth.getToken()}`
          }
        });
     
        return next.handle(request);
    }
}

it's real life example and more

SQL Injections

What is SQL Injection?

`SELECT * FROM artists WHERE id=${id}`

How to prevent SQL Injection?

Use mature DB-frameworks
Use sanitization
Always know the input

XSS

https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)

Reflected
Stored
DOM-based

Reflected XSS

Stored XSS

Sanitization in practice

Don't even think about rolling your own sanitizer!

DOM-based XSS

Angular against XSS

https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)

Sanitization out of box:

HTML
Styles
Url
Resource Url

bypassSecurityTrust*

example

Angular controls the data in the template
Data is always escaped for the right context
HTML-bound data is sanitized by Angular

How can you bypass XSS filters?

$save_text = str_replace('script', 'span', $text);

<ScRiPt>/* bad things happen here */</ScRiPt>

<INPUT TYPE="IMAGE" src="javascript:/* ... */;">

<imgsrc="xss.png" onerror="/* bad things happen here */">

Are we safe now?

and what about

Template Injection?!

never mix Angular with other dynamic page generation techniques
use AoT

CSRF

https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)

The essence of CSRF

CSRF exists because browser handles cookies very liberally
Many applications are unaware that any browsing context can send requests
None of the cookie security measures covered so far helps here

The password cannot be updated by using this method.

However, the information that’s needed to reset the password can.

HTTP-Only does not help!

What to do against CSRF

or SameSite cookie

Dependencies

88.45% of the Alexa top 10,000 web sites “included at least one remote JavaScript library

Why these remote JavaScript inclusions is a problem?

Are you loading something from CDN?

Subresource Integrity

Integrity attribute can be added to script or stylesheet
When loading the resource browser first verifies the hash
The properties of the hash function ensure the security of this mechanism

can I use it now?

Do you know all your project dependencies?

True story

dominictarr/event-stream/issues/116

npm audit

npm install angularcli

Content Security Policy

What does CSP do?

allows you to restrict content on a page
- Whitelists define where content can be loaded from, everything else is blocked
- You can instruct the browser to send a report about a violation
- In report-only mode, the browser will send a report but will not block content