2022

@AtilaFassina

Day 4 — Security and Testing

@AtilaFassina

TEST

LAYER

@AtilaFassina

↪ Jest Syntax Compatible

↪ Vite Powered

Vitest

↪ Amazing DX

/// <reference types="vitest" />

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vitest/config'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    mockReset: true,
  },
})

vite.config.ts

@AtilaFassina

name: Waiting on tests
on: push
jobs:
  waiting:
    runs-on: ubuntu-latest
    steps:
      - name: Wait for Vercel Preview
        uses: patrickedqvist/wait-for-vercel-preview@v1.2.0
        id: waitForVercelPreviewDeployment
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          max_timeout: 1200

      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16

      - run: npm ci

      - name: Run tests against preview url
        id: integration
        run: PREVIEW_URL=${{ ... }} npm run test:ci

.github/workflows/test.yml

@AtilaFassina

ATTACKING

PATTERNS

@AtilaFassina

man in the middle

MITM

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

client-side

email

password

email

password

@AtilaFassina

cross-site scripting

XSS

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

client-side

🏴‍☠️ Keylogging

🏴‍☠️ Tracking

🏴‍☠️ Clickjacking

🏴‍☠️ ...

@AtilaFassina

PREVENTING

ATTACKS

@AtilaFassina

security in depth

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

↪ Encrypt Server / Client Connection.

↪ Limit Domains that serve assets.

↪ Avoid Code Injection.

↪ Enforce Resource Types.

@AtilaFassina

strict-transport-security

↪

↪.

↪ 

`max-age`

expiration time (in seconds)

Mozilla Dev Network

`includeSubdomains`

`preload`

applies to all subdomains

not part of spec.

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

Check HSTS Preload List

@AtilaFassina

x-frame-options

↪

↪

↪ 

Mozilla Dev Network

X-Frame-Options: SAMEORIGIN

DENY

not allowed ever

SAMEORIGIN

ALLOW-FROM

only for same domain

only for a specificied URI

@AtilaFassina

x-xss-protection

↪

↪

↪ 

Mozilla Dev Network

X-XSS-Protection: 1; mode=block

0

no filter

1

1; mode=block

remove unsafe parts

prevents page for rendering

1; report=<uri>

filters and reports violation

↪ 

@AtilaFassina

x-content-type-options

↪

Mozilla Dev Network

X-Content-Type-Options: nosniff

nosniff

blocks browser from guessing when MIME type is not defined

@AtilaFassina

content-security-policy

Mozilla Dev Network

  'default-src'
  'script-src
  'connect-src'
  'style-src'
  'object-src'
  'img-src'
  'frame-ancestors'
  'child-src'
  'frame-src'
  'base-uri
  'form-action'
  'worker-src'
  'report-uri'

series of directives to secure content and report violations.

↪ Content-Security-Policy-Report-Only

↪ Content-Security-Policy

🔗 CSP Evaluator

@AtilaFassina

content-security-policy

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

↪ Meta tag

next.config.mjs

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

↪ Middleware

↪

Day 4

By Atila

Made with Slides.com

Day 4

  • 487

More from Atila