fix(web): XSS in Mapbox popup, add CSP header, CSRF on media upload

- Replace innerHTML/setHTML with DOM API (createElement/textContent/setDOMContent)
  to prevent XSS via user-controlled listing titles, URLs, and prices
- Add Content-Security-Policy header to next.config.js with proper directives
  for Mapbox, API, images, workers, and frame-ancestors
- Add X-CSRF-Token header to media upload fetch call, matching apiClient behavior

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/lib/listings-api.ts

@@ -162,9 +162,19 @@ export const listingsApi = {
     formData.append('file', file);
     if (caption) formData.append('caption', caption);
 
+    const csrfToken = typeof document !== 'undefined'
+      ? document.cookie.match(/(?:^|;\s*)XSRF-TOKEN=([^;]*)/)?.[1]
+      : undefined;
+
+    const headers: HeadersInit = {};
+    if (csrfToken) {
+      headers['X-CSRF-Token'] = decodeURIComponent(csrfToken);
+    }
+
     const res = await fetch(`${API_BASE_URL}/listings/${listingId}/media`, {
       method: 'POST',
       credentials: 'include',
+      headers,
       body: formData,
     });