Security Headers คืออะไร ตรวจสอบ HTTP Headers ด้วยเครื่องมือฟรี

Security Headers คือ HTTP Response Headers ชุดพิเศษที่เซิร์ฟเวอร์ส่งมาพร้อมกับทุก Response เพื่อบอก Browser ว่าให้จัดการ Content อย่างไรให้ปลอดภัย ถ้าเว็บของคุณขาด Security Headers ที่ถูกต้อง ผู้ไม่ประสงค์ดีอาจโจมตีด้วยวิธีต่างๆ เช่น XSS, Clickjacking หรือ MIME Sniffing ได้ง่ายขึ้น

บทความนี้จะอธิบาย Security Headers สำคัญทีละตัว พร้อมวิธีตรวจสอบและเพิ่มเข้าใน Hosting หรือ VPS ของคุณ

Security Headers สำคัญที่เว็บควรมี

ต่อไปนี้คือ Security Headers หลักที่ Google, securityheaders.com และผู้เชี่ยวชาญด้าน Security แนะนำให้มีทุกเว็บ:

ตรวจสอบ Security Headers ของเว็บคุณได้เลย

ก่อนจะเพิ่ม Security Headers ควรตรวจสอบก่อนว่าเว็บของคุณมี Header อะไรบ้างในตอนนี้ และมีอะไรขาดหายไป เครื่องมือตรวจสอบ Security Headers ฟรีที่ใช้ง่ายจาก ไทยคือ:

ระดับ Grade ของ Security Headers

เครื่องมือตรวจ Security Headers มักให้คะแนนเป็น Grade A+ ถึง F ขึ้นอยู่กับ Header ที่มีและค่าที่ตั้ง:

เว็บไซต์ทั่วไปที่ยังไม่ได้ตั้งค่ามักได้ Grade D หรือ F เป้าหมายที่ดีคือ Grade B+ ขึ้นไป และ Grade A+ สำหรับเว็บที่ต้องการ Security สูงอย่าง E-Commerce หรือเว็บ Login

เพิ่ม Security Headers ใน .htaccess (Apache / DirectAdmin)

สำหรับ Hosting ที่ใช้ Apache (รวมถึง DirectAdmin ของ AsiaGB) คุณเพิ่ม Security Headers ได้โดยแก้ไขไฟล์ .htaccess ที่ root ของเว็บไซต์:

# Security Headers — เพิ่มใน .htaccess
<IfModule mod_headers.c>
    # บังคับ HTTPS 1 ปี
    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains" "expr=%{HTTPS} == 'on'"

    # ป้องกัน Clickjacking
    Header always set X-Frame-Options "SAMEORIGIN"

    # ป้องกัน MIME Sniffing
    Header always set X-Content-Type-Options "nosniff"

    # Referrer Policy
    Header always set Referrer-Policy "strict-origin-when-cross-origin"

    # Permissions Policy (ปิด Camera/Mic/Geo)
    Header always set Permissions-Policy "geolocation=(), microphone=(), camera=()"

    # XSS Protection (Legacy)
    Header always set X-XSS-Protection "1; mode=block"
</IfModule>

เพิ่ม Security Headers ใน Nginx (VPS)

สำหรับ VPS ที่ใช้ Nginx เพิ่ม Security Headers ใน Server Block:

# เพิ่มใน server block ของ Nginx
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "geolocation=(), microphone=(), camera=()" always;
add_header X-XSS-Protection "1; mode=block" always;

การทดสอบ Security Headers บน Staging ก่อน Production

ก่อนนำ Security Headers ขึ้น Production Server จริง ควรทดสอบบน Staging Environment เสมอ โดยเฉพาะ CSP ที่มีความซับซ้อนสูง ขั้นตอนการทดสอบที่แนะนำมีดังนี้:

1. ทดสอบใน Browser DevTools: เปิด Console (F12) แล้วเช็คว่ามี Error ประเภท "Refused to load" หรือ "Blocked by Content Security Policy" ปรากฏหรือไม่ หลังเพิ่ม CSP
2. ใช้ Report-Only Mode: เริ่มด้วย Content-Security-Policy-Report-Only เพื่อดู Violation โดยไม่ Block Script ใดๆ
3. ตรวจทุก Feature ของเว็บ: ลองใช้งานทุกฟีเจอร์ — ฟอร์ม, ปุ่ม, วิดีโอ, แผนที่, Payment Widget — เพราะแต่ละอย่างอาจต้องการ Source ที่ต่างกัน
4. ตรวจสอบบน Mobile: เปิดเว็บบนมือถือเพราะบาง Browser อาจ Interpret CSP ต่างออกไป
5. ยืนยันด้วย dnsxray.com: หลังขึ้น Production แล้ว ตรวจสอบซ้ำที่ dnsxray.com/security-headers เพื่อยืนยันว่า Header ส่งออกมาถูกต้อง

เปรียบเทียบ Security Headers: เว็บใหม่ vs เว็บที่มีอยู่แล้ว

วิธีการเพิ่ม Security Headers อาจแตกต่างกันขึ้นอยู่กับว่าคุณกำลังสร้างเว็บใหม่หรือแก้ไขเว็บที่มีอยู่แล้ว ตารางต่อไปนี้สรุปความแตกต่างและข้อควรระวัง:

Content-Security-Policy (CSP) คืออะไร และตั้งค่าอย่างไร

Content-Security-Policy (CSP) คือ Security Header ที่ทรงพลังที่สุดและตั้งค่ายากที่สุดในเวลาเดียวกัน CSP บอก Browser ว่าอนุญาตให้โหลด Script, Style, รูปภาพ และทรัพยากรอื่นๆ จากแหล่งใดได้บ้าง ซึ่งช่วยป้องกันการโจมตีแบบ XSS (Cross-Site Scripting) ได้อย่างมีประสิทธิภาพ

Directive หลักของ CSP

• default-src — กำหนดค่า Default สำหรับทุก Directive ที่ไม่ได้ระบุเอง
• script-src — กำหนดแหล่งที่อนุญาตให้โหลด JavaScript
• style-src — กำหนดแหล่งที่อนุญาตให้โหลด CSS
• img-src — กำหนดแหล่งที่อนุญาตให้โหลดรูปภาพ
• connect-src — กำหนดแหล่งที่อนุญาตให้ Fetch/XHR/WebSocket ต่อไปได้
• frame-ancestors — กำหนดว่าใครสามารถ embed หน้าเว็บใน iframe ได้ (แทน X-Frame-Options)

ตัวอย่าง CSP สำหรับเว็บทั่วไปที่ใช้ Google Analytics และ Google Fonts

# CSP ตัวอย่าง — ปรับแก้ให้เข้ากับเว็บของคุณ
Header always set Content-Security-Policy \
  "default-src 'self'; \
   script-src 'self' 'unsafe-inline' https://www.googletagmanager.com https://www.google-analytics.com; \
   style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; \
   font-src 'self' https://fonts.gstatic.com; \
   img-src 'self' data: https://www.google-analytics.com; \
   connect-src 'self' https://www.google-analytics.com; \
   frame-ancestors 'self';"

Security Headers กับ Framework และ CMS ยอดนิยม

นอกจาก Apache .htaccess และ Nginx แต่ละ Framework และ CMS ยังมีวิธีตั้ง Security Headers ของตัวเองที่แตกต่างกัน ต่อไปนี้คือตัวอย่างสำหรับ Platform ที่ใช้บ่อย:

Laravel (PHP)

ใน Laravel สามารถเพิ่ม Security Headers ผ่าน Middleware ได้สะดวก โดยสร้าง Middleware ใหม่หรือแก้ใน app/Http/Middleware/:

// app/Http/Middleware/SecurityHeaders.php
public function handle($request, Closure $next)
{
    $response = $next($request);
    $response->header('X-Frame-Options', 'SAMEORIGIN');
    $response->header('X-Content-Type-Options', 'nosniff');
    $response->header('Referrer-Policy', 'strict-origin-when-cross-origin');
    $response->header('Permissions-Policy', 'geolocation=(), microphone=(), camera=()');
    return $response;
}

Next.js / React (Vercel / Static Export)

สำหรับโปรเจกต์ Next.js ตั้ง Security Headers ใน next.config.js:

// next.config.js
const securityHeaders = [
  { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
  { key: 'X-Content-Type-Options', value: 'nosniff' },
  { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
];
module.exports = {
  async headers() {
    return [{ source: '/(.*)', headers: securityHeaders }];
  },
};

เปรียบเทียบผลกระทบด้านความปลอดภัยของแต่ละ Header

Security Headers แต่ละตัวป้องกันการโจมตีที่แตกต่างกัน ตารางต่อไปนี้แสดงระดับความสำคัญและผลที่จะเกิดขึ้นหากขาดแต่ละ Header:

การตั้งค่า HSTS Preload และผลระยะยาวที่ต้องรู้

HSTS Preload คือการลงทะเบียนโดเมนของคุณไว้ใน Preload List ที่ Browser ยักษ์ใหญ่อย่าง Chrome, Firefox, Safari และ Edge ฝังรายชื่อไว้ใน Source Code เลย ซึ่งหมายความว่าแม้จะเข้าเว็บเป็นครั้งแรก Browser จะบังคับ HTTPS ทันทีโดยไม่ต้องรอ Header จากเซิร์ฟเวอร์ก่อน

เงื่อนไขที่ต้องมีก่อนยื่นลงทะเบียน HSTS Preload:

• มี SSL Certificate ที่ถูกต้องสำหรับทุก Subdomain
• ส่ง Header Strict-Transport-Security พร้อม max-age=31536000 (อย่างน้อย 1 ปี)
• ใส่ includeSubDomains ใน Header
• ใส่ preload ใน Header
• ทุก HTTP URL ต้องทำ Redirect ไปยัง HTTPS ก่อน

ปัญหาที่พบบ่อยหลังเพิ่ม Security Headers

หลังเพิ่ม Security Headers แล้ว อาจพบปัญหาบางอย่างที่ทำให้เว็บทำงานผิดปกติ ต่อไปนี้คือปัญหาที่พบบ่อยและวิธีแก้:

1. หน้าเว็บแสดงผลเป็นสีขาว (White Screen) หลังเพิ่ม CSP

สาเหตุส่วนใหญ่คือ CSP บล็อก Script หรือ Style ที่จำเป็น แก้ไขโดยเปิด Browser Developer Tools (F12) แล้วดูแถบ Console จะมี Error ข้อความว่า "Refused to load..." พร้อมระบุ URL ที่ถูกบล็อก นำ Domain ที่ระบุไปเพิ่มใน CSP Directive ที่เหมาะสม

2. รูปภาพหรือ Video จากแหล่งภายนอกไม่แสดง

ตรวจสอบว่า img-src และ media-src ใน CSP รวม Domain ของรูปภาพหรือวิดีโอที่ต้องการไว้แล้ว เช่น หากใช้รูปจาก Unsplash ต้องเพิ่ม https://images.unsplash.com ใน img-src

3. Google Analytics หรือ Facebook Pixel ไม่ทำงาน

ต้องเพิ่ม Domain ของ Tracking Script ใน script-src และ connect-src:

script-src 'self' 'unsafe-inline'
  https://www.googletagmanager.com
  https://connect.facebook.net;
connect-src 'self'
  https://www.google-analytics.com
  https://www.facebook.com;

4. HSTS ทำให้ไม่สามารถเข้า HTTP ได้

นี่คือพฤติกรรมที่ถูกต้องของ HSTS Browser ที่เคยเห็น HSTS Header จะบล็อก HTTP โดยอัตโนมัติ หากต้องการทดสอบ HTTP บน Development ให้ใช้ Browser ในโหมด Incognito หรือลบ HSTS Cache ใน Chrome ผ่าน chrome://net-internals/#hsts

Security Headers กับ WordPress

WordPress สามารถเพิ่ม Security Headers ผ่าน .htaccess (ระวัง: WordPress มักเขียนทับ .htaccess ส่วนบนเมื่อ Update Permalink ดังนั้นให้เพิ่ม Header ไว้ ก่อน บรรทัด # BEGIN WordPress) หรือใช้ Plugin เช่น:

• WP Rocket — มี Security Headers ในแท็บ Advanced Rules
• Wordfence — มี Extended Protection ช่วยตั้งค่า Headers
• Headers Security Advanced & HSTS WP — Plugin เฉพาะ Security Headers โดยตรง

วิธีใช้ dnsxray.com ตรวจ Security Headers ทีละขั้นตอน

1. เปิด dnsxray.com/security-headers
2. พิมพ์ URL เว็บของคุณ (เช่น https://yourdomain.com) แล้วกด Check
3. ระบบจะแสดง Grade รวม + Header แต่ละตัวที่มีและขาด
4. Header ที่ขาดจะมีคำแนะนำวิธีเพิ่มให้ทันที
5. หลังเพิ่ม Header ใน .htaccess หรือ Nginx แล้ว กลับมาตรวจซ้ำเพื่อยืนยัน

คำถามที่พบบ่อย (FAQ)