拒绝应用内联样式，因为它违反了以下内容安全策略指令
[英]Refused to apply inline style because it violates the following Content Security Policy directive
问题描述
So, in about 1 hour my extensions failed hard.
所以，在大约 1 小时内，我的扩展失败了。
I was doing my extension and it was doing what I pretended.我正在做我的扩展，它正在做我假装的事情。 I made some changes, and as I didnt liked I deleted them, and now my extension is throwing error:我做了一些更改，因为我不喜欢我删除了它们，现在我的扩展程序抛出错误：
Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'".
What causes this error?是什么导致了这个错误？
I made my changes in:我在以下方面进行了更改：
popup.html弹出窗口.html
<!DOCTYPE html>
<html ng-app="PinIt" ng-csp>
<head>
<link rel="stylesheet" href="css/popup.css">
<script src="js/lib/jquery-1.8.2.min.js"></script>
<script src="js/lib/angular.min.js"></script>
<script src="js/app/app.js"></script>
<script src="js/app/popup.js"></script>
</head>
<body id="popup">
<header>
<h1>PinIt</h1>
</header>
<div ng-controller="PageController">
<div>{{message}}</div>
<h2>Page:</h2>
<div id="elem">{{title}}</div>
<div>{{url}}</div>
<h2>Imagens:</h2>
<ul>
<li ng-repeat="pageInfo in pageInfos" style="list-style: none">
<div class="imgplusshare">
<img src={{pageInfo}} class="imagemPopup"/>
<ul class="imas">
<li id="liFacebook" ng-click="fbshare(pageInfo)">
<span>
<img src="facebook_16.png"/>Facebook
</span>
</li>
<li id="liTwitter" ng-click="twshare(pageInfo)">
<span>
<img src="twitter-bird-16x16.png"/>Twitter
</span>
</li>
<li id="liGooglePlus" ng-click="gpshare(pageInfo)">
<span><img src="gplus-16.png"/>Google+</span>
</li>
<li id="liEmail" ng-click="mailshare(pageInfo)">
<span><img src="mail_icon_16.png"/>Email</span>
</li>
<hr>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
popup.js弹出窗口.js
myApp.service('pageInfoService', function() {
this.getInfo = function(callback) {
var model = {};
chrome.tabs.query({'active': true},
function (tabs) {
if (tabs.length > 0)
{
model.title = tabs[0].title;
model.url = tabs[0].url;
chrome.tabs.sendMessage(tabs[0].id, { 'action': 'PageInfo' }, function (response) {
model.pageInfos = response;
callback(model);
});
}
});
};
});
myApp.controller("PageController", function ($scope, pageInfoService) {
pageInfoService.getInfo(function (info) {
$scope.title = info.title;
$scope.url = info.url;
$scope.pageInfos = info.pageInfos;
$scope.fbshare = function($src) {
chrome.windows.create({url:"http://www.facebook.com/sharer/sharer.php?u="+$src});
};
$scope.twshare = function($src) {
chrome.windows.create({url:"https://twitter.com/intent/tweet?url="+$src});
};
$scope.gpshare = function($src) {
chrome.windows.create({url:"https://plus.google.com/share?url="+$src});
};
$scope.mailshare = function($src) {
chrome.windows.create({url:"mailto:?subject=Imagem Partilhada por PinIt&body=<img src=\""+$src+"\"\\\>"});
};
$scope.$apply();
});
});
Here is my manifest file:这是我的清单文件：
{
"name": "PinIt",
"version": "1.0",
"manifest_version": 2,
"description": "Pin It",
"icons": {
"128": "icon128.png"
},
"browser_action": {
"default_icon": "img/defaultIcon19x19.png",
"default_popup": "popup.html",
"default_title": "PinIt"
},
"content_scripts": [ {
"js": [ "js/lib/jquery-1.8.2.min.js", "js/app/content.js", "js/jquery-ui-1.10.3.custom.js" ],
"matches": [ "*://*/*" ],
"run_at": "document_start"
} ],
"minimum_chrome_version": "18",
"permissions": [ "http://*/*", "https://*/*", "unlimitedStorage", "contextMenus", "cookies", "tabs", "notifications" ],
"content_security_policy": "default-src 'self'"
}
any sugestion?任何建议？
6 个解决方案
解决方案1
91 已采纳 2013-08-25 11:08:50
You can also relax your CSP for styles by adding style-src 'self' 'unsafe-inline';您还可以通过添加style-src 'self' 'unsafe-inline';来放松您的 CSP 样式style-src 'self' 'unsafe-inline';
"content_security_policy": "default-src 'self' style-src 'self' 'unsafe-inline';"
This will allow you to keep using inline style in your extension.这将允许您在扩展中继续使用内联样式。
Important note重要的提示
As others have pointed out, this is not recommended, and you should put all your CSS in a dedicated file.正如其他人指出的那样，不建议这样做，您应该将所有 CSS 放在一个专用文件中。 See the OWASP explanation on why CSS can be a vector for attacks (kudos to @ KayakinKoder for the link).请参阅有关为什么 CSS 可以成为攻击向量的OWASP 解释（感谢 @ KaayakinKoder 提供的链接）。
解决方案2
23 2013-07-21 03:37:44
As the error message says, you have an inline style, which CSP prohibits.正如错误消息所说，您有一个 CSP 禁止的内联样式。 I see at least one ( list-style: none ) in your HTML.我在您的 HTML 中至少看到一个 ( list-style: none )。 Put that style in your CSS file instead.将该样式放在您的 CSS 文件中。
To explain further, Content Security Policy does not allow inline CSS because it could be dangerous.进一步解释一下，内容安全策略不允许内联 CSS，因为它可能很危险。 From An Introduction to Content Security Policy :从内容安全策略介绍：
"If an attacker can inject a script tag that directly contains some malicious payload .. the browser has no mechanism by which to distinguish it from a legitimate inline script tag. CSP solves this problem by banning inline script entirely: it's the only way to be sure."
解决方案3
10
As per http://content-security-policy.com/ The best place to start:根据http://content-security-policy.com/最好的起点：
default-src 'none';
script-src 'self';
connect-src 'self';
img-src 'self';
style-src 'self';
font-src 'self';
Never inline styles or scripts as it undermines the purpose of CSP.切勿内联样式或脚本，因为它会破坏 CSP 的目的。 You can use a stylesheet to set a style property and then use a function in a .js file to change the style property (if need be).您可以使用样式表来设置样式属性，然后使用.js文件中的函数来更改样式属性（如果需要）。
解决方案4
4 2014-11-23 11:01:20
Another method is to use the CSSOM (CSS Object Model), via the style property on a DOM node.另一种方法是通过 DOM 节点上的style属性使用 CSSOM（CSS 对象模型）。
var myElem = document.querySelector('.my-selector');
myElem.style.color = 'blue';
More details on CSSOM: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style更多关于 CSSOM 的细节： https : //developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style
As mentioned by others, enabling unsafe-line for css is another method to solve this.正如其他人所提到的，为 css 启用unsafe-line是解决此问题的另一种方法。
解决方案5
1 2020-05-22 20:06:30
Well, I think it is too late and many others have the solution so far.好吧，我认为为时已晚，到目前为止，许多其他人都有解决方案。
But I hope this can Help:但我希望这可以帮助：
I'm using react for an identity server so 'unsafe-inline' is not an option at all.我正在为身份服务器使用 react，所以“不安全内联”根本不是一个选项。 If you look at your console and actually read the CSP docs, you might find that there are three options for solving the issue:如果您查看您的控制台并实际阅读 CSP 文档，您可能会发现有三个选项可以解决该问题：
'unsafe-inline' as it says is unsafe if your project is using CSPs is for one reason and it is like throwing out the complete policy, will be the same to no have CSP policy at all
'unsafe-inline' 就像它所说的不安全，如果您的项目使用 CSP 是出于一个原因，就像扔掉完整的政策一样，与根本没有 CSP 政策是一样的'sha-XXXCODE' this is good, safe but not optimal because there is a lot of manual work and every compilation the SHA might change so it will become easily a nightmare, use only when the script or style is unlikely to change and there are few references
'sha-XXXCODE' 这是好的，安全但不是最佳的，因为有很多手动工作，每次编译 SHA 可能会改变，所以它很容易变成一场噩梦，只有在脚本或样式不太可能改变并且有很少参考Nonce.
随机数。 This is the winner!这是赢家！
Nonce works in the similar way as scripts Nonce 的工作方式与脚本类似
CSP HEADER ///csp stuff nonce-12331 CSP HEADER ///csp 东西 nonce-12331
<script nonce="12331">
//script content
</script>
Because the nonce in the csp is the same that the tag, the script will be executed因为csp中的nonce和tag是一样的，所以脚本会被执行
In the case of inline styles, the nonce also came in the form of attribute so the same rules apply.对于内联样式，随机数也以属性的形式出现，因此适用相同的规则。
so generate the nonce and put it on your inline scritps所以生成随机数并将其放在您的内联脚本中
If you are using webpack maybe you are using the style-loader如果你正在使用 webpack，也许你正在使用 style-loader
the following code will do the trick以下代码将解决问题
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: 'style-loader',
options: {
attributes: {
nonce: '12345678',
},
},
},
'css-loader',
],
},
],
},
};
解决方案6
-1 2017-10-13 12:20:10
You can use in Content-security-policy add "img-src 'self' data:;"您可以在 Content-security-policy 添加“img-src 'self' data:;” And Use outline CSS.Don't use Inline CSS.It's secure from attackers.并使用大纲 CSS。不要使用内联 CSS。它是安全的，不会受到攻击者的攻击。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.