javascript 拒绝应用内联样式，因为它违反了以下内容安全策略指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17766817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Refused to apply inline style because it violates the following Content Security Policy directive
提问by Jo?o Beir?o
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'". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
拒绝应用内联样式，因为它违反了以下内容安全策略指令：“default-src 'self'”。请注意，'style-src' 未明确设置，因此使用 'default-src' 作为后备。
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?
任何建议？
回答by Métoule
You can also relax your CSP for styles by adding 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 notrecommended, and you should put all your CSS in a dedicated file. See the OWASP explanationon why CSS can be a vector for attacks (kudos to @ KayakinKoder for the link).
正如其他人指出的那样，不推荐这样做，您应该将所有 CSS 放在一个专用文件中。请参阅OWASP 解释，了解为什么 CSS 可以成为攻击的载体（感谢@KayakinKoder 提供的链接）。
回答by sowbug
As the error message says, you have an inline style, which CSP prohibits. I see at least one (list-style: none) in your HTML. Put that style in your CSS file instead.
正如错误消息所说，您有一个 CSP 禁止的内联样式。我list-style: none在您的 HTML中至少看到一个 ( )。将该样式放在您的 CSS 文件中。
To explain further, Content Security Policy does not allow inline CSS because it could be dangerous. From An Introduction to Content Security Policy:
进一步解释一下，内容安全策略不允许内联 CSS，因为它可能很危险。从内容安全策略介绍：
"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."
“如果攻击者可以注入一个直接包含一些恶意负载的脚本标签......浏览器没有机制可以将其与合法的内联脚本标签区分开来。CSP 通过完全禁止内联脚本解决了这个问题：这是唯一的方法当然。”
回答by sowbug
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. You can use a stylesheet to set a style property and then use a function in a .jsfile to change the style property (if need be).
切勿内联样式或脚本，因为它会破坏 CSP 的目的。您可以使用样式表来设置样式属性，然后使用.js文件中的函数来更改样式属性（如果需要）。
回答by sandstrom
Another method is to use the CSSOM (CSS Object Model), via the styleproperty on a DOM node.
另一种方法是通过styleDOM 节点上的属性使用 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-linefor css is another method to solve this.
正如其他人所提到的，启用unsafe-linecss 是解决此问题的另一种方法。
回答by Anand Acharya
You can use in Content-security-policy add "img-src 'self' data:;" And Use outline CSS.Don't use Inline CSS.It's secure from attackers.
您可以在 Content-security-policy 添加“img-src 'self' data:;” 并使用大纲 CSS。不要使用内联 CSS。它是安全的，不会受到攻击者的攻击。
回答by Juan Amador
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. If you look at your console and actually read the CSP docs, you might find that there are three options for solving the issue:
我正在为身份服务器使用 react，所以“不安全内联”根本不是一个选项。如果您查看您的控制台并实际阅读 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
'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
Nonce. This is the winner!
'unsafe-inline' 就像它所说的不安全，如果您的项目使用 CSP 是出于一个原因，就像扔掉完整的政策一样，与根本没有 CSP 政策是一样的
'sha-XXXCODE' 这是好的，安全但不是最佳的，因为有很多手动工作，每次编译 SHA 可能会改变，所以它很容易变成一场噩梦，只有在脚本或样式不太可能改变并且有很少参考
随机数。这是赢家！
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',
],
},
],
},
};
