Content Security Policy (CSP) — ป้องกัน XSS ด้วย HTTP Header

CSP คืออะไร

Content Security Policy เป็น HTTP response header ที่บอก browser ว่าอนุญาตให้โหลด resource จากแหล่งไหนได้บ้าง — ป้องกัน XSS โดยบล็อก inline script และ external resource ที่ไม่ได้ whitelist

Header พื้นฐาน

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'

Directives ที่ใช้บ่อย

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

Nonce — อนุญาต inline script แบบปลอดภัย

<!-- server generate nonce แบบ random ทุก request -->
<script nonce="RANDOM123">
  // inline script ที่อนุญาต
</script>

Content-Security-Policy: script-src 'nonce-RANDOM123'

Railway / Static Site — ตั้งใน _headers

# public/_headers (Netlify/Cloudflare Pages)
/*
  Content-Security-Policy: default-src 'self'; ...
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin

สำหรับ Railway ตั้งผ่าน Express middleware:

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

Report-Only Mode — ทดสอบก่อน enforce

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

Browser จะ report violations ไปที่ /csp-report โดยไม่บล็อก — ใช้ audit ก่อน enforce จริง

สิ่งที่ควรหลีกเลี่ยง

• 'unsafe-inline' สำหรับ script (ยกเว้นจำเป็นจริงๆ)
• 'unsafe-eval' (บล็อก eval, new Function)
• * wildcard สำหรับ script-src