Atila
I'm on a mission to make code simple. When not recording screencasts or courses, you may find me either writing and talking about jamstack, performance, or developer tooling.
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
