Lightning does not allow to download a video

Question

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?

Answer 1

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.