内容安全策略阻止脚本src-React应用程序

我的create-react-app工作正常，在没有修改后，我的控制台显示Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).(mozilla浏览器，Chrome上没有错误(
在两个浏览器上，显示都是白色：我再也看不到我的应用程序内容了。

./public/index.html文件：

<!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>

在MDN文档的帮助下。

首先，我添加了'self'关键字，这使我在使用http://localhost:3000以外的服务时都会收到一个错误
因此，我确实在每次出现错误后逐一添加了相应的外部URL
看到Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”).后，我添加了'unsafe-eval'。它停止显示此错误
然后我有我在第一句话中给你看的错误。我将'unsafe-inline'添加到测试中，但没有任何更改

我确实创建了一个新的分支，并逐个删除了提交，以查看错误何时出现。对于每个git reset --hard HEAD~1，我在浏览器控制台中都会看到相同的错误
我试图编译/public文件夹
目前没有谷歌搜索结果或Sackoverflow帮助我(从昨天下午搜索到今天。我希望我只是不擅长搜索(

我以前从未在react应用程序中处理过这个问题。

更新

我正在使用Material UI，也许它会影响
我尝试像这样将INLINE_RUNTIME_CHUNK=false添加到.env文件中，然后重新构建和部署。它没有改变任何事情
我注释掉了所有最近的<a>和<img required("...") />标签，以确保我不在这种情况下
EDIT：用完整的index.html代码替换html示例

当我修改App.js中的Routes时，出现了CSP错误
我想为我的新联系人页面添加一条路线：

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;

今天的课程是永远不要将多个<Route>放在<> </>标签中。

您似乎面临着与此处所述相同的问题：

内容安全策略页面设置阻止加载资源

编辑：由于您已经更新并声明您正在使用Material UI，因此它可能是通过CDN导入的。如果是这种情况，将其作为项目的依赖项安装，或者删除内容安全策略的标记都应该有效。

相关内容

最新更新

热门标签：