From c5217cd96de3dd8d2971668373b6eabd2c1654a4 Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Wed, 25 Mar 2026 01:47:59 -0400
Subject: [PATCH] fix(csp): allow external images in App Store and suppress
 console warnings (#138)

Add https: to img-src CSP directive so App Store template icons from
external registries (raw.githubusercontent.com) load correctly. Disable
Origin-Agent-Cluster header (only meaningful over HTTPS). Add minWidth={0}
to Recharts ResponsiveContainer to suppress dimension warnings.
---
 CHANGELOG.md                         | 5 +++--
 backend/src/index.ts                 | 7 ++++++-
 frontend/src/components/ui/chart.tsx | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 70e8403a..ad3807f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,8 +15,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-* **env:** fix 404 when loading env files for stacks with `env_file` paths outside the stack directory (e.g. shared `globals.env`). The `/envs` endpoint now only returns files that exist on disk, and absolute `env_file` paths from compose files are no longer rejected.
-* **csp:** fix Content Security Policy violation caused by inline theme-detection script. Moved to an external `theme-init.js` file so it is covered by `script-src 'self'`.
+* **csp:** add `https:` to `img-src` directive so App Store template icons load correctly from external registries.
+* **helmet:** disable `Origin-Agent-Cluster` header to eliminate browser warning on plain-HTTP deployments.
+* **charts:** suppress Recharts `width(-1) height(-1)` warnings by setting `minWidth={0}` on `ResponsiveContainer`.
 
 ## [0.2.2](https://github.com/AnsoCode/Sencho/compare/v0.2.1...v0.2.2) (2026-03-25)
 
diff --git a/backend/src/index.ts b/backend/src/index.ts
index dedfd781..e99513c6 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -79,6 +79,9 @@ app.use(helmet({
   // COOP is only meaningful over HTTPS. Over HTTP the browser logs a warning
   // and ignores it, creating noise in the console with no security benefit.
   crossOriginOpenerPolicy: false,
+  // Origin-Agent-Cluster is only meaningful over HTTPS. Over plain HTTP the
+  // browser logs a warning and ignores it. Disabling removes console noise.
+  originAgentCluster: false,
   hsts: false,
   contentSecurityPolicy: {
     directives: {
@@ -87,7 +90,9 @@ app.use(helmet({
       fontSrc: ["'self'", 'https:', 'data:'],
       formAction: ["'self'"],
       frameAncestors: ["'self'"],
-      imgSrc: ["'self'", 'data:'],
+      // img-src: 'https:' is required for App Store template icons hosted on
+      // external registries (e.g. raw.githubusercontent.com).
+      imgSrc: ["'self'", 'data:', 'https:'],
       objectSrc: ["'none'"],
       scriptSrc: ["'self'"],
       scriptSrcAttr: ["'none'"],
diff --git a/frontend/src/components/ui/chart.tsx b/frontend/src/components/ui/chart.tsx
index d498fbb7..c9c736e3 100644
--- a/frontend/src/components/ui/chart.tsx
+++ b/frontend/src/components/ui/chart.tsx
@@ -63,7 +63,7 @@ const ChartContainer = React.forwardRef<
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
+        <RechartsPrimitive.ResponsiveContainer minWidth={0}>
           {children}
         </RechartsPrimitive.ResponsiveContainer>
       </div>