Security Headers Generator: ตั้งค่า CSP, HSTS และ OWASP Headers แบบง่าย ๆ

ทุกครั้งที่ browser โหลดเว็บของเรา มันจะถามคำถามเบา ๆ ที่ developer ส่วนใหญ่ไม่เคยตอบอย่างตั้งใจ นั่นคือ "response นี้น่าเชื่อถือแค่ไหน?" คำตอบอยู่ใน HTTP response headers ที่เราส่งกลับไป โดยเฉพาะกลุ่ม security headers อย่าง Content-Security-Policy, Strict-Transport-Security, X-Frame-Options และเพื่อน ๆ ซึ่งเป็นตัวกำหนดว่า inline script จะรันได้ไหม หน้าเว็บจะถูกเอาไปฝังใน iframe ของคนอื่นได้ไหม และ browser จะบังคับให้คุยผ่าน HTTPS อย่างเดียวหรือไม่ ตั้งค่าถูก คุณปิดช่องโหว่ทั้งกลุ่มไปเลย ตั้งค่าผิดหรือไม่ตั้งเลย ประตูก็เปิดค้างไว้เงียบ ๆ

ปัญหาจริง ๆ ไม่ใช่เรื่อง security headers เข้าใจยาก แต่เป็นเรื่องการรวบรวม header ทั้ง 9 ตัวให้สอดคล้องกัน แล้วต้องแปลงเป็น syntax ที่ถูกต้องสำหรับ web server ของเราอีกที ซึ่งน่าเบื่อและพลาดง่ายมาก งานนี้คือสิ่งที่ Security Headers Generator ทำให้ฟรี ๆ เลือก preset ปรับค่าที่ต้องการ แล้ว copy config ที่พร้อมวางได้เลยสำหรับ nginx, Apache, Express, Caddy, Cloudflare Pages หรือ raw header list เปล่า ๆ ทุกอย่างรัน 100% ใน browser ของคุณ ไม่ต้องสมัครสมาชิก ไม่มีการยิงไป server ไหน และค่า config ของคุณไม่เคยออกจากเครื่อง

ในบทความนี้เราจะไล่ดูว่าแต่ละ header ทำอะไร preset ของ tool แมปกับสถานการณ์จริงอย่างไร และจะค่อย ๆ ติดตั้งชุด headers แบบเข้มงวดโดยไม่ทำเว็บพังยังไง

ทำไมต้องใช้ Security Headers Generator?

• ครอบคลุมชุด headers ตามที่ OWASP แนะนำครบทั้ง 9 ตัว — ทั้ง Content-Security-Policy, Strict-Transport-Security, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy รวมถึง cross-origin trio อย่าง COOP, CORP และ COEP ในที่เดียว
• หนึ่ง config แต่ export ได้ 6 รูปแบบ — toggle headers ครั้งเดียว แล้วเลือกได้ว่าจะเอาออกมาเป็น nginx add_header block, Apache Header always set, Express middleware snippet, Caddy header directive, ไฟล์ _headers ของ Cloudflare Pages หรือ raw header list สำหรับ platform อื่น
• Preset ที่ตรงกับงานจริง — Strict, Balanced, Development และ API / JSON ให้จุดตั้งต้นที่ดีแทนหน้ากระดาษเปล่า ไม่ว่าจะ hardening production หรือแก้ปัญหาใน local dev
• Copy-paste ได้ทันที — output ถูก format ตามที่ platform ปลายทางคาดหวังจริง ๆ ประหยัดเวลาจากการนั่งไล่ syntax error ใน config ตอน deploy
• ไร้ friction และฟรี — ไม่ต้องมี account รันฝั่ง client ล้วน ๆ decision เรื่อง security posture ของคุณเป็นเรื่องส่วนตัว
• ได้ความรู้แถมมาด้วย — เพราะทุก header โผล่มาพร้อม value ในช่องที่แก้ได้ tool จึงทำหน้าที่เป็น checklist สอนเราว่า response ที่ป้องกันดีหน้าตาเป็นแบบไหน

ฟีเจอร์เด่น

มีรายละเอียดสองอย่างที่ทำให้ใช้งานประจำวันสบาย หนึ่งคือ preset มีความเห็นของมันอยู่แต่ไม่ล็อกเราไว้ — กด apply แล้วข้อมูลลงช่องให้ครบ แต่เรายังปรับ value แต่ละตัวก่อน export ได้ตามใจ สองคือ panel output จะ regenerate สด ๆ ตามการ toggle ทุกครั้ง เราเลยเห็นเสมอว่าสิ่งที่กำลังจะ deploy หน้าตาเป็นแบบไหน ใน syntax ของ platform ที่เลือกไว้

วิธีใช้งาน

1. เปิด Security Headers Generator แล้วเลือก Quick Preset ที่เข้ากับสถานการณ์ — Balanced เป็นค่าเริ่มต้นที่ดีสำหรับเว็บทั่วไป ส่วน API / JSON สำหรับ API ที่กำลัง hardening
2. ทบทวน header ทีละตัว ปิดตัวที่ยังไม่เอา และแก้ value ที่ต้องปรับ เช่น ปรับ HSTS max-age หรือเพิ่ม domain ของ analytics เข้าไปใน CSP
3. สลับตัวเลือก output format เป็น platform ของคุณ: nginx, Apache, Express, Caddy, Cloudflare Pages หรือ raw
4. กดปุ่ม copy แล้วเอา block ไปวางใน config file, server block, middleware หรือไฟล์ _headers
5. Deploy ขึ้น staging ก่อน แล้วสแกนเว็บจริงด้วย grader อย่าง securityheaders.com หรือ Mozilla Observatory เพื่อยืนยันว่าทุกอย่างลงครบ

ทำความเข้าใจ HTTP Security Headers

แต่ละ header คุมพฤติกรรมแคบ ๆ อย่างเดียว แต่พอมารวมกันจะกลายเป็นการป้องกันแบบหลายชั้น:

• Content-Security-Policy (CSP) — เป็น anti-XSS control ที่แรงที่สุดที่ ship ได้ มัน whitelist ว่า script, style, image และ connection จะมาจากไหนได้บ้าง policy แบบ default-src 'self' จะบล็อก inline script และ asset จาก third-party ที่ไม่ได้อนุญาต
• Strict-Transport-Security (HSTS) — บอก browser ให้ใช้ HTTPS เท่านั้น ตลอด max-age ที่เรากำหนด พอผ่านการเยี่ยมครั้งแรกที่เชื่อถือได้แล้ว request แบบ plain-HTTP ไปที่ domain เราจะถูก upgrade หรือปฏิเสธโดยอัตโนมัติ
• X-Frame-Options — ค่า DENY หรือ SAMEORIGIN จะไม่ยอมให้เว็บอื่นเอาหน้าของเราไปฝังใน iframe ซึ่งตัดปัญหา clickjacking แบบคลาสสิกไปเลย
• X-Content-Type-Options — ค่า nosniff กัน browser พยายาม MIME-sniffing response ไปเป็นชนิดที่ execute ได้
• Referrer-Policy — คุมว่า URL จะ leak ไป origin อื่นแค่ไหนตอน user คลิกลิงก์ออกไปข้างนอก โดย strict-origin-when-cross-origin เป็นตัวเลือกยอดนิยม
• Permissions-Policy — วิธีกระชับในการปิด browser features ที่ sensitive เช่น camera, microphone หรือ geolocation ทั้งเว็บในบรรทัดเดียว
• COOP, CORP, COEP — cross-origin trio ที่แยก document ของเรา, คุมว่าใคร embed ทรัพยากรของเราได้ และ gate การโหลด cross-origin resources เมื่อรวมกันจะได้ strong isolation ต่อ Spectre-class side-channel attacks

ตัว preset คือการจับคู่ combination ที่สมเหตุสมผลไว้ให้ Strict เปิดทุกอย่างด้วยค่าหนักสุด เหมาะกับ static site ที่เราคุมทั้งหมด Balanced ยังป้องกันแน่นแต่เผื่อทางให้ third-party integration ที่พบบ่อย Development ผ่อน header ที่ทำให้ hot-reload และ devtool พัง API / JSON เน้น header ที่สำคัญกับ endpoint แบบ machine-to-machine ซึ่ง CSP กับเรื่อง framing แทบไม่เกี่ยว แต่ nosniff กับ HSTS ยังจำเป็นอยู่ดี

เรื่อง platform syntax คือจุดที่คนเขียน config เองมักพลาดที่สุด nginx ต้องการ directive add_header ซ้ำ ๆ ใน server block และโดย default มันไม่ inherit ลงไปยัง error response Apache ใช้บรรทัด Header always set ใน vhost หรือ .htaccess Express ต้องการ middleware app.use เล็ก ๆ ที่ set header ลงบน res ซึ่งก็คือรูปร่างเดียวกับที่ library สไตล์ helmet สร้าง Caddy ใช้ directive header ที่เรียบสวยของมันเอง ส่วน Cloudflare Pages ไม่สนทั้งหมดข้างต้นแต่อ่านไฟล์ _headers แบบ plain text ที่ root ของ project ตัว generator จะ emit รูปร่างที่ถูกต้องให้แต่ละแบบ toggle เดียวกันเลยกลายเป็น output หกแบบที่ต่างกันแต่ equivalent กัน

ตัวอย่างการใช้งานจริง

Hardening เว็บ marketing บน Cloudflare Pages

คุณ ship landing page บน Cloudflare Pages และอยากได้เกรด A ก่อน launch กด preset Balanced เพิ่ม host ของ fonts และ analytics เข้าไปในค่า CSP เลือก output แบบ Cloudflare Pages แล้วเอาไฟล์ _headers ไปวางที่ root ของ project commit deploy rescan — จบในไม่ถึงห้านาที

ล็อกดาวน์ Express API

API แทบไม่ต้องใช้ CSP หรือ frame protection แต่ได้ประโยชน์จาก HSTS กับ nosniff เต็ม ๆ เลือก preset API / JSON สลับไป output แบบ Express แล้ววาง middleware ไว้ก่อนถึง routes จากนี้ทุก JSON response จะมี baseline headers ที่ถูกต้องติดไปด้วย

Staged rollout โดยไม่ทำ production พัง

การเปิด CSP หนัก ๆ บนเว็บที่มีคนใช้อยู่ในคืนเดียวคือสูตรทำให้หน้า checkout พัง เริ่มจาก preset Development หรือชุด custom ที่เหลวๆ ก่อน เฝ้า log หา error จาก resource ที่ถูกบล็อก แล้วค่อยขันค่าให้แน่นขึ้นทีละ deploy ตัว generator ทำให้แต่ละรอบใช้เวลาแค่สองนาที ไม่ต้องเขียน config ใหม่ทั้งก้อน

ปกป้อง web app จากการถูกฝังใน iframe

internal dashboard ของทีมเริ่มโผล่ใน iframe ของ portal ที่ partner ทำแล้วเราไม่เอา เปิด X-Frame-Options เป็น DENY หรือใช้ค่า frame-ancestors ของ CSP / Permissions-Policy ถ้าอยากคุมละเอียดกว่านั้น แล้ว export ตาม server ที่วิ่งอยู่หน้า app

Best Practices

• มอง CSP เป็นทางลาด ไม่ใช่สวิตช์ — เริ่มจากค่าหลวม ดู violation ใน log ขันแน่นขึ้น ทำซ้ำ ถ้าเริ่มด้วย report-only phase ได้ก็ยิ่งดี
• ค่อย ๆ เพิ่ม HSTS max-age — เริ่มจากหลักนาที แล้วชั่วโมง แล้ววัน max-age หลักปีที่ตั้งพลาดบน domain ที่ config เพี้ยนคือหายนะที่แก้ยากมาก
• อย่า copy-paste แบบเบลินด์ — preset เป็นจุดตั้งต้นเท่านั้น อ่าน value ทุกตัวแล้วยืนยันว่าตรงกับวิธีที่เว็บเราโหลด asset จริง ๆ
• ตรวจด้วย external grader — securityheaders.com กับ Mozilla Observatory โชว์ตรง ๆ ว่า browser ได้อะไรมาบ้าง นี่คือ source of truth หลังทุก deploy
• ทำ HTTPS ให้ครบก่อน — HSTS และการป้องกันส่วนใหญ่ตั้งอยู่บน TLS ซ่อมเรื่อง certificate ให้เรียบร้อยก่อนเลย headers ทับไป
• ทดสอบใน staging — headers มีปฏิสัมพันธ์กับ proxy, CDN และ cache แบบที่คาดไม่ถึง promote ผ่าน environment ที่เหมือน production เสมอ

เริ่ม Hardening เว็บของคุณวันนี้

Security headers คืองาน security หายากที่ใช้เวลาแค่ไม่กี่นาทีแทนที่จะเป็นหลายสัปดาห์ — ขอแค่อย่าเขียน platform variants ทั้งหกแบบเอง เปิด Security Headers Generator เลือก preset แล้ว ship config ที่ harden แล้วสำหรับ stack ของคุณก่อน deploy หน้าคุณ ทั้งตัวคุณในอนาคตและรายงาน penetration test ครั้งหน้าจะขอบคุณสำหรับสิ่งนี้

เครื่องมือที่เกี่ยวข้อง

• JWT Decoder — inspect และ debug JSON Web Tokens ใน browser มีประโยชน์มากตอน audit ว่า API ของเรา authenticate request ยังไง
• Base64 Encoder — encode/decode Base64 สำหรับ token, data URL และ basic auth headers โดยไม่ต้องเปิด terminal
• Password Strength Checker — ทดสอบว่า password ต้านทานการเดาและ brute force ได้แค่ไหน ก่อนจะเอาไปเป็นตัวเฝ้าของสิ่งสำคัญ

ขอให้เขียนโค้ดอย่างปลอดภัย!