Hydrogen - CSP - Video files cannot be loaded

Deutsch Diskussion Technische Fragen & Antworten

Topic summary

A developer is encountering Content Security Policy (CSP) errors when attempting to load video files (webm or mp4) in a Hydrogen app. The browser blocks media-src resources with Shopify’s gid:// URLs.

Current situation:

  • CSP configuration includes various directives for mediaSrc and connectSrc
  • The developer successfully resolved similar issues with 3D model files by using full CDN URLs
  • Same approach isn’t working for video files

Additional challenge:

  • Developer switched to pulling IDs instead of URLs from the CDN
  • Shopify automatically converts webP files to mp4 format, which may not be the desired behavior

Status: The issue remains unresolved. The developer is seeking guidance on proper CSP configuration for video resources and dealing with Shopify’s automatic video format conversion.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hi folks,

When loading meta objects for a video (webm or mp4), my Hydrogen app is having problems.

“Content-Security-Policy: The page’s settings blocked the loading of a resource (media-src) at gid://shopify/Video/…”

Please see attached my current config. For a 3D-Model file, I could make it running by coping the full url string to the cdn… but for the videos it’s not working.

Any idea how I can handle this?

const { nonce, header, NonceProvider } = createContentSecurityPolicy({> fontSrc: [‘https://fonts.gstatic.com’, ‘data:’],> styleSrc: [‘fonts.googleapis.com’, …localDirectives],> connectSrc: [> //“‘self’”,> ‘https://monorail-edge.shopifysvc.com’,> ‘http://localhost:*’,> ‘ws://localhost:',> 'ws://127.0.0.1:’,> ‘ws://.tryhydrogen.dev:’,> ‘https://cdn.shopify.com’,> ‘blob:’,> ‘https://cdn.shopify.com*’,> ‘https://cdn.shopify.com/videos/c/o/v/12345.webm’,> ],> mediaSrc: [> “‘self’”,> ‘https://cdn.shopify.com’,> ‘https://cdn.shopify.com/videos/c/o/v/12345.webm’,> ],

2

OK I pulled the ID instead of the URL from the CDN.
Nevertheless. unfortunately shopify is not providing webP files. They converting them to mp4…

metaobjects(first: 50, type: “hero_banner”) {
nodes {
headerText: field(key: “header_text”) {
value
}
image: field(key: “image”) {
reference {
… on MediaImage {
image {
url
altText
height
width
}
}
}
}
videoMp4: field(key: “video_mp_4”) {
reference {
… on Video {
alt
sources {
url
mimeType
format
}
}
}
}