Content Security

Nov 2021

Man in the Middle

MITM

when the attacker relays and possibly alters the communication between two parties.

Cross-Site Scripting

XSS

when external scripts inject malicious code to the client-side application

Attack scenario

iFrame injection

1. App served through HTTP

HTTP communication is unencrypted

2. Attacker injects an <iframe>

iFrame shows a different page, identical to Login form. Attacker now has user credentials

Code injection

1. App served through HTTP

HTTP communication is unencrypted

2. Attacker intercepts request and replaces analytics with their own script

attacker now has free-reign on the Client-side runtime

Code injection

1. App served through HTTP

HTTP communication is unencrypted

2. Attacker intercepts request and replaces analytics with their own script

attacker now has free-reign on the Client-side runtime

Attack Patterns

Clickjacking

attacker add invisible layers on top of buttons and interactive items. Hijacking user clicks

2. Attacker intercepts request and replaces analytics with their own script

attacker now has free-reign on the Client-side runtime

Mitigation strategies

What do we need?

Serve resources through HTTPS

  • iframes
  • MIME types
  • External resources
  • inline code
  • unsecure methods

Control the content

props during build time

Defence in depth

mitigate vulnerabilities in as many ways possible in the case that one way fails

Security Headers

Strict-Transport-Security

`max-age`

expiration time (in seconds)

`includeSubdomains`

`preload`

applies to all subdomains

not part of spec.
Check HSTS Preload List

Strict-Transport-Security: max-age=63072000; includeSubDomains; preload

X-Frame-Options

DENY

not allowed ever

SAMEORIGIN

ALLOW-FROM

only for same domain

only for a specificied URI

X-Frame-Options: SAMEORIGIN

X-XSS-Protection

0

no filter

1

1; mode=block

remove unsafe parts

prevents page for rendering

X-XSS-Protection: 1; mode=block

1; report=<uri>

filters and reports violation

X-Content-Type-Options

nosniff

blocks browser from guessing when MIME type is not defined

X-Content-Type-Options: nosniff

Content-Security-Policy

series of directives to secure content and report violations

CSP

Test CSP

Content-Security-Policy-Report-Only

Content-Security-Policy

1. Request header

CSP

2. meta tag

CSP meta tag

No `frame-ancestors` directive

No `report-uri` directive

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

Get all pages

async headers() {
    return [
      {
        source: '/:path*',
        headers: securityHeaders,
      }
    ]
  },

inline code

Custom Document

only renders in the server

do not add logic or event handlers

Custom Document

MyDocument.getInitialProps = async (context: DocumentContext) => {
  const initialProps = await Document.getInitialProps(context)
  const nonce = 'generateNonce()'
  
  return {
    ...initialProps,
    nonce,
  }
}

check Knowledge Base for full code snippet

Black Belt [Day 3]

By Atila

Black Belt [Day 3]

  • 373