After migrating a media library from Database storage to Azure Blob Storage, image thumbnails do not load in the backend library view. The images may still display on published frontend pages (due to caching or different request paths), but cannot be used for new content. The issue occurs in Sitefinity projects that use a decoupled Next.js renderer where the Sitefinity admin app is accessed through the renderer domain.

Symptoms may include:

• Thumbnails show "Not found" in the backend image library grid view
• Browser console shows Content Security Policy (CSP) violation errors
• Browser console shows ERR_BLOCKED_BY_ORB (Opaque Resource Blocking) errors
• Network requests for thumbnails return (blocked:csp) with 0 bytes transferred
• Network requests for media paths return HTML instead of image content
• No errors appear in the browser console or network tab if the Next.js renderer uses a custom error page that returns HTTP 200 — this masks the actual failure and makes the issue harder to diagnose

This issue is caused by a combination of up to three configuration gaps that must be addressed after migrating media libraries to Azure Blob Storage in a decoupled architecture. The image binaries are migrated successfully to blob storage— the issue is that the browser is prevented from loading them.

After migration, thumbnail and media URLs resolve to new domains and paths that are not covered by the existing Content Security Policy (CSP) and renderer proxy configuration. There are up to three configuration gaps:

1. CSP missing the Azure Blob Storage domain — After migration, thumbnail URLs resolve to the Azure Storage account domain (e.g., <account>.blob.core.windows.net). If this domain is not listed in the CSP img-src directive, the browser blocks all thumbnail requests.

2. CSP 'self' removed from directives — If the WebSecurityConfig.config contains <remove value="'self'" /> in any CSP directives (img-src, script-src, style-src, connect-src), this strips the default same-origin allowance that Sitefinity includes out of the box. This causes the browser to block all resources served from the CMS domain itself, including admin app UI assets, API calls, and internal resources.

3. Next.js renderer not proxying media paths — After migration, Azure Blob Storage media URLs use environment-specific path prefixes (e.g., /media/, /media-staging/, /media-production/). When the Sitefinity admin app is accessed through the renderer domain, thumbnail URLs are constructed using the renderer domain with these media path prefixes. If the Next.js renderer is not configured to proxy these paths to the CMS backend, the renderer returns its own 404 or custom error page instead of the image. If the custom error page returns HTTP 200, the browser does not report any CSP or ORB errors — the thumbnails silently fail to load because the response contains HTML instead of image data. If the renderer returns a standard error response, the browser blocks it with ERR_BLOCKED_BY_ORB because it received HTML when it expected an image.

Apply the following fixes. Depending on the configuration, one, two, or all three may be required.

Fix 1: Add the Azure Blob Storage domain to the CMS CSP configuration

In the project's WebSecurityConfig.config, add the Azure Blob Storage domain and the renderer domain to the img-src directive:

<directives>
    <add name="img-src" config:flags="1">
        <values>
            <!-- Azure Blob Storage domain where media binaries are stored -->
            <add value="<account>.blob.core.windows.net" />
            <!-- Renderer domain (Staging) — required when the admin app is accessed via the CMS domain -->
            <add value="staging.example.com" />
            <!-- Renderer domain (Production) — required when the admin app is accessed via the CMS domain -->
            <add value="www.example.com" />
        </values>
    </add>
</directives>

Replace <account>.blob.core.windows.net with the actual Azure Storage account domain. Include the renderer domain for each environment where the admin app is accessed through the renderer.

Important: Do not include <remove value="'self'" /> in any CSP directive. Removing 'self' strips the default same-origin allowance and breaks the CMS backend. If the config contains these lines, remove them. Sitefinity's built-in defaults will apply automatically.

Fix 2: Add the Azure Blob Storage domain to the Next.js Renderer CSP configuration

If the Next.js renderer sets its own CSP headers (in next.config.js, middleware.ts, or a custom server configuration), add the same Azure Blob Storage domain to the img-src directive in that configuration. Ensure 'self' is retained.

Fix 3: Configure the Next.js renderer to proxy media paths to the CMS backend

The Next.js renderer must be configured to forward media path requests to the CMS backend. There are two approaches:

Approach A (Preferred): Update proxy.ts / middleware.ts

If the project uses a proxy.ts or middleware.ts file that handles CMS path proxying, add the media path prefixes to both the middleware matcher and the CMS paths array.

Add to the middleware matcher regex:

media-staging|media-production|media

Add to the CMS paths array:

cmsPaths.push(
  ...[
    // ... existing paths ...
    "/media/",              // add — adjust per environment
    "/media-staging/",      // add — adjust per environment
    "/media-production/",   // add — adjust per environment
  ],
)

Adjust the path prefixes to match the media path configuration in the Sitefinity project. The prefix is determined by the Azure Blob Storage provider configuration in each environment.

Approach B: Add rewrites in next.config.js

Add rewrite rules in the rewrites() function:

async rewrites() {
  return [
    {
      source: '/media/:path*',
      destination: `${process.env.SF_CMS_URL}/media/:path*`,
    },
    {
      source: '/media-staging/:path*',
      destination: `${process.env.SF_CMS_URL}/media-staging/:path*`,
    },
    {
      source: '/media-production/:path*',
      destination: `${process.env.SF_CMS_URL}/media-production/:path*`,
    },
    // ... existing rewrite rules ...
  ]
}

Note: next.config.js rewrites resolve environment variables at build time. If SF_CMS_URL is not available during the build, a NEXT_PUBLIC_ prefixed variable or a hardcoded CMS domain per environment may be needed. Approach A is preferred because it resolves the destination at runtime.

After applying fixes:

1. Deploy CMS-side changes (for Sitefinity Cloud projects, deploy through the CI.CD pipeline; for self-hosted projects, deploy and restart the application)
2. Deploy renderer-side changes through the renderer hosting pipeline
3. Clear the browser cache and hard-refresh (Ctrl+Shift+R)
4. Verify that thumbnails load correctly in the backend image library
5. Verify that images can be selected and used for new content
6. Test from both the renderer domain (e.g., staging.example.com/Sitefinity) and the CMS domain (e.g., cms.example.com/Sitefinity)

• The media path prefix (e.g., /media/, /media-staging/, /media-production/) is environment-specific and is determined by the Azure Blob Storage provider configuration in the Sitefinity project. Confirm the correct prefix for each environment before applying the proxy configuration.
• If the Next.js renderer uses a custom error page that returns HTTP 200, thumbnail failures may not produce any visible errors in the browser console or network tab. To diagnose, access the Sitefinity backend directly via the CMS domain (bypassing the renderer) or inspect the raw response body of the thumbnail requests to confirm whether the response contains image data or HTML.
• Direct migration from File System storage to Azure Blob Storage is not supported. If media items are stored in the File System, migrate to Database storage first, then to Azure Blob Storage. For more information, see Sitefinity Cloud documentation: Migrate media libraries to Azure Blob Storage https://www.progress.com/documentation/sitefinity-cms/cloud/administration-and-monitoring/migrate-media-libraries-to-azure-blob-storage.
• For Sitefinity Cloud projects where images are missing after restoring a database between environments (not after initial migration), see KB article: [Sitefinity Cloud] Media: Sync Azure Blob Content.

Progress Article(s):

1. [Sitefinity Cloud] Media: Sync Azure Blob Content

References to Other Documentation:

1. Sitefinity Cloud Documentation, Migrate media libraries to Azure Blob Storage https://www.progress.com/documentation/sitefinity-cms/cloud/administration-and-monitoring/migrate-media-libraries-to-azure-blob-storage
2. Sitefinity Cloud Documentation, Blob storage https://www.progress.com/documentation/sitefinity-cms/cloud/administration-and-monitoring/blob-storage
3. Sitefinity Documentation, Configure the security policies and HTTP response headers https://www.progress.com/documentation/sitefinity-cms/administration-configure-the-http-response-headers