Open Wire: วิธีที่นักเขียนโปรแกรม AI ทำลายความปลอดภัยเครือข่ายของโปรเจกต์โดยไม่รู้ตัว

สแต็ค: React, Next.js App Router, Vite ปัญหา: ความล้มเหลวด้านความปลอดภัยในระดับเครือข่ายที่เกิดจากโค้ดส่วนหน้า (frontend) ที่สร้างโดย AI — mixed content, security headers ที่ขาดหายไป, CORS wildcards และการร้องขอเครือข่ายที่ไม่ได้รับการตรวจสอบ

สัญลักษณ์รูปแม่กุญแจ HTTPS ของคุณอาจไม่ใช่ความจริงทั้งหมด ใช่ ใบรับรองเซิร์ฟเวอร์ของคุณอาจจะถูกต้อง แต่ความปลอดภัยของเครือข่ายไม่ได้เกี่ยวกับไอคอนแม่กุญแจเพียงอย่างเดียว แต่มันเกี่ยวกับทุกการร้องขอเครือข่าย (network request) ที่แอปพลิเคชันของคุณทำหลังจากโหลดหน้าเว็บ และนี่คือจุดที่โค้ดที่สร้างโดย AI สร้างช่องโหว่ที่มองไม่เห็นในขอบเขตความปลอดภัยของคุณ

เมื่อคุณสั่งให้ผู้ช่วย AI “เพิ่มแบบฟอร์มการชำระเงิน” หรือ “เชื่อมต่อบทวิเคราะห์” มันจะสร้างโค้ดที่ทำงานได้ในไม่กี่วินาที แต่สิ่งที่มันไม่ได้สร้างคือโครงสร้างพื้นฐานความปลอดภัยระดับเครือข่ายที่แยกแอปพลิเคชันต้นแบบ (prototype) ออกจากแอปพลิเคชันที่ใช้งานจริง (production) ไม่มีการตั้งค่า Content Security Policy (CSP) ไม่มีการบังคับใช้ HSTS ไม่มีข้อจำกัด CORS มีเพียงทราฟฟิก HTTP ที่ไม่ปลอดภัยซึ่งซ่อนอยู่หลังรูปแม่กุญแจสีเขียว

บทความนี้จะวิเคราะห์ความล้มเหลวดด้านความปลอดภัยระดับเครือข่าย 5 ประการที่นักเขียนโปรแกรม AI มักทำโดยไม่รู้ตัว และวิธีตรวจพบก่อนที่ผู้ใช้ของคุณจะได้รับความเสียหาย หากคุณเคยผ่านประสบการณ์อันเจ็บปวดจาก API keys รั่วไหลในบันเดิลไคลเอนต์ มาแล้ว ขอให้ถือว่านี่คือบทต่อไป: ความลับของคุณอาจจะปลอดภัย แต่เลเยอร์การขนส่ง (transport layer) ของคุณยังคงเปิดกว้างอยู่

Mixed Content: นักฆ่าฟีเจอร์ที่เงียบเชียบ

🔴 Critical · เบราว์เซอร์บล็อกการทำงานของหน้าเว็บ · OWASP A05:2021 Security Misconfiguration

Mixed content เกิดขึ้นเมื่อหน้า HTTPS ของคุณโหลดทรัพยากรผ่าน HTTP ปกติ เบราว์เซอร์สมัยใหม่จะไม่ยอมรับสิ่งนี้ — พวกเขาจะบล็อก active mixed content (สคริปต์, สไตล์ชีต, iframe) ทั้งหมด และพยายามอัปเกรด passive content (รูปภาพ, สื่อ) โดยอัตโนมัติหากเป็นไปได้

ผู้ช่วย AI มักจะสร้างแพทเทิร์นนี้เนื่องจากข้อมูลที่ใช้ฝึกฝนเต็มไปด้วยคำตอบจาก Stack Overflow และบทช่วยสอนที่เก่ากว่าซึ่งใช้ URL แบบ http:// โมเดลไม่เข้าใจว่าเป้าหมายการปรับใช้ของคุณคือ HTTPS — มันแค่คัดลอกสิ่งที่เคยเห็นมาหลายล้านครั้ง

Bad AI Code:

// AI-generated: loads font from HTTP CDN
const loadFonts = () => {
  const link = document.createElement("link");
  link.href = "http://fonts.googleapis.com/css2?family=Inter";
  link.rel = "stylesheet";
  document.head.appendChild(link);
};

// AI-generated: fetches data from hardcoded HTTP endpoint
const fetchProducts = async () => {
  const res = await fetch("http://api.example.com/v1/products");
  return res.json();
};

Fixed Code:

// Always use HTTPS or protocol-relative URLs
const loadFonts = () => {
  const link = document.createElement("link");
  link.href = "https://fonts.googleapis.com/css2?family=Inter";
  link.rel = "stylesheet";
  document.head.appendChild(link);
};

// Use environment variables for API base URLs
const fetchProducts = async () => {
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/v1/products`);
  return res.json();
};

การแก้ไขแบบ defense-in-depth คือการเพิ่มคำสั่ง upgrade-insecure-requests ใน CSP ซึ่งสั่งให้เบราว์เซอร์เขียน URL HTTP ทั้งหมดเป็น HTTPS ใหม่โดยอัตโนมัติก่อนส่งคำขอ แต่นี่เป็นเพียงตาข่ายนิรภัย ไม่ใช่ใบอนุญาตให้เขียนโค้ดที่ไม่ปลอดภัย — สาเหตุหลักต้องได้รับการแก้ไขในซอร์สโค้ด

WebValid ตรวจพบสิ่งนี้ได้อย่างไร: Network Scanner จะตรวจสอบทุกการส่งคำขอระหว่างการโหลดหน้าเว็บ และทำเครื่องหมายคำขอ http:// ใดๆ ที่มาจากหน้า HTTPS โดยจะแสดง URL ที่แน่นอนและองค์ประกอบที่เรียกใช้คำขอนั้น

ขาด Security Headers: ประตูที่เปิดทิ้งไว้

🔴 Critical · การโจมตี XSS และ clickjacking ไม่ได้รับการบรรเทา · OWASP A05:2021 Security Misconfiguration

หากคุณขอให้ผู้ช่วย AI สร้างแอปพลิเคชัน Next.js ให้คุณตั้งแต่ต้น คุณจะได้หน้าเว็บ, เลย์เอาต์, API routes และบางทีอาจมีการตรวจสอบสิทธิ์ แต่สิ่งที่คุณจะไม่มีทางได้รับ — เว้นแต่คุณจะขอโดยชัดแจ้ง — คือไฟล์ middleware.ts ที่ตั้งค่า security response headers

นี่ไม่ใช่เรื่องเล็กน้อย หากไม่มี Content Security Policy (CSP) แอปพลิเคชันของคุณจะไม่มีเกราะป้องกันการโจมตี Cross-Site Scripting (XSS) เลย หากไม่มี HSTS ผู้ใช้ที่เชื่อมต่อเป็นครั้งแรกอาจถูกดาวน์เกรดเป็น HTTP ได้ หากไม่มี X-Frame-Options (หรือ CSP frame-ancestors) หน้าล็อกอินของคุณอาจถูกฝังใน iframe ของผู้โจมตีเพื่อทำ clickjacking

OWASP HTTP Security Response Headers Cheat Sheet ระบุ headers ที่แนะนำมากกว่าสิบรายการ แอปพลิเคชันที่สร้างโดย AI มักจะไม่มี headers เหล่านี้เลย

Bad AI Code — Next.js with no security middleware:

// next.config.ts — AI generates this with zero security headers
const nextConfig = {
  reactStrictMode: true,
  images: { domains: ["cdn.example.com"] },
};
export default nextConfig;

Fixed Code — Next.js middleware with security headers:

// middleware.ts — the file AI never creates
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const nonce = crypto.randomUUID();
  const csp = [
    `default-src 'self'`,
    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`,
    `style-src 'self' 'nonce-${nonce}'`,
    `img-src 'self' data: https:`,
    `font-src 'self' https://fonts.gstatic.com`,
    `connect-src 'self' https://api.example.com`,
    `frame-ancestors 'none'`,
    `upgrade-insecure-requests`,
  ].join("; ");

  const response = NextResponse.next();
  response.headers.set("Content-Security-Policy", csp);
  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");
  response.headers.set(
    "Permissions-Policy",
    "camera=(), microphone=(), geolocation=()",
  );

  return response;
}

สำหรับแอปพลิเคชันที่ใช้ Vite จะต้องกำหนดค่าความปลอดภัยที่ระดับเซิร์ฟเวอร์ (Nginx, Cloudflare หรือเซิร์ฟเวอร์ Node.js ของคุณ) เนื่องจาก Vite เป็นเครื่องมือสร้าง ไม่ใช่เซิร์ฟเวอร์รันไทม์

ตรวจสอบ headers ของคุณได้ฟรี — ทำการตรวจสอบความปลอดภัยด้วย WebValid

WebValid ตรวจพบสิ่งนี้ได้อย่างไร: Security Scanner จะตรวจสอบการตอบสนอง HTTP ทุกรายการเพื่อหาความถูกต้องของ security headers และทำเครื่องหมายหากไม่มี CSP, HSTS, X-Frame-Options และ X-Content-Type-Options

Wildcard CORS: “การแก้ไขแบบด่วน” ที่เปิดกว้างทุกอย่าง

🟠 High · การขโมยข้อมูลจาก API ที่ตรวจสอบสิทธิ์แล้ว · OWASP A01:2021 Broken Access Control

นักพัฒนาทุกคนที่เคยต่อสู้กับข้อผิดพลาด CORS ย่อมทราบถึงความยั่วยวน: เพียงเพิ่ม Access-Control-Allow-Origin: * และทำให้ข้อความคอนโซลสีแดงหายไป ผู้ช่วย AI ได้เรียนรู้ทางลัดนี้จากคำตอบใน Stack Overflow นับพันรายการ เมื่อคุณสั่งให้ “แก้ไขข้อผิดพลาด CORS” โมเดลจะเลือกใช้วิธีที่แรงที่สุด

ปัญหาไม่ได้อยู่ที่การใช้ wildcard บน API สาธารณะสำหรับอ่านอย่างเดียว ปัญหาคือเมื่อ AI ใช้รูปแบบเดียวกันนี้กับอินพุต (endpoints) ที่มีการตรวจสอบสิทธิ์ — API ที่อ้างอิง cookie, token หรือ session headers เพื่อระบุตัวตนผู้ใช้

Bad AI Code — Express with wildcard CORS:

// AI-generated: "just add cors" to fix the error
const cors = require("cors");
app.use(cors()); // Access-Control-Allow-Origin: *

Even worse — reflected origin with credentials:

// AI-generated: bypasses wildcard + credentials restriction
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", req.headers.origin || "*");
  res.setHeader("Access-Control-Allow-Credentials", "true");
  next();
});

รูปแบบที่สองนี้อันตรายเป็นพิเศษ: มันบอกเบราว์เซอร์ว่า “เว็บไซต์ใดๆ ก็ตามสามารถส่งคำขอที่ตรวจสอบสิทธิ์ไปยัง API นี้และอ่านการตอบสนองได้” ผู้โจมตีสามารถสร้างหน้าเว็บใน evil.com ให้เหยื่อเข้าไปที่หน้านั้นในขณะที่ยังล็อกอินแอปพลิเคชันของคุณอยู่ และผู้โจมตีจะสามารถใช้ JavaScript อ่านข้อมูลส่วนตัว ข้อมูลการชำระเงิน หรือบันทึกภายในของเหยื่อได้อย่างเงียบๆ

Fixed Code — explicit allowlist:

const allowedOrigins = [
  "https://app.yourdomain.com",
  "https://staging.yourdomain.com",
];

app.use(
  cors({
    origin: (origin, callback) => {
      if (!origin || allowedOrigins.includes(origin)) {
        callback(null, true);
      } else {
        callback(new Error("Not allowed by CORS"));
      }
    },
    credentials: true,
  }),
);

WebValid ตรวจพบการร้องขอเครือข่ายข้ามโดเมน (cross-origin) ที่ไม่คาดคิดระหว่างหน้าโหลดผ่าน Network Scanner อย่างไรก็ตาม การกำหนดค่า CORS เป็นเรื่องฝั่งเซิร์ฟเวอร์ — WebValid จะรายงานอาการ (คำขอที่ถูกบล็อกหรือน่าสงสัย) ไม่ใช่การกำหนดค่าฝั่งเซิร์ฟเวอร์โดยตรง

สคริปต์ภายนอกที่ไม่ได้รับการตรวจสอบ: ห่วงโซ่อุปทานในเบราว์เซอร์ของคุณ

🟠 High · การเข้าถึง DOM และการดึงข้อมูลออกโดยโค้ดภายนอก · OWASP A08:2021 Software and Data Integrity Failures

เมื่อคุณสั่งให้ AI “เพิ่ม Google Analytics” หรือ “รวมวิดเจ็ตแชท” มันจะสร้างแท็ก <script> ที่ชี้ไปยัง CDN ภายนอก ซึ่งทำงานได้ง่ายแต่แฝงไว้ด้วยอันตราย

หากไม่มี Content Security Policy ที่จำกัด script-src สคริปต์ภายนอกนั้นจะมีสิทธิ์เทียบเท่ากับโค้ดของคุณเอง มันสามารถอ่านข้อมูลที่ป้อนลงในฟอร์ม เข้าถึง cookies แก้ไข DOM และส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ ก็ได้ หาก CDN ของผู้ให้บริการถูกแฮ็ก — เช่นการโจมตีแบบ Magecart — สคริปต์ที่เป็นอันตรายจะทำงานบนเบราว์เซอร์ของผู้ใช้ของคุณโดยไม่มีการขัดขวางเลย

Bad AI Code:

<!-- AI-generated: inject analytics with zero restrictions -->
<script src="https://cdn.analytics-vendor.com/tracker.js"></script>
<script src="https://widget.chat-service.io/embed.js"></script>

Fixed Code — CSP + Subresource Integrity (SRI):

<!-- Restrict script sources via CSP and verify integrity -->
<script
  src="https://cdn.analytics-vendor.com/tracker.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxGpTe3+lOBTrVQ8p1J7V9PoVb5rKN"
  crossorigin="anonymous"
></script>

การทำงานร่วมกับคำสั่ง script-src ใน CSP ที่ระบุโดเมนที่ได้รับอนุญาตอย่างชัดเจน จะช่วยให้มั่นใจได้ว่ามีเพียงสคริปต์ที่ผ่านการตรวจสอบเท่านั้นที่จะทำงาน และมาจากต้นทางที่ได้รับอนุมัติเท่านั้น

ปัญหาที่ลึกกว่านั้นคือเรื่องกระบวนการ: ทีมการตลาดมักจะเพิ่ม tracking pixels ผ่าน tag managers ซึ่งข้ามขั้นตอน CI/CD ของคุณไปเลย ตามที่ระบุไว้ใน การตรวจสอบเว็บไซต์ที่สร้างโดย AI ของ Garry Tan โปรเจกต์ที่สร้างโดย AI มักจะมีการร้องขอเครือข่ายที่ไม่ได้รับการตรวจสอบจำนวนมาก — 169 รายการในกรณีนั้น — โดยไม่มีการกำกับดูแลว่าการร้องขอแต่ละรายการทำงานอะไร

ความล้มเหลวของเครือข่ายที่ซ่อนอยู่: ภาษีประสิทธิภาพที่มองไม่เห็น

🟡 Medium · ทรัพยากรเสีย, สิ้นเปลืองแบนด์วิดท์, ประสบการณ์ผู้ใช้ที่แย่ลง · Performance degradation

หมวดหมู่นี้เป็นสิ่งที่ร้ายกาจที่สุดเพราะไม่มีอะไรที่ดูเหมือนจะพัง หน้าเว็บของคุณโหลดได้ ผู้ใช้โต้ตอบกับมันได้ และทุกอย่างดูดี แต่เมื่อเปิดแท็บ DevTools Network คุณอาจพบว่า:

• 404 errors บนรูปภาพ, ฟอนต์ หรือ API endpoints ที่ AI เชื่อมโยงด้วยเส้นทางที่ผิด
• Duplicate requests เมื่อ AI เรียกใช้ API เดียวกันในส่วนประกอบหลายๆ ตัวโดยไม่มีการจัดการ
• Uncompressed assets ทรัพยากรที่ส่งโดยไม่มีการบีบอัด gzip หรือ Brotli เนื่องจาก AI ไม่ได้กำหนดค่าการสร้างให้มีการบีบอัด
• Waterfall chains ทรัพยากรที่โหลดตามลำดับแทนที่จะโหลดพร้อมกัน

ความล้มเหลวเหล่านี้สะสมขึ้นอย่างเงียบๆ รูปภาพที่พังแต่ละรูปคือการเชื่อมต่อที่เสียเปล่า การเรียกข้อมูลซ้ำแต่ละครั้งทำให้เซิร์ฟเวอร์ทำงานหนักขึ้นเป็นสองเท่า บันเดิล JavaScript ขนาด 500KB ที่ไม่ถูกบีบอัดทำให้ผู้ใช้มือถือต้องรอนานขึ้น 2-3 วินาทีบนเครือข่าย 3G

WebValid ตรวจพบสิ่งนี้ได้อย่างไร: Network Scanner จะบันทึกทุกการร้องขอเครือข่ายระหว่างการโหลดหน้าเว็บ และทำเครื่องหมายสถานะ 4xx/5xx ระบุทรัพยากรที่หนักผิดปกติ และเน้นย้ำคำขอที่ใช้เวลาตอบสนองเกินงบประมาณ นี่คือปัญหาประเภทที่จะปรากฏให้เห็นในการตรวจสอบเครือข่ายขณะใช้งานจริงเท่านั้น — ไม่ใช่ใน IDE ของคุณ ไม่ใช่ใน linter และไม่ใช่ในหน้าต่างแชทของผู้ช่วย AI

ตรวจสอบข้อเท็จจริง: หลักฐานจากโลกแห่งความเป็นจริง

ข้ออ้างในบทความนี้อ้างอิงจากมาตรฐานทางเทคนิคและเหตุการณ์ที่ได้รับการบันทึกไว้:

• หลักฐาน: OWASP Top 10 (2021) จัดว่าการขาด security headers อยู่ภายใต้ A05:2021 Security Misconfiguration — หนึ่งในช่องโหว่ประเภทที่แพร่หลายที่สุดในเว็บแอปพลิเคชัน
• หลักฐาน: เอกสาร MDN ระบุว่าเบราว์เซอร์สมัยใหม่ บล็อก active mixed content โดยค่าเริ่มต้น และอัปเกรด passive content โดยอัตโนมัติ ซึ่งยืนยันว่าทรัพยากร HTTP บนหน้า HTTPS จะพังเงียบๆ หรือถูกเขียนใหม่
• หลักฐาน: การตรวจสอบเว็บไซต์ที่สร้างด้วย AI ของ Garry Tan บันทึกการร้องขอเครือข่าย 169 รายการในการโหลดหน้าเว็บครั้งเดียว รวมถึงทรัพยากรที่พังและสคริปต์ภายนอกที่ไม่ได้รับการตรวจสอบ — ซึ่งเป็นตัวอย่างที่ชัดเจนของพฤติกรรมเครือข่ายที่ไม่ได้รับการตรวจสอบ
• หลักฐาน: Chrome 124+ (2024) จะอัปเกรดทรัพยากร mixed content ทั้งหมดเป็น HTTPS ก่อนบล็อก ซึ่งหมายความว่า mixed content จะไม่แสดงคำเตือนของเบราว์เซอร์อีกต่อไป — มันจะพังเงียบๆ หรือถูกเขียนใหม่ ทำให้การตรวจหาด้วยมือทำได้ยากขึ้น
• ความเห็น (จากประสบการณ์ในอุตสาหกรรม): จากประสบการณ์ของเรา แอปพลิเคชันที่สร้างโดย AI มักจะไม่มี security headers มาให้โดยเริ่มต้น เนื่องจากการกำหนดค่า headers เป็นงานระดับโครงสร้างพื้นฐานที่อยู่นอกขอบเขตการทำงานของโมเดล

รายการตรวจสอบความปลอดภัยของเครือข่ายของคุณ

ก่อนที่คุณจะปรับใช้ส่วนหน้า (frontend) ที่สร้างโดย AI ให้ตรวจสอบสิ่งเหล่านี้:

1. Mixed Content — ค้นหา URL http:// ในโค้ดของคุณ เปลี่ยนเป็น https:// หรือตัวแปรสภาพแวดล้อม และเพิ่ม upgrade-insecure-requests ใน CSP ของคุณเป็นตาข่ายนิรภัย
2. Security Headers — สร้าง middleware.ts (Next.js) หรือกำหนดค่าเซิร์ฟเวอร์ของคุณ (Vite/Nginx) เพื่อตั้งค่า CSP, HSTS, X-Content-Type-Options, X-Frame-Options และ Referrer-Policy
3. CORS Policy — แทนที่ cors() wildcard ด้วยรายการที่ได้รับอนุญาตอย่างถูกต้อง (allowlist) อย่ารับค่าจาก Origin header โดยตรงโดยไม่มีการตรวจสอบ
4. Third-Party Scripts — เพิ่ม SRI hashes ให้กับแท็ก <script> ภายนอกทั้งหมด และจำกัด script-src ใน CSP ของคุณให้เฉพาะโดเมนที่ได้รับอนุมัติ
5. Network Audit — เปิดแท็บ DevTools Network (หรือเรียกใช้การสแกน WebValid) และมองหาข้อผิดพลาด 4xx/5xx, การร้องขอซ้ำ และทรัพยากรที่ไม่ถูกบีบอัด

สิ่งที่ WebValid ตรวจพบ

WebValid ตรวจจับและรายงานปัญหาด้านความปลอดภัยของเครือข่าย โดยไม่ได้ทำการแก้ไขการกำหนดค่าเซิร์ฟเวอร์ของคุณ ใส่ headers หรือแก้ไขนโยบาย CORS โดยตรง คุณสามารถนำผลลัพธ์การสแกนไปให้ผู้ช่วย AI ของคุณตรวจสอบได้ — เพียงคัดลอก Markdown report ไปใส่ใน Cursor แล้วให้มันสร้างโค้ดสำหรับแก้ไขให้คุณ

ผู้ช่วย AI ของคุณสามารถเขียนโค้ดที่ปลอดภัยได้ — มันแค่ไม่รู้ว่ามันทำผิดพลาดที่จุดใด เพียงให้แผนที่ข้อผิดพลาดแก่แก้เครื่องมือ แล้วมันจะแก้ไขทุกอย่างให้คุณเอง

ทำการตรวจสอบความปลอดภัยเครือข่ายบนไซต์หรือสภาพแวดล้อมการทดสอบของคุณได้ฟรี:

→ https://webvalid.dev/

มีคำถามเกี่ยวกับผลการตรวจสอบของคุณหรือไม่? เริ่มทำการตรวจสอบได้ฟรี

เอกสารอ้างอิงอย่างเป็นทางการ

• OWASP: HTTP Security Response Headers Cheat Sheet
• OWASP A05:2021 Security Misconfiguration
• OWASP A01:2021 Broken Access Control
• MDN: Mixed Content
• MDN: Content Security Policy (CSP)
• MDN: Cross-Origin Resource Sharing (CORS)
• Next.js: Content Security Policy Configuration
• Cloudflare: What is Mixed Content?