WebValid
• WebValid Team

Open Wire: How AI Coders Ship With Zero Network Security

AI Coding Security Mixed Content CSP Vibe Coding

Stack: React, Next.js App Router, Vite. Problem: Network-level security failures silently introduced by AI-generated frontend code — mixed content, missing security headers, CORS wildcards, and unaudited network requests.

Your HTTPS padlock is a lie. Well, not entirely — your server certificate is probably fine. But network security is not just about the padlock icon. It is about every single request your application makes after the page loads. And this is exactly where AI-generated code creates invisible holes in your security perimeter.

When you prompt an AI assistant to “add a payment form” or “connect analytics,” it produces functional code in seconds. What it does not produce is the network-level security infrastructure that separates a prototype from a production application. No Content Security Policy. No HSTS enforcement. No CORS restrictions. Just raw, unprotected HTTP traffic hiding behind a green padlock.

This article dissects 5 network-level security failures that AI coders introduce silently — and how to detect them before your users pay the price. If you have already experienced the pain of leaked API keys in client bundles, consider this the next chapter: your secrets might be safe, but your transport layer is wide open.

Mixed Content: The Silent Feature Killer

🔴 Critical · Browser blocks page functionality · OWASP A05:2021 Security Misconfiguration

Mixed content happens when your HTTPS page loads resources over plain HTTP. Modern browsers do not tolerate this — they block active mixed content (scripts, stylesheets, iframes) entirely and auto-upgrade passive content (images, media) where possible.

AI assistants routinely generate this pattern because their training data is saturated with old Stack Overflow answers and tutorials that use http:// URLs. The model does not understand that your deployment target uses HTTPS — it just copies what it has seen millions of times.

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

The defense-in-depth fix is adding the upgrade-insecure-requests CSP directive, which instructs the browser to silently rewrite all HTTP URLs to HTTPS before making requests. But this is a safety net, not a license to ship insecure code — the root cause must be fixed in the source.

How WebValid catches this: The Network Scanner monitors every request during page load and flags any http:// requests originating from an HTTPS page, giving you the exact URL and the element that triggered it.

Zero Security Headers: The Open Door AI Never Closes

🔴 Critical · XSS and clickjacking attacks unmitigated · OWASP A05:2021 Security Misconfiguration

Ask any AI assistant to build you a Next.js application from scratch. You will get pages, layouts, API routes, and maybe even authentication. What you will never get — unless you explicitly ask — is a middleware.ts file that sets security response headers.

This is not a minor oversight. Without a Content Security Policy (CSP), your application has zero defense against Cross-Site Scripting. Without HSTS, users connecting for the first time can be downgraded to HTTP. Without X-Frame-Options (or CSP frame-ancestors), your login page can be embedded in an attacker’s iframe for clickjacking.

The OWASP HTTP Security Response Headers Cheat Sheet lists over a dozen recommended headers. AI-generated applications typically ship with zero of them.

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

For Vite-based applications, security headers must be configured at the server level (Nginx, Cloudflare, or your Node.js server), since Vite is a build tool, not a runtime server.

Scan your headers for free — run a WebValid security audit

How WebValid catches this: The Security Scanner checks every HTTP response for the presence and correctness of critical security headers, flagging missing CSP, HSTS, X-Frame-Options, and X-Content-Type-Options.

Wildcard CORS: The “Quick Fix” That Opens Everything

🟠 High · Cross-site data theft from authenticated APIs · OWASP A01:2021 Broken Access Control

Every developer who has fought a CORS error knows the temptation: just add Access-Control-Allow-Origin: * and make the red console message disappear. AI assistants have internalized this shortcut from thousands of Stack Overflow answers. When you prompt “fix CORS error,” the model reaches for the nuclear option.

The problem is not the wildcard on public, read-only APIs. The problem is when AI applies this same pattern to authenticated endpoints — APIs that rely on cookies, tokens, or session headers to identify users.

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

This second pattern is particularly dangerous: it tells the browser “any website can make authenticated requests to this API and read the response.” An attacker hosts a page on evil.com, the victim visits it while logged into your app, and the attacker’s JavaScript silently reads the victim’s profile, payment data, or internal records.

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 detects unexpected cross-origin network requests during page load via the Network Scanner. However, CORS header configuration is a server-side concern — WebValid reports the symptoms (blocked or suspicious requests), not the server config itself.

Unscoped Third-Party Scripts: The Supply Chain in Your Browser

🟠 High · DOM access and data exfiltration by external code · OWASP A08:2021 Software and Data Integrity Failures

When you ask an AI to “add Google Analytics” or “integrate a chat widget,” it generates a <script> tag pointing to an external CDN. Simple, functional, and dangerously unscoped.

Without a Content Security Policy restricting script-src, that third-party script has the same privileges as your own code. It can read form inputs, access cookies, modify the DOM, and exfiltrate data to any server. If the vendor’s CDN is compromised — a Magecart-style supply chain attack — the malicious payload executes in your users’ browsers with zero resistance.

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>

Combined with a CSP script-src directive that explicitly lists allowed domains, this approach ensures that only verified scripts execute and only from approved origins.

The deeper problem is process-level: marketing teams often inject tracking pixels via tag managers that bypass your CI/CD pipeline entirely. As documented in a vibe-coding audit of Garry Tan’s AI-built website, AI-generated projects frequently accumulate dozens of unmonitored network requests — 169 in that specific case — with no governance over what each request does.

Silent Network Failures: The Invisible Performance Tax

🟡 Medium · Broken assets, wasted bandwidth, degraded UX · Performance degradation

This is the most insidious category because nothing breaks visibly. Your page loads, users interact with it, and everything seems fine. But open the DevTools Network tab and you might find:

These failures accumulate silently. Each broken image is a wasted connection. Each duplicate fetch doubles your server load. Each uncompressed 500KB JavaScript bundle makes mobile users wait an extra 2-3 seconds over 3G.

How WebValid catches this: The Network Scanner captures every network request during a full page load, flagging 4xx/5xx status codes, identifying unusually heavy resources, and highlighting requests that exceed response time budgets. This is exactly the type of issue that only surfaces in a live network audit — not in your IDE, not in your linter, and not in your AI assistant’s completion window.

Fact-Check: Real-World Evidence

This article’s claims are grounded in verifiable technical standards and documented incidents:

Your Network Security Checklist

Before you deploy any AI-generated frontend, verify these items:

  1. Mixed Content — Search your codebase for http:// URLs. Replace with https:// or environment variables. Add upgrade-insecure-requests to your CSP as a safety net.
  2. Security Headers — Create a middleware.ts (Next.js) or configure your server (Vite/Nginx) to set CSP, HSTS, X-Content-Type-Options, X-Frame-Options, and Referrer-Policy.
  3. CORS Policy — Replace any cors() wildcard with an explicit origin allowlist. Never reflect the Origin header without validation.
  4. Third-Party Scripts — Add SRI hashes to all external <script> tags. Restrict script-src in your CSP to only approved domains.
  5. Network Audit — Open DevTools Network tab (or run a WebValid scan) and look for 4xx/5xx errors, duplicate requests, and uncompressed assets.

What WebValid Detects

CategoryScannerDetects
Mixed content requestsNetwork ScannerHTTP requests on HTTPS pages
Missing security headersSecurity ScannerAbsent CSP, HSTS, X-Frame-Options, X-Content-Type
4xx/5xx network errorsNetwork ScannerBroken asset links, failed API calls
Leaked secrets in bundlesSecurity ScannerAPI keys, tokens exposed in client JS
Slow or heavy resourcesNetwork ScannerUncompressed assets, oversized payloads
Third-party request monitoringNetwork ScannerExternal domain requests during page load

WebValid detects and reports network-level security issues. It does not modify your server configuration, inject headers, or patch CORS policies. Use the scan results as input for your AI assistant — drop the Markdown report directly into Cursor and let it generate the fix.

Your AI assistant can write secure code — it just does not know where it went wrong. Give it a map of errors, and it fixes everything itself.

Run a free network security audit on your site or staging environment:

→ https://webvalid.dev/

Have questions about your audit results? Start auditing for free

Official Documentation

Was this article helpful?