40
Views
2
Comments
Solved
CSP and blob video
Application Type
Mobile, Reactive

We are trying to use MediaRecorder and ffmpeg.js to realize video recording and cutting. However, when we generate the video url just like 'blob: https://AAA/BBB-CCCC...' and put it to the video element, it doesn't play. We found it is because we have turned on the CSP. Could we use the generated blob url when the CSP is enable? If the blob url is really can't be used...any other ways to realize that function expect put the video binary to database? 

2024-07-12 18-00-30
Tiago Veloso
Solution

Hello, jiangjun,

I'd like to start by saying that I don't consider myself a security expert by any means, so take my answer with a pinch (or a bucket) of salt.

As far as I know, what you're trying to do can be achieved by allowing "blob:" in the media-src directive in LifeTime (if you've never done this, you can follow Apply Content Security Policy).

This, however, will allow ANY "blob:" being included in HTML video/audio tags.
Therefore, it is important to consider the security implications of such a change, like:

  1. Cross-Origin Data Leakage: When you allow “blob:” URLs, you’re permitting content from different origins to be loaded and executed within your application. This can lead to cross-origin data leakage if sensitive data is accessible via the blob URLs.

  2. CSP Bypass: If an attacker can inject malicious content into a blob and load it via a “blob:” URL, they might bypass your Content Security Policy (CSP). This could allow them to execute arbitrary scripts or perform other unauthorized actions.
  3. Privacy Concerns: Blob URLs can be used to store and share data across different pages. If sensitive information is stored in blobs, it could be accessed by other pages or scripts.

Depending on the scope of your application, as well as how you handle these binaries, it may or may not be safe to implement video like this.
For instance, if this blob is stored in the database and can be loaded later on by other users, there is a potential vulnerability that would allow a user to steal the viewer's information, or performing actions as them.
On the other hand, if the blob is only used in the client-side (and potentially even downloaded as a file to the user's local machine), I don't personally see a security issue with this.

If, after analysis, you conclude that the security considerations do apply to your use-case, here are a few ideas of how you could implement it without using blob URLs:

  1. Store the binaries in the database, as you already suggested;
  2. Store the binaries in an S3 bucket (or similar) and use API calls to store/retrieve them as needed;
  3. Store the binaries in a separate, protected webserver and add that server's URL to the media-src directive (much safer than allowing "blob:", since you specify that only content from that specific URL may be loaded in your application).

I hope this was helpful on some level. Let me know if I can clarify or provide more context about anything.


Best regards,
Tiago Veloso



2021-03-29 09-29-45
lu jiangjun

Thanks for your such a detailed solution, we will try some more secure and high-performance solutions.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.