fix(webapp): allow gstatic favicon redirects and changelog images in img-src

Author: kathiekiwi

.server-changes/org-avatar-csp.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Organization avatars and changelog images now display again in the dashboard instead of showing as broken images.

apps/webapp/app/utils/cspImageOrigins.test.ts

@@ -17,7 +17,11 @@ function directivePermits(directive: string, imageUrl: string): boolean {
       if (!source.startsWith("http")) return false;
       const parsed = new URL(source);
       if (parsed.protocol !== url.protocol || parsed.host !== url.host) return false;
-      return parsed.pathname === "/" || parsed.pathname === url.pathname;
+      // CSP path matching: a source path ending in "/" matches by prefix, otherwise it
+      // must match exactly. The query string is never part of the match.
+      return parsed.pathname.endsWith("/")
+        ? url.pathname.startsWith(parsed.pathname)
+        : parsed.pathname === url.pathname;
     });
 }
 
@@ -104,9 +108,9 @@ describe("parseCspImageOrigins", () => {
 });
 
 describe("buildImgSrcDirective", () => {
-  it("is self, data, blob, the SSO avatar hosts and the favicon endpoint by default", () => {
+  it("is self, data, blob, the SSO avatar hosts, the favicon endpoints and the changelog by default", () => {
     expect(buildImgSrcDirective()).toBe(
-      "img-src 'self' data: blob: https://avatars.githubusercontent.com https://lh3.googleusercontent.com https://www.google.com/s2/favicons"
+      "img-src 'self' data: blob: https://avatars.githubusercontent.com https://lh3.googleusercontent.com https://www.google.com/s2/favicons https://t0.gstatic.com/faviconV2 https://t1.gstatic.com/faviconV2 https://t2.gstatic.com/faviconV2 https://t3.gstatic.com/faviconV2 https://trigger.dev/changelog/"
     );
   });
 
@@ -120,6 +124,29 @@ describe("buildImgSrcDirective", () => {
     );
   });
 
+  it("permits the gstatic shard the favicon endpoint redirects to", () => {
+    expect(
+      directivePermits(
+        buildImgSrcDirective(),
+        "https://t2.gstatic.com/faviconV2?url=https://example.com&size=128"
+      )
+    ).toBe(true);
+  });
+
+  it("permits nothing else on a gstatic shard, and no shard we did not list", () => {
+    const directive = buildImgSrcDirective();
+    expect(directivePermits(directive, "https://t2.gstatic.com/beacon.png")).toBe(false);
+    expect(directivePermits(directive, "https://t9.gstatic.com/faviconV2")).toBe(false);
+  });
+
+  it("permits changelog images by path prefix, and nothing else on our domain", () => {
+    const directive = buildImgSrcDirective();
+    expect(directivePermits(directive, "https://trigger.dev/changelog/some-post/image.png")).toBe(
+      true
+    );
+    expect(directivePermits(directive, "https://trigger.dev/anything.png")).toBe(false);
+  });
+
   it("permits both OAuth avatar hosts", () => {
     const directive = buildImgSrcDirective();
     expect(directivePermits(directive, "https://avatars.githubusercontent.com/u/1?v=4")).toBe(true);

apps/webapp/app/utils/cspImageOrigins.ts

@@ -6,9 +6,11 @@
  */
 
 /**
- * Always allowed: own origin, inline data, object URLs, the SSO avatar hosts, and the
- * favicon endpoint org avatars are stored as (see `utils/favicon.ts`). The path pins
- * that one endpoint — CSP matches the path and ignores the query string.
+ * Always allowed: own origin, inline data, object URLs, the SSO avatar hosts, the
+ * favicon endpoint org avatars are stored as (see `utils/favicon.ts`), and our own
+ * changelog images. The path pins each endpoint — CSP matches the path and ignores the
+ * query string. The favicon endpoint 302s to a `tN.gstatic.com` shard and CSP re-checks
+ * the redirect target, so the shards are listed too. A trailing "/" matches by prefix.
  */
 export const BASE_IMG_SRC_SOURCES = [
   "'self'",
@@ -17,6 +19,11 @@ export const BASE_IMG_SRC_SOURCES = [
   "https://avatars.githubusercontent.com",
   "https://lh3.googleusercontent.com",
   "https://www.google.com/s2/favicons",
+  "https://t0.gstatic.com/faviconV2",
+  "https://t1.gstatic.com/faviconV2",
+  "https://t2.gstatic.com/faviconV2",
+  "https://t3.gstatic.com/faviconV2",
+  "https://trigger.dev/changelog/",
 ] as const;
 
 export type RejectedOrigin = { value: string; reason: string };

apps/webapp/test/dashboardAgentImageCsp.test.ts

@@ -24,6 +24,15 @@ describe("document image CSP", () => {
     expect(directive).not.toMatch(/(^|\s)https?:(\s|$)/);
   });
 
+  it("permits a changelog image", () => {
+    const imageUrl = "https://trigger.dev/changelog/some-post/image.png";
+    const permitted = buildImgSrcDirective()
+      .split(" ")
+      .slice(1)
+      .some((source) => source.endsWith("/") && imageUrl.startsWith(source));
+    expect(permitted).toBe(true);
+  });
+
   it("sets the header on every document response, not only on /login", () => {
     // The set() call must sit outside the /login branch.
     const loginBranch = source.slice(