Fix XSS in API Responses in Qwik

Qwik's fine-grained reactivity and server-side serialization don't provide a magic shield against Cross-Site Scripting (XSS). If you're ingesting untrusted data from an API and piping it directly into the DOM via 'dangerouslySetInnerHTML' or improper attribute binding, you're giving attackers a persistent foothold. In a Qwik environment, this often happens during 'useResource$' or 'routeLoader$' execution where the developer assumes the backend is 'clean'. It isn't.

The Vulnerable Pattern

import { component$, useResource$, Resource } from '@builder.io/qwik';
export default component$(() => {
const apiData = useResource$(async () => {
const response = await fetch(‘https://api.untrusted.com/profile’);
return response.json(); // Data contains: { “bio”: "" }
});
return (
<Resource
value={apiData}
onResolved={(data) => (

      )}
    />
  );
});

The Secure Implementation

The vulnerability stems from the use of 'dangerouslySetInnerHTML', which tells Qwik to bypass its default escaping mechanism and render raw HTML. To fix this: 1. Default to standard JSX curly-brace interpolation '{data.bio}', which automatically HTML-encodes characters like <, >, and &. 2. If rendering HTML is a functional requirement, you must use a library like 'isomorphic-dompurify' to strip dangerous tags and attributes before the data reaches the component state. 3. Validate and sanitize at the source (API side) but always treat the client-side as the final gatekeeper.

import { component$, useResource$, Resource } from '@builder.io/qwik';
import DOMPurify from 'isomorphic-dompurify';
export default component$(() => {
const apiData = useResource$(async () => {
const response = await fetch(‘https://api.untrusted.com/profile’);
const json = await response.json();
// Sanitize the payload immediately after fetching
return {
…json,
bio: DOMPurify.sanitize(json.bio)
};
});
return (
<Resource
value={apiData}
onResolved={(data) => (
/* Standard JSX interpolation automatically escapes strings */
{data.bio}
      )}
    />
  );
});