Content Security Policy (CSP): Panduan Lengkap

┌─────────────────────────────────────────────────────────┐
│                  BROWSER (Client)                       │
│                                                         │
│  ┌─────────────┐     ┌──────────────┐                  │
│  │  HTML Page   │────▶│ CSP Header   │                  │
│  │  dimuat      │     │ diterima     │                  │
│  └─────────────┘     └──────┬───────┘                  │
│                             │                           │
│                    ┌────────▼────────┐                  │
│                    │  Policy Parser  │                  │
│                    └────────┬────────┘                  │
│                             │                           │
│         ┌───────────────────┼───────────────────┐      │
│         ▼                   ▼                   ▼      │
│  ┌─────────────┐   ┌──────────────┐   ┌────────────┐  │
│  │ Inline Script│   │ External JS  │   │  Images/   │  │
│  │ ❌ Diblokir  │   │ ✅ Diizinkan │   │  CSS ✅    │  │
│  │ (tanpa nonce)│   │ (dari origin │   │ (sesuai    │  │
│  │              │   │  yang benar) │   │  policy)   │  │
│  └─────────────┘   └──────────────┘   └────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │           CSP Violation Report                   │   │
│  │  → Dikirim ke report-uri/report-to endpoint     │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

# Cara 1: Via HTTP Header (Direkomendasikan)
# Ditambahkan di konfigurasi server (Nginx, Apache, dll)

# Nginx
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';" always;

# Apache
Header set Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';"

# Node.js / Express
app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy',
    "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';");
  next();
});

# ============================================

# Cara 2: Via HTML Meta Tag (Kurang Fleksibel)
# <meta http-equiv="Content-Security-Policy" 
#   content="default-src 'self'; script-src 'self';">

# Catatan: Tidak semua direktif didukung via meta tag,
# misalnya report-uri dan frame-ancestors.

# Policy ketat untuk website statis tanpa JavaScript eksternal
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; object-src 'none'; frame-ancestors 'self'; base-uri 'self'; form-action 'self'

# Single Page Application dengan REST API
Content-Security-Policy: \
  default-src 'self'; \
  script-src 'self' 'nonce-r4nd0m'; \
  style-src 'self' 'unsafe-inline'; \
  img-src 'self' https://cdn.example.com data:; \
  font-src 'self' https://fonts.gstatic.com; \
  connect-src 'self' https://api.example.com wss://ws.example.com; \
  frame-src 'none'; \
  object-src 'none'; \
  base-uri 'self'; \
  form-action 'self'

# Website yang menggunakan CDN untuk static assets
Content-Security-Policy: \
  default-src 'self'; \
  script-src 'self' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com; \
  style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com; \
  img-src 'self' https://*.cloudfront.net https://images.unsplash.com data:; \
  font-src 'self' https://fonts.gstatic.com; \
  connect-src 'self'; \
  media-src 'self' https://*.cloudfront.net; \
  frame-ancestors 'none'

# Langkah 1: Server menghasilkan nonce unik untuk setiap request
# (Di Node.js/Express)
const crypto = require('crypto');

app.use((req, res, next) => {
  // Generate nonce random 128-bit, encode base64
  const nonce = crypto.randomBytes(16).toString('base64');
  
  // Simpan nonce di res.locals agar bisa diakses di template
  res.locals.nonce = nonce;
  
  // Set CSP header dengan nonce
  res.setHeader('Content-Security-Policy', 
    "script-src 'nonce-" + nonce + "' 'strict-dynamic'; " +
    "style-src 'self' 'nonce-" + nonce + "'; " +
    "default-src 'self'; " +
    "object-src 'none'; " +
    "base-uri 'self'"
  );
  next();
});

# ============================================

# Langkah 2: Di template HTML, tambahkan nonce ke tag script
# <script nonce="<%= nonce %>">
#   // Inline script yang diizinkan
#   console.log('Script ini diizinkan oleh CSP');
# </script>

# Script TANPA nonce akan DIBLOKIR oleh browser:
# <script>
#   // Script ini TIDAK akan dieksekusi
#   alert('Ini diblokir!');
# </script>

# ============================================

# Konfigurasi Nginx dengan variable untuk nonce
# generate_nonce.conf
perl_set $csp_nonce 'use Digest::MD5 qw(md5_hex);
  md5_hex(time() . rand())';

server {
  add_header Content-Security-Policy 
    "script-src 'nonce-$csp_nonce' 'strict-dynamic'; default-src 'self'" always;
}

# Menghitung hash SHA-256 dari konten script
# Contoh script:
# <script>alert('Hello World');</script>

# Cara menghitung hash:
# echo -n "alert('Hello World');" | openssl dgst -sha256 -binary | openssl base64
# Output: qUqP5cyxm6YcTAhz05Hph5gvu9M=

# Atau menggunakan Node.js:
const crypto = require('crypto');
const scriptContent = "alert('Hello World');";
const hash = crypto.createHash('sha256')
  .update(scriptContent)
  .digest('base64');
// hash = 'qUqP5cyxm6YcTAhz05Hph5gvu9M='

# CSP Header dengan hash:
Content-Security-Policy: script-src 'sha256-qUqP5cyxm6YcTAhz05Hph5gvu9M='

# ============================================

# Kalkulasi hash untuk beberapa script:
# Script 1: document.getElementById('app').innerHTML = 'Loaded';
# Hash: sha256-xTc7sChFfZVR+d9jBhpCKBR7a8goKjP2NqFW2HKBsEM=

# Script 2: window.dataLayer = window.dataLayer || [];
# Hash: sha256-Gg/IBtfCFBWkZAijOBaMGWm3FkSJKSMr+YOyhLBrJq8=

# Gabungan:
Content-Security-Policy: script-src 'sha256-xTc7sChFfZVR+d9jBhpCKBR7a8goKjP2NqFW2HKBsEM=' 'sha256-Gg/IBtfCFBWkZAijOBaMGWm3FkSJKSMr+YOyhLBrJq8='

# ============================================

# Kelebihan Hash vs Nonce:
# ✅ Hash = deterministik, bisa di-cache
# ✅ Hash = tidak perlu generate per-request
# ✅ Hash = lebih aman (tidak bisa diprediksi attacker)
# ❌ Hash = harus dihitung ulang jika konten script berubah
# ❌ Hash = tidak praktis untuk banyak inline script

┌──────────────────────────────────────────────────┐
│              STRICT-DYNAMIC FLOW                  │
│                                                   │
│  ┌─────────────────────────────────────┐         │
│  │ <script nonce="abc123">             │         │
│  │   // Script dengan nonce VALID ✅    │         │
│  │   const s = document.createElement  │         │
│  │     ('script');                     │         │
│  │   s.src = '/app-bundle.js';         │         │
│  │   document.body.appendChild(s);     │         │
│  │ </script>                           │         │
│  └──────────────┬──────────────────────┘         │
│                 │                                  │
│                 ▼                                  │
│  ┌─────────────────────────────────────┐         │
│  │ /app-bundle.js                      │         │
│  │ ✅ Diizinkan karena dimuat oleh     │         │
│  │    script yang memiliki nonce       │         │
│  │    (parent script terpercaya)       │         │
│  └──────────────┬──────────────────────┘         │
│                 │                                  │
│                 ▼                                  │
│  ┌─────────────────────────────────────┐         │
│  │ /plugin.js (dimuat oleh app-bundle) │         │
│  │ ✅ Juga diizinkan (transitive trust)│         │
│  └─────────────────────────────────────┘         │
│                                                   │
│  ┌─────────────────────────────────────┐         │
│  │ <script src="/evil.js"></script>    │         │
│  │ ❌ DIBLOKIR — tanpa nonce dan       │         │
│  │    bukan dimuat oleh trusted script │         │
│  └─────────────────────────────────────┘         │
└──────────────────────────────────────────────────┘

# ============================================
# Konfigurasi Reporting dengan Reporting API
# ============================================

# 1. Definisikan reporting endpoint (di HTTP header Reporting-Endpoints)
Reporting-Endpoints: csp-endpoint="https://example.com/csp-reports"

# 2. Set CSP header dengan report-to
Content-Security-Policy: \
  default-src 'self'; \
  script-src 'self' 'nonce-abc123'; \
  style-src 'self' 'unsafe-inline'; \
  report-to csp-endpoint

# ============================================
# Report-Only Mode (untuk testing)
# ============================================
Content-Security-Policy-Report-Only: \
  default-src 'self'; \
  script-src 'self' 'nonce-abc123'; \
  report-to csp-endpoint

# ============================================
# Contoh Violation Report (JSON yang dikirim browser)
# ============================================
{
  "type": "csp-violation",
  "age": 10,
  "url": "https://example.com/page",
  "user_agent": "Mozilla/5.0 ...",
  "body": {
    "documentURL": "https://example.com/page",
    "referrer": "",
    "blockedURL": "https://evil.com/malicious.js",
    "violatedDirective": "script-src-elem",
    "effectiveDirective": "script-src",
    "originalPolicy": "script-src 'self' 'nonce-abc123'",
    "disposition": "enforce",
    "statusCode": 200,
    "sample": ""
  }
}

# ============================================
# Server-side: Menerima dan memproses reports
# (Node.js/Express)
# ============================================
const express = require('express');
const app = express();

app.post('/csp-reports', express.json({ type: 'application/csp-report' }), (req, res) => {
  const report = req.body;
  
  console.log('[CSP VIOLATION]', {
    url: report.body?.documentURL,
    blocked: report.body?.blockedURL,
    directive: report.body?.violatedDirective,
    policy: report.body?.originalPolicy,
    timestamp: new Date().toISOString()
  });
  
  // Simpan ke database untuk analisis
  // db.saveViolation(report);
  
  res.status(204).end();
});

# Untuk report-to, server menerima array:
app.post('/csp-reports', express.json({ type: 'application/reports+json' }), (req, res) => {
  const reports = req.body; // Array of reports
  reports.forEach(report => {
    console.log('[CSP]', report.body.blockedURL);
  });
  res.status(204).end();
});

// Jalankan di browser console untuk mendeteksi semua resource
// yang dimuat oleh halaman

const resources = performance.getEntriesByType('resource');
const origins = new Set();

resources.forEach(r => {
  try {
    const url = new URL(r.name);
    origins.add(url.origin);
    console.log(`[${r.initiatorType}] ${r.name}`);
  } catch(e) {
    console.log(`[${r.initiatorType}] ${r.name} (inline)`);
  }
});

console.log('\n=== Unique Origins ===');
origins.forEach(o => console.log(o));

// Output contoh:
// [script] https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js
// [link] https://fonts.googleapis.com/css2?family=Inter
// [img] https://images.unsplash.com/photo-123
// [xmlhttprequest] https://api.example.com/v1/data
// === Unique Origins ===
// https://cdn.jsdelivr.net
// https://fonts.googleapis.com
// https://fonts.gstatic.com
// https://images.unsplash.com
// https://api.example.com

# Strict CSP Template (Recommended)
# Tidak perlu whitelist domain — gunakan nonce + strict-dynamic

Content-Security-Policy: \
  default-src 'self'; \
  script-src 'self' 'nonce-{SERVER_GENERATED_NONCE}' 'strict-dynamic'; \
  style-src 'self' 'unsafe-inline'; \
  img-src 'self' https: data:; \
  font-src 'self' https://fonts.gstatic.com; \
  connect-src 'self' https://api.example.com; \
  object-src 'none'; \
  base-uri 'self'; \
  form-action 'self'; \
  frame-ancestors 'none'; \
  upgrade-insecure-requests

# Keuntungan pendekatan ini:
# ✅ Tidak perlu whitelist banyak domain
# ✅ Lebih aman — attacker tidak bisa bypass dengan domain baru
# ✅ strict-dynamic memudahkan integrasi dengan bundler
# ✅ object-src 'none' mencegah plugin berbahaya
# ✅ base-uri 'self' mencegah base tag injection
# ✅ form-action 'self' mencegah form hijacking

# ============================================
# REACT (Create React App / Next.js)
# ============================================

# Next.js — next.config.js
const crypto = require('crypto');

module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [
        {
          key: 'Content-Security-Policy',
          value: `
            default-src 'self';
            script-src 'self' 'nonce-NONCE_PLACEHOLDER' 'strict-dynamic';
            style-src 'self' 'unsafe-inline';
            img-src 'self' blob: data: https:;
            font-src 'self';
            connect-src 'self' https://api.example.com;
            object-src 'none';
            base-uri 'self';
          `.replace(/\n/g, '')
        }
      ]
    }];
  }
};

# ============================================
# VUE.JS (Nuxt.js)
# ============================================

# nuxt.config.js — menggunakan helmet middleware
export default {
  serverMiddleware: [
    helmet({
      contentSecurityPolicy: {
        directives: {
          defaultSrc: ["'self'"],
          scriptSrc: ["'self'", "'nonce-{dynamic}'"],
          styleSrc: ["'self'", "'unsafe-inline'"],
          imgSrc: ["'self'", 'data:', 'https:'],
          connectSrc: ["'self'", 'https://api.example.com'],
          objectSrc: ["'none'"],
          frameAncestors: ["'none'"]
        }
      }
    })
  ]
}

# ============================================
# ANGULAR (Universal / Server-Side Rendering)
# ============================================

# Express middleware untuk Angular SSR
app.use((req, res, next) => {
  const nonce = crypto.randomBytes(16).toString('base64');
  res.locals.cspNonce = nonce;
  
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", `'nonce-${nonce}'`, "'strict-dynamic'"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        imgSrc: ["'self'", 'data:', 'https:'],
        connectSrc: ["'self'"],
        objectSrc: ["'none'"]
      }
    }
  })(req, res, next);
});