Content Security Policy blocking script-src - React app

Question

My create-react-app was working fine and after no modification my console displayed Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). (mozilla browser, no error on Chrome).
On both browsers the display is white : I can't see my app content anymore.

./public/index.html file :

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- commented out to solve issue : <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid=string_of_my_key data-blockingmode="auto" type="text/javascript"></script> -->

    <!-- the <meta> I tried to solve my problem : -->
    <meta
        http-equiv="Content-Security-Policy"
        content="script-src 
            'self' 
            'unsafe-inline' 
            'unsafe-eval' 
            https://otherurl.com/ 
            https://*.otherurl2.com/
            "
    />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico?v=2" />
    <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/apple-icon.png" />
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
    <title>My title</title>
</head>

<body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
    <!-- also commented out for when I'll solve the problem <script id="CookieDeclaration" src="https://consent.cookiebot.com/string_of_my_key/cd.js" type="text/javascript" async></script> -->
</body>

</html>

With the help of the MDN doc.

First I did add the 'self' keyword, which made me get an error for each services using something other than http://localhost:3000.
So I did add the corresponding foreign URLs one by one after each error appearing.
After seeing Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”). I added 'unsafe-eval'. It stops showing this error.
Then I have the error I show you in my first sentence. I add 'unsafe-inline' to test but nothing changes.

I did make a new branch, and removed commits one by one to see when the error appears. For each git reset --hard HEAD~1 I see the same error in the browser console.
I tried to compile the /public folder.
No Google result or Sackoverflow helped me for now (searching yesterday afternoon to today right now. I hope I'm just bad at searching)

I never had to deal with this before in my react applications.

UPDATES

I'm using Material-UI, maybe it could influence
I tried to add INLINE_RUNTIME_CHUNK=false to .env file like this, then rebuild and deploy. It didn't change anything
I commented out all recent <a>, and <img required("...") /> tags to make sure I'm not in this case.
EDIT : replace html sample with full index.html code.

score 0 · Answer 1 · answered Apr 03 '21 at 08:29

The CSP errors appeared when I modified the Routes in my App.js.
I wanted to add a route for my new Contact page :

import React from 'react';
import { createBrowserHistory } from 'history';
import { Router, Route, Switch } from 'react-router-dom';
import 'assets/scss/material-kit-react.scss?v=1.9.0';
import { CookiesProvider } from "react-cookie";

import SomeProtectedPage from './views/SomeProtectedPage';
import LoginPage from './views/LoginPage';
import Contact from 'views/Contact';  // my new import
import { store } from 'common';

var hist = createBrowserHistory();

function App() {
  return (
    <CookiesProvider>
      <Provider store={store}>
        <AuthLoading>
          <Router history={hist}>
            <Switch>
              <ProtectedRoute exact component={SomeProtectedPage} path="/page" permit={"user1,admin,user2"} />

              // What I had first
              {someCondition ?
                <Route path="/login" component={LoginPage} />
              : null}

              // How I caused my CSP error
              // I nested two Routes in one <></>
              {someCondition ?
                <>
                  <Route path="/login" component={LoginPage} />
                  <Route path="/contact" component={Contact} />
                </>
              : null}

              // What I should have done
              {someCondition ?
                <Route path="/login" component={LoginPage} />
              : null}
              {someCondition ?
                <Route path="/contact" component={Contact} />
              : null}

            </Switch>
          </Router>
        </AuthLoading>
      </Provider>
    </CookiesProvider>
  );  
}

export default App;

Today's lesson is to never put multiple <Route> together in <> </> tags.

Marco Aurélio Bomfim · Answer 2 · 2021-04-01T13:30:20.563

-1

It seems you're facing the same issue as described here:

Content-Security Policy the pages settings blocked the loading of a resource

Edit: Since you've updated and stated that you are using Material UI, perhaps it is being imported through a CDN. If this is the case, either installing it as a dependency for your project, or removing the tag for the Content Security policy should work.

edited Apr 01 '21 at 13:30

answered Apr 01 '21 at 13:28

Marco Aurélio Bomfim

41
9

Please [avoid link only answers](http://meta.stackoverflow.com/tags/link-only-answers/info). Answers that are "barely more than a link to an external site” [may be deleted](http://stackoverflow.com/help/deleted-answers). – Quentin Apr 01 '21 at 13:29
@Marco Aurélio Bomfim I just tried it by replacing the `meta` tag in the header, but it didn't change anything. And I'm not using Material UI as a CDN, I installed node modules instead. Also, as there is no error telling I can't load scripts from other sites, I'm not sure this S.O. will help me. I also tried to remove entirely the CSP tag but it does display the same error. – OnyJ Apr 01 '21 at 13:52
@OnyJ your CSP seems to be doing two things: - First, it sets a rule to only allow script-srcs from itself, which is fine, if you don't want any inline-scripts from other sources. - Then, you are setting a rule that is allowing all inline-scripts, with 'unsafe-inline'. If you don't have any scripts or styles from outside sources, try removing the unsafe-inline, to ensure that this is not an issue with conflicting rules. Otherwise, please add your html into your question so we can have more information as to what exactly is being imported. – Marco Aurélio Bomfim Apr 01 '21 at 14:04
Well at the beggining I didn't have any rules so I don't thin this is because of a conflict between 'self' and 'unsafe-eval'. Now I removed 'unsafe-eval', I get 3 times this error : `Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”).` and one time with `(“script-src”).`. I'll update my question adding HTML – OnyJ Apr 01 '21 at 17:58

Content Security Policy blocking script-src - React app

2 Answers2