React Router "Content Security Policy directive" error

Question

Trying to learn React Router, get blocker when try to route the login page. I guess it might be:

Problem in Webpack config
Skipped some meta tag
Need to change domain in Windows Host file
Dependencies problem in package.json

General info: All actions are performed locally. No server or custom domain. Just classic localhost:3000.

Steps to reproduce: Adding manually /login to http://localhost:3000

Error:

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-GBZpdGedoBaq6YBC2+5oO7Dc8WC1XJ5EUI5Md05Lls8='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

Screen: login page error

For more visibility here is the github repository - Project link

Webpack.config.js:

var webpack = require('webpack');
var path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
    watch: true,
    module: {
    rules: [
        {
          use: 'babel-loader',
          test: /\.js$/,
          exclude: /node_modules/
        },
        {
            test: /\.scss$/,
            use: [
                "style-loader",
                "css-loader",
                "sass-loader"
            ]
        },
        {
            test: /\.(png|jp?g|gif|svg)$/,
            use: [
                {
                    loader: "url-loader",
                    options: { limit: 40000}
                },
                'image-webpack-loader'
            ]
        }]

    },

    plugins: [
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            historyApiFallback: true,
            files: ['./dist/*.html'],
            server: { baseDir: ['dist'] }
        })
    ]

};

App.js

import React from "react";
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";

import Home from './components/Home/Home';
import Login from './components/Login/Login';

export default () => (

    <BrowserRouter>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/login" component={Login}/>
        </Switch>
    </BrowserRouter>

);

Login.js:

import React, {Component} from 'react';

import './Login.scss'

class Login extends React.Component {

    render() {
        return(
            <div className="container2">
                <h1>Login Page</h1>
            </div>
        )


    }
}

export default Login;

package.json:

{
  "name": "upstar_music",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --progress --colors",
    "start": "webpack && npm run dev"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "faker": "^3.1.0",
    "lodash": "^4.17.2",
    "react": "15.4.1",
    "react-dom": "15.4.1",
    "react-input-range": "^0.9.2",
    "react-redux": "^4.4.6",
    "react-router": "^3.0.0",
    "react-router-dom": "^4.2.2",
    "redux": "^3.6.0",
    "redux-form": "^6.3.2",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "axios": "^0.18.0",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.1.4",
    "babel-preset-react": "^6.16.0",
    "browser-sync": "^2.24.5",
    "browser-sync-webpack-plugin": "^2.2.2",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "image-webpack-loader": "^4.3.1",
    "node-fetch": "^2.1.2",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.13.1",
    "url-loader": "^1.0.1",
    "webpack": "2.2.0-rc.0",
    "webpack-dev-server": "^2.11.2"
  }
}

Index.js:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import '../style/style.scss';


ReactDOM.render(<App />, document.getElementById('root'));

John · Answer 1 · 2018-08-12T13:02:12.420

Content Security Policy (CSP) is giving the violation simply because the CSP does not allow unsafe-inline in the Script src. For React, simply adding the hash (SHA) might not work as React simply load the script (DOM) once, when you navigate to other pages, React simply throws you "Sha-...". Another method you might look into is nonce by providing dynamic nonce. You might be able achieve from what these guys had mentioned https://stackoverflow.com/a/49890126/2875928

score 0 · Answer 2 · answered Dec 14 '20 at 18:04

I was also facing the same problem, if you are using webpack simply add a new key to modules.exports named devServer as

devServer:{ historyApiFallback: true }

sharing my webpack config with devServer for reference my working webpack configuration

for the production, if you are using nginx you can do the configuration to server same html for all requests with path being handled by react on client side.

React Router "Content Security Policy directive" error

2 Answers2