Image / JSON Upload Confusion Leading to Angular XSS

The backend blesses the upload as an image, but Angular later fetches the same file as JSON because the code path expects JSON. The same bytes satisfy both interpretations well enough to bridge server and client trust boundaries.

Why It Works

• Server validates by content (image allowlist); the frontend parses by code path (typed JSON fetch). One file satisfies both.

Vulnerable Pattern

• Content-based image allowlists on the server plus typed HttpClient JSON fetches on the frontend.

Exploit Flow

1. Craft a file that passes backend image validation but stays valid enough JSON for the frontend path.
2. Ensure the JSON contains the field eventually rendered as trusted HTML.
3. Route the victim to the frontend path that fetches the uploaded file as an article.

Variations

• Deep JSON + SVG confusion, weird content types, or extension mismatches if one side trusts the name and the other the code path.

Common Blockers

• Frontend parses strictly and rejects malformed JSON, or backend recompresses images.

PoC Sketch

curl -F 'image=@payload.json;type=image/svg+xml' https://target/api/v1/image?action=upload
# then load the uploaded file through the Angular article-fetch path

Good Situations To Use It

• Server uses content-based image validation.
• Angular fetches the file as JSON by code path.
• A JSON field reaches a trusted-HTML sink.

Sources

• fcsc2026/web/deep_blue