# CORS & Security Headers คืออะไร? คู่มือป้องกัน Web Security สำหรับ SME ไทย 2026
ในยุคที่ธุรกิจไทยขยับขึ้นสู่โลกออนไลน์เต็มรูปแบบ ทั้ง E-Commerce, B2B Portal, และ Customer Self-Service ภัยคุกคามด้าน Web Security ก็เพิ่มขึ้นเป็นเงาตามตัว รายงานจาก ETDA และ ThaiCERT ในไตรมาสแรกของปี 2026 ระบุว่ากว่า 73% ของเหตุโจมตีที่เกิดกับ SME ไทย เริ่มต้นจากการตั้งค่า HTTP Headers ที่ผิดพลาดหรือขาดหายไป
CORS (Cross-Origin Resource Sharing) และ Security Headers คือชั้นป้องกันที่ Browser บังคับใช้ก่อนที่ Request จะถึงโค้ดของคุณด้วยซ้ำ หากตั้งค่าหลวม ก็เท่ากับเปิดประตูให้ผู้ไม่หวังดีขโมย Token, Session Cookie, หรือฉีด JavaScript เข้าสู่หน้าเว็บลูกค้าได้อย่างเงียบเชียบ
บทความนี้จะอธิบาย CORS แบบเข้าใจง่ายตั้งแต่ระดับพื้นฐาน เจาะลึก Security Headers ที่ SME ทุกแห่งต้องเปิดในปี 2026 พร้อมตัวอย่าง config ที่ใช้งานได้จริงบน Laravel, Next.js และ Nginx และเช็คลิสต์สำหรับนำไปตรวจระบบของคุณทันที
CORS คืออะไร และทำไมมันถึงเข้มงวดขนาดนี้
CORS เป็นกลไกที่ Browser ใช้บังคับ Same-Origin Policy เพื่อป้องกันไม่ให้เว็บหนึ่ง (เช่น attacker.com) ส่ง Request ไปดึงข้อมูลจากอีกเว็บหนึ่ง (เช่น api.yoursme.co.th) โดยที่เจ้าของเว็บไม่ยินยอม
เมื่อ Browser พบว่า Request เป็น Cross-Origin มันจะส่ง Preflight Request (OPTIONS) ไปถาม Server ก่อนว่า "อนุญาตให้ Origin นี้เรียกได้ไหม?" หาก Server ไม่ตอบ Header ที่ถูกต้อง Browser จะ Block Request ทันที
องค์ประกอบสำคัญของ CORS Headers
Security Headers ที่ SME ต้องเปิดในปี 2026
ตารางสรุป Security Headers สำคัญและบทบาทของมันแต่ละตัว
| Header | บทบาท | ค่าที่แนะนำ |
|--------|-------|-------------|
| Strict-Transport-Security | บังคับ HTTPS ทุก Request | max-age=63072000; includeSubDomains; preload |
| Content-Security-Policy | จำกัดแหล่งที่มาของ Script/CSS | default-src 'self'; script-src 'self' 'nonce-...' |
| X-Content-Type-Options | กัน MIME-sniffing | nosniff |
| X-Frame-Options | กัน Clickjacking | DENY หรือ SAMEORIGIN |
| Referrer-Policy | ควบคุมการส่ง Referer | strict-origin-when-cross-origin |
| Permissions-Policy | ปิด Browser API ที่ไม่ใช้ | camera=(), microphone=(), geolocation=() |
| Cross-Origin-Opener-Policy | แยก Browsing Context | same-origin |
| Cross-Origin-Resource-Policy | จำกัดการ Embed | same-origin หรือ cross-origin |
Content Security Policy (CSP) — เกราะป้องกัน XSS ที่ทรงพลังที่สุด
CSP คือ Header ที่บอก Browser ว่าหน้าเว็บนี้อนุญาตให้โหลด Script จากแหล่งใดบ้าง หากมี Script จากที่อื่นพยายามรัน Browser จะปฏิเสธทันที CSP ที่ออกแบบดีสามารถลดความเสี่ยง XSS ได้กว่า 90%
ตัวอย่าง CSP ที่เหมาะกับ SME ไทย:
```
Content-Security-Policy:
default-src 'self';
script-src 'self' 'nonce-{random}' https://www.googletagmanager.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
img-src 'self' data: https:;
font-src 'self' https://fonts.gstatic.com;
connect-src 'self' https://api.yoursme.co.th;
frame-ancestors 'none';
base-uri 'self';
form-action 'self';
upgrade-insecure-requests;
```
วิธีตั้งค่า Security Headers แบบ Step-by-Step
Step 1: ตั้งค่าบน Laravel (PHP)
ติดตั้ง Middleware สำหรับ CORS ใน Laravel 11:
```bash
composer require fruitcake/laravel-cors
```
แก้ไข `config/cors.php`:
```php
return [
'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['GET', 'POST', 'PUT', 'DELETE'],
'allowed_origins' => ['https://app.yoursme.co.th'],
'allowed_headers' => ['Content-Type', 'Authorization', 'X-CSRF-Token'],
'exposed_headers' => [],
'max_age' => 3600,
'supports_credentials' => true,
];
```
สร้าง Middleware สำหรับ Security Headers:
```php
public function handle($request, Closure $next) {
$response = $next($request);
$response->headers->set('Strict-Transport-Security', 'max-age=63072000; includeSubDomains; preload');
$response->headers->set('X-Content-Type-Options', 'nosniff');
$response->headers->set('X-Frame-Options', 'DENY');
$response->headers->set('Referrer-Policy', 'strict-origin-when-cross-origin');
return $response;
}
```
Step 2: ตั้งค่าบน Next.js 15
แก้ไข `next.config.js`:
```javascript
const securityHeaders = [
{ key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
{ key: 'X-Content-Type-Options', value: 'nosniff' },
{ key: 'X-Frame-Options', value: 'DENY' },
{ key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
{ key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
];
module.exports = {
async headers() {
return [{ source: '/:path*', headers: securityHeaders }];
},
};
```
Step 3: ตั้งค่าที่ระดับ Nginx (ครอบคลุมทุกแอป)
```nginx
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options "DENY" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
```
Step 4: ทดสอบ Headers ของระบบคุณ
ใช้เครื่องมือออนไลน์ฟรีตรวจระบบของคุณ:
เป้าหมาย: คะแนน A หรือ A+ ใน securityheaders.com
เปรียบเทียบ Same-Origin vs CORS vs CSRF Token
| ประเด็น | Same-Origin Policy | CORS | CSRF Token |
|---------|--------------------|------|------------|
| ป้องกันอะไร | Cross-origin read | Allow specific cross-origin | State-changing request forgery |
| ทำงานที่ไหน | Browser | Browser + Server | Server |
| ต้องใช้คู่กันไหม | เป็นพื้นฐาน | เพิ่มความยืดหยุ่น | ใช้คู่กับ Cookie Auth |
| ปิดได้ไหม | ไม่ได้ | ปรับได้ | ต้องเปิด |
สรุปและขั้นตอนถัดไป
CORS และ Security Headers คือพื้นฐานที่ทุก Web Application SME ต้องมี การตั้งค่าทั้งหมดใช้เวลาเพียงครึ่งวันแต่ลดความเสี่ยงการถูก Hack ได้เกือบครึ่งหนึ่ง
เช็คลิสต์ที่นำไปทำได้ทันที: เปิด HSTS Preload, ตั้ง CSP แบบ nonce-based, ปิด X-Frame-Options เป็น DENY, จำกัด CORS ให้เฉพาะ Origin ที่จำเป็น, สแกนผ่าน securityheaders.com ทุกเดือน
ที่ ADS FIT เราออกแบบและตั้งค่าระบบ Security Headers พร้อม CSP ที่เหมาะกับ Stack ของ SME ไทยทั้ง Laravel และ Next.js หากคุณต้องการตรวจสอบหรือปรับปรุงระบบ ติดต่อทีมเราเพื่อขอ Audit ฟรีในรอบแรก หรืออ่านบทความ Web Security เพิ่มเติมในหมวด Compliance ของเรา