2

Here is the error I am getting:

zced__View_RPG_Flow:1 Refused to load media from 'https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4' because it violates the following Content Security Policy directive: "media-src 'self' *.visualforce.com https://zeddev-dev-ed--c.documentforce.com blob:".

I am getting this when I try to use the following markup inside my lightning component:

<video src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" width="100%" height="100%"></video>

How should I modify my markup in order for it to meet the requirements in Content Security Policy?

3

First, I'd suggest taking the time to understand CSP and how it works including things like which browsers support it. But to summarize, it is a filter you can place on a page's http header to restrict which sites/domains certain content is allowed to be accessed from.

Ostensibly the sites you enable would be your trusted content store or CDN. By trusting the domain of a web site you are not in control of, you are introducing a potential attack vector.

To add a custom domain to the CSP header for you lightning components, you need to add them to the CSP Trusted Sites configuration. In your org go here and add the domain.

  • Setup > Security > CSP Trusted Sites

Once done, accessing your media from the remote site should work.

There is documentation for this feature in the Lightning Components developer guide. There is also a help topic with further information about how this works and precisely what it changes in your CSP header.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.