Open Wire: Bagaimana Pembuat Kode AI Merusak Keamanan Jaringan Proyek Tanpa Disadari

Stack: React, Next.js App Router, Vite. Masalah: Kegagalan keamanan di tingkat jaringan yang dimasukkan secara diam-diam oleh kode frontend buatan AI — mixed content, security headers yang hilang, wildcard CORS, dan permintaan jaringan yang tidak diaudit.

Gembok HTTPS Anda adalah sebuah kebohongan. Tidak sepenuhnya — sertifikat server Anda mungkin baik-baik saja. Namun keamanan jaringan bukan hanya tentang ikon gembok tersebut. Ini tentang setiap permintaan jaringan (network request) yang dibuat aplikasi Anda setelah halaman dimuat. Dan di sinilah kode buatan AI menciptakan lubang tak terlihat dalam perimeter keamanan Anda.

Saat Anda meminta asisten AI untuk “menambahkan formulir pembayaran” atau “menghubungkan analitik,” asisten tersebut menghasilkan kode fungsional dalam hitungan detik. Apa yang tidak dihasilkannya adalah infrastruktur keamanan tingkat jaringan yang memisahkan aplikasi prototipe dari aplikasi produksi. Tidak ada Content Security Policy (CSP). Tidak ada penegakan HSTS. Tidak ada batasan CORS. Hanya trafik HTTP mentah yang tidak terlindungi yang bersembunyi di balik gembok hijau tersebut.

Artikel ini membedah 5 kegagalan keamanan tingkat jaringan yang dimasukkan secara diam-diam oleh pembuat kode AI — dan cara mendeteksinya sebelum pengguna Anda menanggung akibatnya. Jika Anda sudah pernah mengalami kepedihan karena lebocorn API keys dalam bundle klien, anggap ini sebagai bab berikutnya: rahasia Anda mungkin aman, tetapi lapisan transportasi (transport layer) Anda terbuka lebar.

Mixed Content: Pembunuh Fitur yang Diam-diam

🔴 Critical · Browser memblokir fungsionalitas halaman · OWASP A05:2021 Security Misconfiguration

Mixed content terjadi ketika halaman HTTPS Anda memuat sumber daya melalui HTTP biasa. Browser modern tidak menoleransi hal ini — mereka memblokir active mixed content (skrip, stylesheet, iframe) sepenuhnya dan meningkatkan passive content (gambar, media) secara otomatis jika memungkinkan.

Asisten AI secara rutin menghasilkan pola ini karena data pelatihan mereka dipenuhi dengan jawaban dan tutorial Stack Overflow lama yang menggunakan URL http://. Model tersebut tidak memahami bahwa target deployment Anda menggunakan HTTPS — ia hanya menyalin apa yang telah dilihatnya jutaan kali.

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();
};

Perbaikan pertahanan berlapis (defense-in-depth) adalah dengan menambahkan direktif CSP upgrade-insecure-requests, yang menginstruksikan browser untuk menulis ulang semua URL HTTP ke HTTPS secara diam-diam sebelum membuat permintaan. Namun ini hanyalah jaring pengaman, bukan lisensi untuk mengirimkan kode yang tidak aman — akar masalahnya harus diperbaiki dalam sumber kode.

Bagaimana WebValid menangkap ini: Network Scanner memantau setiap permintaan selama pemuatan halaman dan menandai permintaan http:// apa pun yang berasal dari halaman HTTPS, memberikan Anda URL yang tepat dan elemen yang memicunya.

Tanpa Security Headers: Pintu Terbuka yang Tidak Pernah Ditutup AI

🔴 Critical · Serangan XSS dan clickjacking tidak dimitigasi · OWASP A05:2021 Security Misconfiguration

Mintalah asisten AI mana pun untuk membangun aplikasi Next.js untuk Anda dari awal. Anda akan mendapatkan halaman, tata letak, rute API, dan bahkan mungkin otentikasi. Apa yang tidak akan pernah Anda dapatkan — kecuali jika Anda memintanya secara eksplisit — adalah file middleware.ts yang menyetel security response headers.

Ini bukan kelalaian kecil. Tanpa Content Security Policy (CSP), aplikasi Anda tidak memiliki pertahanan terhadap Cross-Site Scripting (XSS). Tanpa HSTS, pengguna yang terhubung untuk pertama kalinya dapat diturunkan ke HTTP. Tanpa X-Frame-Options (atau CSP frame-ancestors), halaman login Anda dapat disematkan dalam iframe penyerang untuk clickjacking.

OWASP HTTP Security Response Headers Cheat Sheet mencantumkan lebih dari selusin header yang direkomendasikan. Aplikasi buatan AI biasanya dikirimkan tanpa satu pun header tersebut.

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;
}

Untuk aplikasi berbasis Vite, security headers harus dikonfigurasi di tingkat server (Nginx, Cloudflare, atau server Node.js Anda), karena Vite adalah alat bantu build, bukan runtime server.

Pindai header Anda secara gratis — jalankan audit keamanan WebValid

Bagaimana WebValid menangkap ini: Security Scanner memeriksa setiap respons HTTP untuk keberadaan dan kebenaran header keamanan kritis, menandai CSP, HSTS, X-Frame-Options, dan X-Content-Type-Options yang hilang.

Wildcard CORS: “Perbaikan Cepat” yang Membuka Segalanya

🟠 High · Pencurian data lintas situs dari API yang terotentikasi · OWASP A01:2021 Broken Access Control

Setiap pengembang yang pernah berjuang melawan kesalahan CORS mengetahui godaannya: cukup tambahkan Access-Control-Allow-Origin: * dan buat pesan konsol merah itu menghilang. Asisten AI telah menginternalisasi pintasan ini dari ribuan jawaban Stack Overflow. Saat Anda meminta untuk “memperbaiki kesalahan CORS,” model tersebut memilih opsi nuklir.

Masalahnya bukan pada penggunaan wildcard pada API publik yang bersifat read-only. Masalahnya adalah ketika AI menerapkan pola yang sama ini pada endpoint yang terotentikasi — API yang bergantung pada cookie, token, atau session headers untuk mengidentifikasi pengguna.

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();
});

Pola kedua ini sangat berbahaya: pola ini memberitahu browser bahwa “situs web mana pun dapat membuat permintaan terotentikasi ke API ini dan membaca responsnya.” Seorang penyerang menghosting halaman di evil.com, korban mengunjunginya saat masuk ke aplikasi Anda, dan JavaScript penyerang secara diam-diam membaca profil korban, data pembayaran, atau catatan internal.

Fixed Code — daftar izin eksplisit (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 mendeteksi network requests lintas asal (cross-origin) yang tidak terduga selama pemuatan halaman melalui Network Scanner. Namun, konfigurasi header CORS adalah masalah sisi server — WebValid melaporkan gejalanya (permintaan yang diblokir atau mencurigakan), bukan konfigurasi server itu sendiri.

Skrip Pihak Ketiga Tanpa Cakupan: Rantai Pasokan di Browser Anda

🟠 High · Akses DOM dan eksfiltrasi data oleh kode eksternal · OWASP A08:2021 Software and Data Integrity Failures

Saat Anda meminta AI untuk “menambahkan Google Analytics” or “mengintegrasikan widget obrolan,” asisten tersebut menghasilkan tag <script> yang mengarah ke CDN eksternal. Sederhana, fungsional, dan berbahaya karena tidak dibatasi.

Tanpa Content Security Policy yang membatasi script-src, skrip pihak ketiga tersebut memiliki hak istimewa yang sama dengan kode Anda sendiri. Skrip tersebut dapat membaca masukan formulir, mengakses cookie, memodifikasi DOM, dan mengeluarkan data ke server mana pun. Jika CDN vendor disusupi — serangan rantai pasokan gaya Magecart — muatan berbahaya tersebut dieksekusi di browser pengguna Anda dengan nol perlawanan.

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>

Dikombinasikan dengan direktif script-src CSP yang mencantumkan domain yang diizinkan secara eksplisit, pendekatan ini memastikan bahwa hanya skrip yang diverifikasi yang dieksekusi dan hanya dari asal yang disetujui.

Masalah yang lebih dalam adalah di tingkat proses: tim pemasaran sering kali memasukkan pelacak melalui tag manager yang melewati pipeline CI/CD Anda sepenuhnya. Seperti yang didokumentasikan dalam audit vibe-coding situs web buatan AI Garry Tan, proyek buatan AI sering kali mengakumulasi puluhan network requests yang tidak dipantau — 169 dalam kasus tersebut — tanpa pengawasan terhadap apa yang dilakukan setiap permintaan.

Kegagalan Jaringan Diam-diam: Pajak Performa yang Tidak Terlihat

🟡 Medium · Aset rusak, bandwidth terbuang, UX menurun · Performance degradation

Kategori ini adalah yang paling berbahaya karena tidak ada yang terlihat rusak. Halaman Anda dimuat, pengguna berinteraksi dengannya, dan semuanya tampak baik-baik saja. Namun buka tab Jaringan di DevTools dan Anda mungkin menemukan:

• 4xx errors pada gambar, font, atau API endpoints yang ditautkan AI dengan jalur yang salah
• Duplicate requests di mana AI memanggil API yang sama di beberapa komponen tanpa deduplikasi
• Aset tidak terkompresi yang dikirim tanpa gzip atau Brotli karena AI tidak pernah mengonfigurasi pipeline build untuk kompresi
• Waterfall chains di mana AI memuat sumber daya secara berurutan, bukan secara paralel

Kegagalan ini menumpuk secara diam-diam. Setiap gambar yang rusak adalah koneksi yang sia-sia. Setiap pengambilan data duplikat melipatgandakan beban server Anda. Setiap bundle JavaScript 500KB yang tidak terkompresi membuat pengguna seluler menunggu tambahan 2-3 detik melalui 3G.

Bagaimana WebValid menangkap ini: Network Scanner menangkap setiap permintaan jaringan selama pemuatan halaman penuh, menandai kode status 4xx/5xx, mengidentifikasi sumber daya yang sangat berat, dan menyoroti permintaan yang melebihi batas waktu respons. Ini adalah jenis masalah yang hanya muncul dalam audit jaringan langsung — bukan di IDE Anda, bukan di linter Anda, dan bukan di jendela obrolan asisten AI Anda.

Fact-Check: Bukti Dunia Nyata

Klaim artikel ini didasarkan pada standar teknis yang dapat diverifikasi dan insiden yang didokumentasikan:

• Bukti: OWASP Top 10 (2021) mengklasifikasikan security headers yang hilang di bawah A05:2021 Security Misconfiguration — salah satu kategori kerentanan yang paling umum dalam aplikasi web.
• Bukti: Dokumentasi MDN menyatakan bahwa browser modern memblokir active mixed content secara default dan meningkatkan passive content secara otomatis, memastikan bahwa sumber daya HTTP pada halaman HTTPS akan rusak secara diam-diam atau ditulis ulang.
• Bukti: Audit situs web berkode vibe Garry Tan mendokumentasikan 169 network requests pada satu pemuatan beranda, termasuk aset yang rusak dan skrip pihak ketiga yang tidak dipantau — contoh nyata dari perilaku jaringan yang tidak diaudit.
• Bukti: Chrome 124+ (2024) meningkatkan semua sumber daya mixed content ke HTTPS sebelum memblokir, yang berarti mixed content tidak lagi menampilkan peringatan browser — itu hanya rusak secara diam-diam atau ditulis ulang, membuat deteksi tanpa alat menjadi lebih sulit.
• Opini (berdasarkan pengalaman industri): Dalam pengalaman kami, aplikasi buatan AI dikirimkan tanpa security headers secara default, karena konfigurasi header adalah pekerjaan tingkat infrastruktur yang berada di luar cakupan pengoptimalan tingkat file model tersebut.

Daftar Periksa Keamanan Jaringan Anda

Sebelum Anda men-deploy frontend buatan AI apa pun, verifikasi butir-butir ini:

1. Mixed Content — Cari URL http:// di basis kode Anda. Ganti dengan https:// atau variabel lingkungan. Tambahkan upgrade-insecure-requests ke CSP Anda sebagai jaring pengaman.
2. Security Headers — Buat middleware.ts (Next.js) atau konfigurasi server Anda (Vite/Nginx) untuk menyetel CSP, HSTS, X-Content-Type-Options, X-Frame-Options, dan Referrer-Policy.
3. CORS Policy — Ganti wildcard cors() dengan daftar izin asal (origin allowlist) yang eksplisit. Jangan pernah merefleksikan header Origin tanpa validasi.
4. Skrip Pihak Ketiga — Tambahkan hash SRI ke semua tag <script> eksternal. Batasi script-src dalam CSP Anda hanya untuk domain yang disetujui.
5. Audit Jaringan — Buka tab DevTools Network (atau jalankan pemindaian WebValid) dan cari kesalahan 4xx/5xx, permintaan duplikat, dan aset tidak terkompresi.

Apa yang Dideteksi WebValid

WebValid mendeteksi dan melaporkan masalah keamanan tingkat jaringan. WebValid tidak memodifikasi konfigurasi server Anda, memasukkan header, atau memperbaiki kebijakan CORS. Gunakan hasil pemindaian sebagai masukan untuk asisten AI Anda — masukkan laporan Markdown langsung ke Cursor dan biarkan ia menghasilkan perbaikannya.

Asisten AI Anda dapat menulis kode yang aman — ia hanya tidak tahu di mana kesalahannya. Beri asisten tersebut peta kesalahan, dan ia akan memperbaiki semuanya sendiri.

Jalankan audit keamanan jaringan gratis di situs atau lingkungan pementasan Anda:

→ https://webvalid.dev/

Punya pertanyaan tentang hasil audit Anda? Mulai audit secara gratis

Dokumentasi Resmi

• 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?