Send credentials when fetching the web app manifest (crossorigin="use-credentials")

[m0sth8]

What

Add crossOrigin="use-credentials" to the web app manifest <link> so the browser sends cookies when fetching /site.webmanifest.

Why

We run Umami as an internal-only service behind an AWS ALB with OIDC authentication (authenticate on unauthenticated requests). Everything works except the manifest.

Browsers fetch the web app manifest without credentials by default, unless the link tag opts in with crossorigin="use-credentials" (crossOrigin in JSX). So the manifest request arrives at our auth proxy with no session cookie, the proxy treats it as logged-out and 302-redirects it to the identity provider, and the browser then blocks the cross-origin redirect against Umami's own CSP (default-src 'self'):

Loading a manifest from 'https://accounts.google.com/o/oauth2/v2/auth?...'
violates the following Content Security Policy directive: "default-src 'self'".

The dashboard itself is fine — this is just the manifest failing to load on every page — but it's a console error on every authenticated deployment behind a cookie-based auth proxy (OAuth2 Proxy, Cloudflare Access, ALB OIDC, Authelia, etc.).

use-credentials makes the browser include cookies, the proxy sees the session, and the manifest loads same-origin. It's a no-op for installs without an auth proxy.

Prior art

The same one-line fix has been adopted by other self-hosted projects that hit this behind auth proxies:

• Sonarr — Requests to manifest.json do not respect cookies and headers Sonarr/Sonarr#4305
• Radarr — Requests to manifest.json do not respect cookies and headers Radarr/Radarr#5863
• Home Assistant — Add crossorigin="use-credentials" to fetch manifest.json with cookies home-assistant/frontend#940
• Dashy — [BUG] manifest.webmanifest fetch fails when behind Cloudflare Access (or similar auth proxies) due to missing crossorigin="use-credentials" lissy93/dashy#2102
• karma — Add crossorigin="use-credentials" to rel="manifest" link prymitive/karma#1341

Fix

-        <link rel="manifest" href="/site.webmanifest" />
+        <link rel="manifest" href="/site.webmanifest" crossOrigin="use-credentials" />

[vercel]

@m0sth8 is attempting to deploy a commit to the Umami Software Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Summary

This PR adds crossorigin="use-credentials" to the <link rel="manifest"> tag so browsers include session cookies when fetching /site.webmanifest, fixing a CSP violation that occurs when Umami is deployed behind cookie-based auth proxies (AWS ALB OIDC, OAuth2 Proxy, Cloudflare Access, etc.).

• One-character change in src/app/layout.tsx: adds the crossorigin attribute to the manifest link so auth proxies receive the session cookie and serve the manifest correctly instead of redirecting to an identity provider.
• The attribute is spelled crossorigin (lowercase HTML form) rather than crossOrigin (the correct camelCase JSX prop name), which may produce a TypeScript compile error and should be corrected.

Confidence Score: 4/5

The fix is conceptually correct — adding credentials to the manifest fetch resolves the auth proxy CSP issue — but the attribute casing needs to be corrected before merging to avoid a potential build failure.

The only change is a single JSX attribute on the manifest link. The credential-inclusion behaviour is correct and safe for same-origin deployments. The issue is that crossorigin (lowercase) is not the recognised React/JSX spelling; crossOrigin (camelCase) is what LinkHTMLAttributes declares, so the build may fail on type-checking. Fixing the casing to crossOrigin makes this a clean, safe change.

src/app/layout.tsx — attribute casing needs to change from crossorigin to crossOrigin.

Important Files Changed

Filename	Overview
src/app/layout.tsx	Adds crossorigin="use-credentials" to the manifest link; the intent is correct but uses the lowercase HTML spelling instead of the camelCase JSX prop crossOrigin, which may cause a TypeScript compile error.

Sequence Diagram

sequenceDiagram
    participant Browser
    participant AuthProxy as Auth Proxy (ALB/OAuth2)
    participant Umami

    Note over Browser,Umami: Before this PR (no credentials on manifest fetch)
    Browser->>AuthProxy: GET /site.webmanifest (no cookies)
    AuthProxy->>Browser: 302 → identity provider (e.g. accounts.google.com)
    Browser--xBrowser: CSP blocks cross-origin redirect

    Note over Browser,Umami: After this PR (crossOrigin="use-credentials")
    Browser->>AuthProxy: GET /site.webmanifest + session cookie
    AuthProxy->>Umami: Forwards authenticated request
    Umami->>Browser: 200 site.webmanifest

Loading

_{Reviews (1): Last reviewed commit: "Send credentials when fetching the web a..." | Re-trigger Greptile}

[greptile-apps]

The JSX prop should be crossOrigin (camelCase), not crossorigin (lowercase). React's TypeScript definitions (LinkHTMLAttributes) declare crossOrigin, so the lowercase spelling is an unknown property that will likely produce a TypeScript compile error. At runtime React may pass it through, but the camelCase form is the correct idiomatic JSX spelling and avoids any type-checking failure.

Suggested change

	<link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials" />
	<link rel="manifest" href="/site.webmanifest" crossOrigin="use-credentials" />