CSP connect-src blocks S3 signed uploads from admin UI

[khoinguyenpham04]

This Roadmap discussion mirrors #205: CSP connect-src blocks S3 signed uploads from admin UI.

Use this discussion to upvote the roadmap item and discuss priority, use cases, and product feedback. Keep implementation tracking, reproduction details, and PR-specific feedback on the source issue.

• Source issue: #205
• Status: Open
• Labels: bug, area/core, roadmap/1.0, roadmap/security
• Original author: davlgd

Original Issue

Description

When using S3-compatible storage (AWS S3, Cloudflare R2, Clever Cloud Cellar, etc.), the admin UI cannot upload media files. The browser blocks the PUT request to the S3 endpoint because it violates the Content Security Policy.

Cause

buildEmDashCsp() in packages/core/src/astro/middleware/auth.ts hardcodes connect-src 'self':

function buildEmDashCsp(marketplaceUrl?: string): string {
    // ...
    return [
        // ...
        "connect-src 'self'",
        // ...
    ].join("; ");
}

When the admin UI uploads media via signed URLs, the browser makes a PUT request directly to the S3 endpoint. This cross-origin request is blocked by the CSP.

The img-src directive already handles external origins (for marketplace), but connect-src does not account for the storage endpoint.

Suggested fix

Add the storage endpoint origin to connect-src (and img-src for displaying uploaded images):

function buildEmDashCsp(marketplaceUrl?: string, storageEndpoint?: string): string {
    const imgSources = ["'self'", "data:", "blob:"];
    const connectSources = ["'self'"];
    if (marketplaceUrl) {
        try {
            imgSources.push(new URL(marketplaceUrl).origin);
        } catch {}
    }
    if (storageEndpoint) {
        try {
            const origin = new URL(storageEndpoint).origin;
            connectSources.push(origin);
            imgSources.push(origin);
        } catch {}
    }
    return [
        "default-src 'self'",
        "script-src 'self' 'unsafe-inline'",
        "style-src 'self' 'unsafe-inline'",
        `connect-src ${connectSources.join(" ")}`,
        "form-action 'self'",
        "frame-ancestors 'none'",
        `img-src ${imgSources.join(" ")}`,
        "object-src 'none'",
        "base-uri 'self'",
    ].join("; ");
}

Then pass the endpoint from the storage config at both call sites:

const marketplaceUrl = context.locals.emdash?.config.marketplace;
const storageEndpoint = (context.locals.emdash?.config.storage?.config as Record<string, unknown>)?.endpoint as string | undefined;
response.headers.set("Content-Security-Policy", buildEmDashCsp(marketplaceUrl, storageEndpoint));

Steps to reproduce

1. Create an EmDash site with S3-compatible storage
2. Build and run in production mode (astro build then node ./dist/server/entry.mjs)
3. Navigate to /_emdash/admin and complete the setup
4. Try to upload a media file from the admin UI
5. Open the browser console — the PUT request to the S3 signed URL is blocked by CSP

Environment

• emdash 0.1.0
• Node.js 24.14.1
• Runtime Node
• OS Linux

Logs / error output

Refused to connect to 'https://xxx.s3-compatible-service.com/bucket-name/file.png?X-Amz-Algorithm=...'
because it violates the document's Content Security Policy.