Webpack dev server React Content Security Policy error

<meta http-equiv="content-security-policy"
react nonce
webpack unsafe-eval
vue js content security policy
webpack-dev-server logging
webpack-dev-server debug
webpack-dev-server ssl
webpack-dev-server write to disk

I have my single page app running on webpack-dev-server. I can load and reload my entry route over at localhost:8080 and it works every time. However i can load localhost:8080/accounts/login only via a link from within the app i.e whenever i reload localhost:8080/accounts/login from the browser refresh button i get

Cannot GET /accounts/login/

as the server response, and on the console i get

Content Security Policy: The page’s settings blocked the loading of a resource at self ("default-src http://localhost:8080"). Source: ;(function installGlobalHook(window) { ....

This is my CSP header on the single page app's index.html

<meta http-equiv="Content-Security-Policy"
  content="default-src * 'self' 'unsafe-inline' 'unsafe-eval'">

I am also not using any devtool on my webpack.config.json. What am i missing.

If you use Webpack in your project, please add output.publicPath = '/' and devServer.historyApiFallback = true in your webpack config file.

More info: React-router urls don't work when refreshing or writting manually

Content Security Policy error using webpack-dev-server · Issue , Content Security Policy error using webpack-dev-server #6139. Closed import ReactDOM from 'react-dom'; import React from 'react';  import ReactDOM from 'react-dom'; import React from 'react'; ReactDOM.render ( <h1>Curve!</h1>, document.getElementById ('root') ); When I start webpack-dev-server and go to localhost:9002 I get the following error: Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src http://localhost:9002”).

I struggled a couple hours to fix this issue. There is a just simple code that you have to add. Just follow the instruction of below. If you face problem to browse from specific url to another url, you will be able to fix that also. If you would like to configure from webpack config file, then write below's code.

devServer: {
    historyApiFallback: true
}

And If you would like to run by cli command, then use the below's code.

"start": "webpack-dev-server --history-api-fallback"

It worked for me. I had not to do anything else to fix this issue like meta tag or something else.

Content Security Policies, Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;. For more information on CSP and nonce attribute, please refer to Further Reading  Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; For more information on CSP and nonce attribute, please refer to Further Reading section at the bottom of this page.

If you're using Rails and Webpacker and get this error, note that the initializer config/initializers/content_security_policy.rb has a Content Security Policy for Rails.env.development. Changing :https to :http on that line solved the error for me. (And remember that localhost is not the same as 127.0.0.1 as far as the CSP is concerned.)

Webpack dev server React Content Security Policy error, publicPath = '/' and devServer.historyApiFallback = true in your webpack config file. More info: React-router urls don't work when refreshing or writting manually  Writing suitable CSP policy may requires some changes to your app build pipeline to fetch and calculate hashes for inline scripts and styles, which are used. CRA is one of the build tools which I

I had similar issue. Had to remove the contentBase line from devServer configuration in webpack.config.js.

This is my webpack.config.js:

var path = require("path");

module.exports = {
  devtool: 'inline-source-map',
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/assets/",
    filename: "bundle.js"
  },
  devServer: {
    port: 9002
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' }
    ]
  }
};

Content Security Policy for Webpack, But there is solution for this problem and it's Content Security Policy. Content Security Policy(CSP) allows a web server to tell a browser in client side development and HTMLWebpackPlugin plugin which also widely used. When webpack bundles your source code, it can become difficult to track down errors and warnings to their original location. For example, if you bundle three source files ( a.js, b.js, and c.js) into one bundle ( bundle.js) and one of the source files contains an error, the stack trace will simply point to bundle.js.

Content Security Policy (CSP) in Create-React-App (CRA), Content Security Policy (CSP) in Create-React-App (CRA) npm install react-​app-rewired customize-cra csp-html-webpack-plugin --save-dev  Issue #2: webpack-dev-server sockjs server accept all connections Everybody is allowed to make a connection to the sockjs server of the dev-server. Implication : The attacker gets access to the

1270157, Summary: Define a Content Security Policy for treeherder.mozilla.org → Define See also bug 1335618 which broke them on the Bugzilla side already. using webpack-dev-server (it would break dev source maps and react-hot-loader) so if​  Make Angular2 works with restrictive Content Security Policy (CSP) - nhenneaux/ng2-cli-webpack-csp

Content Security Policies, Content Security Policies. Edit Document. Webpack is capable of adding nonce to all scripts that it loads. To activate the feature set a __  How to build an e-commerce application with shopping cart and payments easily using Java, JHipster, Spring Boot, React, and Adyen payments. Tagged with java, react, spring, jhipster.

Comments
  • It appears that document is being served with a Content-Security-Policy header which specifies a stricter policy that has default-src http://localhost:8080. If multiple CSP policies are specified, the stricter one always wins. You can override a strict CSP policy specified in one place (e.g., HTTP header) with a more-liberal CSP policy specified somewhere else (e.g., meta element)
  • I have exactly the same problem that you have. Out of sideshowbarkers comment I still don't really get how to solve the issue. Can you maybe point me in some direction by giving me a useful link or explain your solution a bit more detailed?
  • I think you misquoted the answer from the other question already answered, it's: devServer: { historyApiFallback: true, contentBase: './' }