🛡️ រឿងរ៉ាវអំពីការការពារ Website Next.js ដោយ Security Headers

នៅថ្ងៃមួយ ខ្ញុំជាអ្នកអភិវឌ្ឍន៍ Web បានបង្កើត Website មួយដោយប្រើ Next.js។ Website ដំណើរការល្អ រហ័ស និងស្អាត ប៉ុន្តែមានសំណួរមួយកើតឡើងក្នុងចិត្តខ្ញុំ៖

“តើ Website របស់ខ្ញុំមានសុវត្ថិភាពគ្រប់គ្រាន់ហើយឬនៅ?”

នៅលើអ៊ីនធឺណិត មិនមែនមានតែអ្នកប្រើប្រាស់ល្អៗទេ។ មានអ្នកវាយប្រហារ (Attackers) ដែលព្យាយាមលួចទិន្នន័យ, Inject Script, ឬ Track អ្នកប្រើប្រាស់។ ដូច្នេះ ខ្ញុំបានសម្រេចចិត្តប្រើ HTTP Security Headers ក្នុង Next.js។

🔐 Security Headers គឺជាអ្វី?

Security Headers គឺជា HTTP Headers ដែល Browser អាន ដើម្បីដឹងថា Website នេះត្រូវអនុញ្ញាត ឬហាមឃាត់អ្វីខ្លះ។ វាជា ជញ្ជាំងការពារ (Security Layer) មួយសំខាន់ណាស់ សម្រាប់ Web Application សម័យទំនើប។

⚙️ ការកំណត់ Security Headers ក្នុង Next.js

ក្នុង Next.js យើងអាចកំណត់ headers នៅក្នុង next.config.js ដូចនេះ៖ (អ្នកអាចដាក់ code block នេះនៅ Medium)

✅ 1. X-DNS-Prefetch-Control

X-DNS-Prefetch-Control: on

🔹 អនុញ្ញាតឱ្យ browser prefetch DNS ដើម្បីបង្កើន performance និងកាត់បន្ថយ latency។

✅ 2. X-Content-Type-Options

X-Content-Type-Options: nosniff

🔹 ការពារ browser មិនឱ្យប៉ាន់ស្មាន content-type ខុសៗ ដែលអាចបណ្តាលឱ្យមាន XSS attack។

✅ 3. Strict-Transport-Security (HSTS)

max-age=63072000; includeSubDomains; preload

🔹 បង្ខំឱ្យ website ប្រើ HTTPS ជានិច្ច 🔹 ការពារ Man-in-the-Middle attack

✅ 4. Referrer-Policy

strict-origin-when-cross-origin

🔹 ការពារទិន្នន័យ URL មិនឱ្យផ្ញើពេញលេញទៅ website ខាងក្រៅ។

✅ 5. Permissions-Policy

camera=(), microphone=(), geolocation=()

🔹 បិទ access ទៅ Hardware និង API ដែលមិនចាំបាច់ 🔹 កាត់បន្ថយ privacy risk

✅ 6. Cross-Origin-Opener-Policy

same-origin

🔹 ការពារ Cross-Origin attacks 🔹 សំខាន់សម្រាប់ isolation និង performance

✅ 7. X-Robots-Tag

index, follow

🔹 អនុញ្ញាត Search Engine index website 🔹 ល្អសម្រាប់ SEO 🧱 Content Security Policy (CSP) – ជញ្ជាំងសុវត្ថិភាពធំបំផុត

CSP ជា header សំខាន់បំផុតក្នុងការការពារ XSS (Cross-Site Scripting)។

🔐 អ្វីដែល CSP របស់យើងធ្វើបាន

អនុញ្ញាត script តែពី self, Umami, Facebook

អនុញ្ញាត iframe តែពី YouTube, Facebook, Google Maps

បិទ object-src

បិទ form submit ទៅ domain ខាងក្រៅ

បង្ខំ upgrade HTTP → HTTPS

👉 នេះធ្វើឱ្យ Website មានសុវត្ថិភាពខ្ពស់ ប៉ុន្តែ នៅតែ compatible ជាមួយ YouTube និង Facebook Embed

🎯 មេរៀនដែលខ្ញុំបានរៀន

❝ Website ល្អ មិនមែនត្រឹមតែស្អាត និងរហ័សទេ ប៉ុន្តែត្រូវមាន “សុវត្ថិភាព” សម្រាប់អ្នកប្រើប្រាស់ ❞

Next.js មិនត្រឹមតែជា Framework សម្រាប់ UI ប៉ុណ្ណោះទេ វាជាឧបករណ៍ដ៏ខ្លាំង សម្រាប់កសាង Secure Production Website ប្រសិនបើយើងប្រើវាឱ្យត្រឹមត្រូវ។

✍️ សេចក្តីសន្និដ្ឋាន

បើអ្នកកំពុងប្រើ Next.js សម្រាប់:

Company Website

Portfolio

SaaS

Blog (Medium-style)

👉 កុំមើលរំលង Security Headers វាជាជំហានតូច ប៉ុន្តែមានអត្ថប្រយោជន៍ធំ 🚀

បង្ហាញ source code

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // បើក React Strict Mode ដើម្បី catch bug ពេល dev
  reactStrictMode: true,

  // បិទ dev indicator (build status icon)
  devIndicators: false,

  // លុប "X-Powered-By: Next.js" ដើម្បីកាត់បន្ថយ fingerprinting
  poweredByHeader: false,

  // កំណត់ image domain ដែលអាច load បាន (YouTube thumbnail)
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'i.ytimg.com',
      },
    ],
  },

  // HTTP Security Headers
  async headers() {
    return [
      {
        // អនុវត្ត headers ទៅគ្រប់ route
        source: '/(.*)',
        headers: [
          // អនុញ្ញាត DNS Prefetch (performance)
          { key: 'X-DNS-Prefetch-Control', value: 'on' },

          // ការពារ MIME sniffing (XSS protection)
          { key: 'X-Content-Type-Options', value: 'nosniff' },

          // បង្ខំ HTTPS ជានិច្ច (HSTS)
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=63072000; includeSubDomains; preload',
          },

          // កាត់បន្ថយ referrer data ពេល link ទៅ site ខាងក្រៅ
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin',
          },

          // បិទ access ទៅ hardware / browser features
          {
            key: 'Permissions-Policy',
            value:
              'camera=(), microphone=(), geolocation=(), payment=(), usb=(), bluetooth=()',
          },

          // ការពារ cross-origin window attack
          { key: 'Cross-Origin-Opener-Policy', value: 'same-origin' },

          // អនុញ្ញាត search engine index (SEO)
          { key: 'X-Robots-Tag', value: 'index, follow' },

          // 🛡️ Content Security Policy (CSP)
          {
            key: 'Content-Security-Policy',
            value: `
              default-src 'self';

              script-src
                'self'
                'unsafe-inline'
                https://cloud.umami.is
                https://connect.facebook.net;

              style-src
                'self'
                'unsafe-inline';

              img-src
                'self'
                data:
                https:
                https://*.fbcdn.net
                https://i.ytimg.com;

              font-src 'self';

              connect-src
                'self'
                https://api-gateway.umami.dev
                https://cloud.umami.is
                https://graph.facebook.com;

              frame-src
                https://www.facebook.com
                https://www.youtube.com
                https://www.youtube-nocookie.com
                https://www.google.com
                https://maps.google.com;

              object-src 'none';
              frame-ancestors 'self';
              base-uri 'self';
              form-action 'self';
              upgrade-insecure-requests;
            `.replace(/\s{2,}/g, ' ').trim(),
          },
        ],
      },
    ];
  },
};

export default nextConfig;