Web Security Headers Cheat Sheet

Content-Security-Policy: default-src 'self';
  script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  font-src 'self' https://fonts.gstatic.com;
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';
  object-src 'none';

Content-Security-Policy: script-src 'self' 'nonce-abc123random456';

<script nonce="abc123random456">
  console.log("Script ini diizinkan CSP");
</script>

import helmet from "helmet";
 
app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "'unsafe-inline'", "https://cdn.jsdelivr.net"],
      styleSrc: ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
      fontSrc: ["'self'", "https://fonts.gstatic.com"],
      imgSrc: ["'self'", "data:", "https:"],
      connectSrc: ["'self'", "https://api.example.com"],
      frameAncestors: ["'none'"],
      baseUri: ["'self'"],
      formAction: ["'self'"],
      objectSrc: ["'none'"],
    },
    reportOnly: false,
  })
);

// middleware.js
export function middleware(request) {
  const nonce = crypto.randomUUID().replace(/-/g, "");
 
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' 'unsafe-inline';
    img-src 'self' blob: data: https:;
    font-src 'self';
    connect-src 'self' https://api.example.com;
    frame-ancestors 'none';
    base-uri 'self';
    form-action 'self';
    object-src 'none';
    upgrade-insecure-requests;
  `;
 
  const response = NextResponse.next({
    request: {
      headers: new Headers(request.headers),
    },
  });
 
  response.headers.set("Content-Security-Policy", cspHeader.replace(/\s{2,}/g, " ").trim());
  response.headers.set("x-nonce", nonce);
 
  return response;
}

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;

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

app.use(
  helmet.hsts({
    maxAge: 31536000, // 1 tahun dalam detik
    includeSubDomains: true,
    preload: true,
  })
);

// next.config.js
const securityHeaders = [
  {
    key: "Strict-Transport-Security",
    value: "max-age=31536000; includeSubDomains; preload",
  },
];
 
module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: securityHeaders,
      },
    ];
  },
};

X-Frame-Options: DENY

// Helmet sudah set frameguard ke SAMEORIGIN secara default
app.use(
  helmet.frameguard({
    action: "deny", // atau "sameorigin"
  })
);

X-Content-Type-Options: nosniff

app.use(helmet.noSniff()); // Sudah aktif secara default di helmet

const securityHeaders = [
  {
    key: "X-Content-Type-Options",
    value: "nosniff",
  },
];

Referrer-Policy: strict-origin-when-cross-origin

app.use(
  helmet.referrerPolicy({
    policy: ["strict-origin-when-cross-origin"],
  })
);

Permissions-Policy: camera=(), microphone=(), geolocation=(self "https://trusted.com"), payment=*

app.use(
  helmet.permissionsPolicy({
    directives: {
      camera: [],
      microphone: [],
      geolocation: ["self"],
      payment: ["self"],
      fullscreen: ["self"],
    },
  })
);

import cors from "cors";
 
// Konfigurasi sederhana
app.use(
  cors({
    origin: "https://example.com", // atau array ["https://a.com", "https://b.com"]
    methods: ["GET", "POST", "PUT", "DELETE"],
    allowedHeaders: ["Content-Type", "Authorization"],
    credentials: true,
    maxAge: 86400,
  })
);
 
// Multiple origins dengan fungsi
app.use(
  cors({
    origin: (origin, callback) => {
      const allowedOrigins = ["https://app.com", "https://admin.app.com"];
      if (!origin || allowedOrigins.includes(origin)) {
        callback(null, true);
      } else {
        callback(new Error("Not allowed by CORS"));
      }
    },
    credentials: true,
  })
);

app.use((req, res, next) => {
  const allowedOrigins = ["https://app.com", "https://admin.app.com"];
  const origin = req.headers.origin;
 
  if (allowedOrigins.includes(origin)) {
    res.setHeader("Access-Control-Allow-Origin", origin);
    res.setHeader("Vary", "Origin");
  }
 
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  res.setHeader("Access-Control-Allow-Credentials", "true");
  res.setHeader("Access-Control-Max-Age", "86400");
 
  if (req.method === "OPTIONS") {
    return res.status(204).end();
  }
 
  next();
});

Cross-Origin-Embedder-Policy: require-corp

Cross-Origin-Opener-Policy: same-origin

Cross-Origin-Resource-Policy: same-origin

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Resource-Policy: same-origin

app.use((req, res, next) => {
  res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
  res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
  res.setHeader("Cross-Origin-Resource-Policy", "same-origin");
  next();
});

const isCrossOriginIsolated = self.crossOriginIsolated;
console.log("Cross-origin isolated:", isCrossOriginIsolated);

import helmet from "helset";
 
app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "'unsafe-inline'"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        imgSrc: ["'self'", "data:", "https:"],
        connectSrc: ["'self'"],
        frameAncestors: ["'none'"],
        objectSrc: ["'none'"],
      },
    },
    crossOriginEmbedderPolicy: false, // Aktifkan jika butuh SharedArrayBuffer
    crossOriginOpenerPolicy: { policy: "same-origin" },
    crossOriginResourcePolicy: { policy: "same-origin" },
    hsts: {
      maxAge: 31536000,
      includeSubDomains: true,
      preload: true,
    },
    frameguard: { action: "deny" },
    noSniff: true,
    referrerPolicy: { policy: "strict-origin-when-cross-origin" },
    permissionsPolicy: {
      directives: {
        camera: [],
        microphone: [],
        geolocation: ["self"],
        payment: ["self"],
      },
    },
  })
);