React Router - 内容安全策略指令:“default-src 'self'

IT技术 reactjs react-router
2021-04-22 07:02:06

我正在测试 路由器和我创建了 2 个虚拟组件。主路径工作正常,但是当我尝试转到该/second路径时,出现以下错误:

拒绝执行内联脚本,因为它违反了以下内容安全策略指令:“default-src 'self'”。启用内联执行需要“unsafe-inline”关键字、哈希(“sha256-GBZpdGedoBaq6YBC2+5oO7Dc8WC1XJ5EUI5Md05Lls8=')或随机数(“nonce-...”)。还要注意 'script-src' 没有明确设置,所以 'default-src' 用作后备。

第一个组件

import React, { Component} from 'react'
import ReactDOM from 'react-dom'

const First = () => (<div>Hello 1</div>);
export default First;

第二个组件

import React, { Component} from 'react'
import ReactDOM from 'react-dom'

const Second = () => (<div>Hello 2</div>);

export default Second;

和布局组件

import React, { Component} from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
import First from './first.js';
import Second from './second.js';

class Layout extends Component {
  constructor () {
    super()
    this.state = {
     };
  }
  render(){
    return (
      <Router>
      <div>
        <Route exact path="/" component={First}/>
        <Route path="/about" component={Second}/>
      </div>
      </Router>
    );
  }
  }

const app = document.getElementById('app')
ReactDOM.render(<Layout />, app)

HTML 头

<head>
    <meta charset="utf-8">
    <title>testing</title>
    <meta http-equiv="Content-Security-Policy" content="default-src *; connect-src * ws://* wss://*; style-src * 'unsafe-inline' 'unsafe-eval'; media-src * ; img-src * data:; font-src * ; script-src * 'unsafe-inline' 'unsafe-eval';" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
4个回答

尝试在 webpack.config 中添加“historyApiFallback: true”。它对我有用。

devServer: {
    historyApiFallback: true,
    stats: options.stats,
    hot: true,
    contentBase: './dist',
    watchOptions: {
      ignored: /node_modules/
    }
  }

我通过更改导入的COM的名称来解决错误,因为我使用的是WebRTCChane和WebRTC,这两个COM具有相似的名称,更改后,我成功编译。

我在 package.json 运行脚本中添加了“--history-api-fallback”

{ "start": "webpack-dev-server --mode development --open --history-api-fallback --hot" }

您可以修改 index.html 中的元标记

<meta http-equiv="Content-Security-Policy" content="default-src *; 
connect-src * ws://* wss://*; style-src * 'unsafe-inline' 'unsafe-eval'; media-src * ; 
img-src * data:; font-src * ; script-src * 'unsafe-inline' 'unsafe-eval';" />`
不能在 HTML<head>元素中设置或更改内容安全策略这将是绕过 CSP 提供的安全性的巨大后门。
2021-06-04 07:02:06
我刚刚试过了,它仍然产生同样的错误。我更新了 OP 以显示现在的 html 头部。
2021-06-14 07:02:06
问题来自浏览器脚本中 babel 的工作方式。由于 CSP 对扩展的限制,您必须使用 babel localy 转译 jsx 代码,并且只在您的 html 中添加转译 (js) 文件。babeljs.io/docs/en/babel-cli
2021-06-18 07:02:06