CSP issues during play livestream with hls.js

Hi guys,
I met this issue while playing livestream with hls.js on Edge.

Refused to load media from 'blob:https://www.liveshopping.gr/2b272e11-375a-408d-8e25-9aa2111a1732' because it violates the following Content Security Policy directive: "media-src *". Note that '*' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches `self`'s scheme. The scheme 'blob:' must be added explicitly.

The domain of my website is

www.liveshopping.gr

and livestreams are from

stream.liveshopping.gr

Even though I have added CSP in general settings of nopcommerce and the meta tag did appear in our web page, but it didn't work on Edge, I don't know if it should configure something on IIS. By the way, without this meta, livestreams feature of our website can play on Firefox, but FF will show CSP warning logs.
This is my meta tag:

<meta http-equiv="Content-Security-Policy" content="default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:; media-src * self 'unsafe-inline' 'unsafe-eval' blob: data: gap:;">

Thanks you very much.

Your current CSP meta tag seems to include 'blob:' in the media-src directive, but it's possible that the browser is not interpreting it correctly??
If you use Edge's developer tools to inspect network requests do you see any additional CSP-related errors or warnings that could provide more insight into the issue?

Does it work in Chrome?

New York wrote:

Yeah, Chrome also has the same problem and I found a issue about CSP on Issues of Network tag.

Content Security Policy of your site blocks some resources
Some resources are blocked because their origin is not listed in your site's Content Security Policy (CSP). Your site's CSP is allowlist-based, so resources must be listed in the allowlist in order to be accessed.
A site's Content Security Policy is set either via an HTTP header (recommended), or via a meta HTML tag.
To fix this issue do one of the following:
(Recommended) If you're using an allowlist for 'script-src', consider switching from an allowlist CSP to a strict CSP, because strict CSPs are more robust against XSS . See how to set a strict CSP .
Or carefully check that all of the blocked resources are trustworthy; if they are, include their sources in the CSP of your site. ⚠️Never add a source you don't trust to your site's CSP. If you don't trust the source, consider hosting resources on your own site instead.
1 directive
Resource  Status  Directive  Source Location
blob  blocked  media-src  34e795a5-b683-415d-9589-28920f5a8745:1

Try just this to see if helps
...media-src 'self' data: blob:;

(Removes *, and the 'unsafe...'s which I believed are ignored for media-src anyway)

New York wrote:

After adjusting with your method, this problem still exists.
I prompted on Copilot, it said that maybe I should need to add Handler Mappings for IIS 10 or change other settings, but I'm not familiar with IIS, do you have any ideas? Thanks!

I'm not sure about the IIS settings.

RE: "A site's Content Security Policy is set either via an HTTP header (recommended)..."
A while back, when I had a CSP issue on a NON-nopCommerce site,  I had to modify the code to set CSP in the HTTP header.  Are you a developer that could modify code?

New York wrote:

Yes, I added this code on that livestream cshtml, but the problem still exists. I'm not sure if it's a suitable code.

Context.Response.Headers.Add("Content-Security-Policy", "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'; frame-src 'self'; font-src 'self'; object-src 'self'; media-src 'self' blob:; frame-ancestors 'self'; form-action 'self'; base-uri 'self'; manifest-src 'self'; worker-src 'self' blob:; child-src 'self';");

Although not a good thing to do, can you try this using *

   media-src * blob:

This problem has been solved. It can play livestream video on our website now, the major reason is there is a wrong CSP configuration on IIS.

Great!  It would be helpful to the community if you would provide more details of the IIS changes you made.