如何解决React Web Extension错误:拒绝应用内联样式,因为它违反了以下内容安全性
我以前曾与React Js
合作,但这是我第一次与之合作,应对网络扩展。
My manifest.json file is:
{
"manifest_version": 2,"name": "owl","author": "zubayr","version": "1.0.1","description": "Testing!","icons": {
"16": "owl.png","48": "owl.png","128": "owl.png"
},"browser_action": {
"default_popup": "index.html","default_title": "Open the popup"
},"permissions": ["storage"]
}
我遇到一个奇怪的错误:Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword,a hash ('sha256-1kri9uKG6Gd9VbixGzyFE/kaQIHihYFdxFKKhgz3b80='),or a nonce ('nonce-...') is required to enable inline execution.
请让我知道出了什么问题。
我的index.html
文件是:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<Meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta name="theme-color" content="#000000" />
<Meta http-equiv="Content-Security-Policy" content="base-uri 'self'; object-src 'none'; script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; style-src 'self'">
<Meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<style>
.myDiv {
border: 50px outset red;
background-color: '#000000';
text-align: center;
}
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
<title>Hoot</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div class="myDiv" width="150" height="60">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<img src="owl.png" alt="owl" width="50" height="60">
</div>
</body>
</html>
另外,当我在开发人员模式下以chrome运行扩展程序时,弹出窗口的大小与图片一样大。我只是似乎无法按照自己的意愿增加其高度-宽度。如果可能的话,也请让我知道其解决方案。
谢谢!
解决方法
Chrome的安全性阻止了create-react-app生成的内联JS。试试这个
在您的React App中,请创建一个.env
或将其添加到现有的
INLINE_RUNTIME_CHUNK=false
然后构建您的应用程序(例如yarn run build
)
使用此方法,不会内联任何大小无关的脚本。
检查此提取请求以获取更多详细信息https://github.com/facebook/create-react-app/pull/5354
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。