如何在Reactjs中实现CSP内容安全策略？
如何在Reactjs中实现CSP内容安全策略？
提问于 2022-10-13 17:41:20
我想在React应用程序中的html页面中添加csp作为元标记。
我已经用Project.
- Inside客户端应用程序文件夹结构创建了ASP.NET
- ，它使用了创建反应应用演示。
- ，然后我在index.html
中添加了这个元标记。
这是元标记代码；但是在使用此代码时，我会出错。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self'; script-src 'self'; connect-src 'self'; ">下面是错误消息：
styleTagTransform.js:12 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-aw/cuq+oNW2VmZeRKB38rTQ+6lr2Wol35x/gNAPQqbk='), or a nonce ('nonce-...') is required to enable inline execution.将添加样式作为内联响应
<!-- language: lang-html -->
<html lang="en"><head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self'; script-src 'self'; connect-src 'self'; ">
<script defer="" src="/static/js/bundle.js"></script><style>/*!
<style>.css1{color:red'}</style>
<style>.css2{color:red'}</style>
<title>Project2</title>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"><div><header><nav class="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3 navbar navbar-light"><div class="container"><a class="navbar-brand" href="/">Project2</a><button aria-label="Toggle navigation" type="button" class="mr-2 navbar-toggler"><span class="navbar-toggler-icon"></span></button><div class="d-sm-inline-flex flex-sm-row-reverse collapse navbar-collapse"><ul class="navbar-nav flex-grow"><li class="nav-item"><a class="text-dark nav-link" href="/">Home</a></li><li class="nav-item"><a class="text-dark nav-link" href="/counter">Counter</a></li><li class="nav-item"><a class="text-dark nav-link" href="/fetch-data">Fetch data</a></li></ul></div></div></nav></header><div class="container"><div><h1>Hello, world!</h1><p>Welcome to your new single-page application, built with:</p><ul><li><a href="https://get.asp.net/">ASP.NET Core</a> and <a href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side code</li><li><a href="https://facebook.github.io/react/">React</a> for client-side code</li><li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li></ul><p>To help you get started, we have also set up:</p><ul><li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li><li><strong>Development server integration</strong>. In development mode, the development server from <code>create-react-app</code> runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.</li><li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and your <code>dotnet publish</code> configuration produces minified, efficiently bundled JavaScript files.</li></ul><p>The <code>ClientApp</code> subdirectory is a standard React application based on the <code>create-react-app</code> template. If you open a command prompt in that directory, you can run <code>npm</code> commands such as <code>npm test</code> or <code>npm install</code>.</p></div></div></div></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body></html>
<!-- end snippet -->还在package.json中添加了这段代码，但没有工作。
INLINE_RUNTIME_CHUNK=true
- SET INLINE_RUNTIME_CHUNK=false
- 集
注意: css代码很大，因此删除并添加了普通语法。
<style>.css1{color:red'}</style>.css2{颜色:红色}
回答 1
Stack Overflow用户
发布于 2022-10-14 06:52:31
从提供的输入来看，问题似乎是js文件styleTagTransform.js添加了内联js。如果不允许脚本使用“不安全内联”，则可能需要重写或替换此文件以更改行为。如果该样式不发生变化，它可能会添加该样式的散列，但您应该在不同的浏览器中检查该解决方案。
其他内联样式标记，如
<style>.css1{color:red'}</style>
<style>.css2{color:red'}</style>要么移动到.css文件，要么尝试将所有内联样式收集到一个或几个标记中，然后允许每个标记的散列，浏览器会告诉您。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74059778
复制相关文章
相似问题
腾讯云开发者
