Content Security Policy blocks video on React-CodePudding

I'm getting the following error when trying to display a video preview on my React app.

Refused to load media from 'data:video/mp4;base64,...' because it violates the following Content Security Policy directive: "default-src ". Note that 'media-src' was not explicitly set, so 'default-src' is used as a fallback. Note that '' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches self's scheme. The scheme 'data:' must be added explicitly.

The thing is, that I'm not getting the Data Url fom any server, just from a file that the user chooses, so I don't understand why CSP has a problem with that...?

Here is my JSX implementation:

img.type === "video" && (
      <video controls>
        <source type="video/mp4" src={img.file} />
      </video>

And that's my Helmet configuration (in my Node.js server):

    app.use(
     helmet.contentSecurityPolicy({
      useDefaults: true,
      directives: {
       "img-src": ["'self'", "https: data:"],
       "media-src": ["*", "'self'", "https:", "data:"],
       "connect-src": [
         "'self'",
         "https://countriesnow.space/api/v0.1/countries",
       ],
     },
   })
 );

I'm not sure what's the problem here... Thanks for helping!

CodePudding user response：

You could try to use the alternate way of defining the directives that they show in the docs: https://helmetjs.github.io/

A lot of the non-docs sites that I found when researching this also use this method of defining the directives:

app.use(
   helmet.contentSecurityPolicy({
      useDefaults: true,
      imgSrc: ["'self'", "https: data:"],
      mediaSrc: ["*", "'self", "https:", "data:"],
      connectSrc: [...]
   }));

Seems silly that that would make a difference, but stranger things...

CodePudding user response：

OK, so just to update, I found the problem, and it was a very silly one.. Apparently when you create a react app with create-react-app, they set CSP as meta settings in the index.html file and I didn't set the media-src over there. when I did, it worked just fine...

Thank for the answers!