拒绝应用内联样式，因为它违反了以下内容安全策略指令
Refused to apply inline style because it violates the following Content Security Policy directive
因此，在大约1个小时内，我的扩展严重失败。
我在做我的分机，它在做我假装的事情。我做了一些更改，由于我不喜欢，我删除了它们，现在我的扩展出现了错误：
拒绝应用内联样式，因为它违反了以下内容内容安全策略指令：；默认src"self"；。请注意未显式设置"style-src"，因此将"default-src"用作后退。
导致此错误的原因是什么？
我在中进行了更改
popup.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
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();
});
});
这是我的清单文件：
{
"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'"
}
有什么建议吗？
您还可以通过添加style-src 'self' 'unsafe-inline'; 来放松样式的CSP
"content_security_policy": "default-src 'self' style-src 'self' 'unsafe-inline';"
这将允许您在扩展中继续使用内联样式。
重要提示
正如其他人所指出的，这是不推荐的，您应该将所有CSS放在一个专用文件中。请参阅OWASP解释为什么CSS可以成为攻击的载体（向@KayakinKoder致敬）。
正如错误消息所说，您有一个内联样式，CSP禁止这种样式。我在您的HTML中至少看到一个（list-style: none）。将该样式放在CSS文件中。
为了进一步解释，内容安全策略不允许内联CSS，因为它可能很危险。从内容安全策略简介：
"如果攻击者可以注入直接包含一些恶意负载的脚本标记。。这个浏览器没有将其与合法浏览器区分开来的机制内联脚本标记。CSP通过禁止内联脚本解决了这个问题完全：这是唯一的方式当然"
根据http://content-security-policy.com/最佳起点：
default-src 'none';
script-src 'self';
connect-src 'self';
img-src 'self';
style-src 'self';
font-src 'self';
永远不要内联样式或脚本，因为它会破坏CSP的目的。您可以使用样式表设置样式属性，然后使用.js文件中的函数更改样式属性（如果需要）。
另一种方法是通过DOM节点上的style属性使用CSCOM（CSS对象模型）。
var myElem = document.querySelector('.my-selector');
myElem.style.color = 'blue';
有关CSSOM的更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style
正如其他人所提到的，为css启用unsafe-line是解决这一问题的另一种方法。
好吧，我认为已经太晚了，很多其他人到目前为止都有解决方案。
但我希望这能有所帮助：
我使用react作为身份服务器，所以"不安全内联"根本不是一个选项。如果您查看控制台并实际阅读CSP文档，您可能会发现有三种解决问题的选项：
-
"不安全的内联"，正如它所说的是不安全的，如果你的项目使用CSP是因为一个原因，这就像抛出了完整的策略，将是相同的，根本没有CSP策略
-
"sha XXXCODE"这是好的，安全的，但不是最佳的，因为有很多手动工作，每次编译sha都可能更改，所以它很容易成为一场噩梦，只有当脚本或样式不太可能更改并且很少引用时才使用
-
Nonce。这是赢家！
-
Nonce的工作方式与脚本类似
CSP收割台///csp物料编号-1331
<script nonce="12331">
//script content
</script>
因为csp中的nonce与标记相同，所以脚本将执行
在内联样式的情况下，nonce也以属性的形式出现，因此适用相同的规则。
所以生成nonce并将其放在您的内联代币上
如果你正在使用webpack，也许你正在使用样式加载器
下面的代码将完成
module.exports = {
module: {
rules: [
{
test: /'.css$/i,
use: [
{
loader: 'style-loader',
options: {
attributes: {
nonce: '12345678',
},
},
},
'css-loader',
],
},
],
},
};
您可以在内容安全策略中使用add"img src'self'data:；"并且使用大纲CSS。不要使用内联CSS。它是安全的，不会受到攻击者的攻击。
如果您有一些内容无法避免内联css，例如REST API响应
或用户输入。在这种情况下，我在下面的博客中创建了的解决方案。在这里，您可以将html和css彼此分离，并尝试从html元标签头添加nonce值（将在构建时生成）
使用nonce 的内联css的CSP处理
- 内容安全策略:页面's设置阻止加载资源
- 导致内容安全策略(CSP）冲突错误的本地jquery.js文件
- 旋转木马;启用内容安全策略时无法工作
- Extjs、Chrome扩展和内容安全策略
- 内容安全策略指令:;脚本src'self'blob:文件系统:chrome扩展资源:“;获取是否时
- 内容安全策略:无法在Chrome扩展中加载Google API
- 手动加载JQuery而不触发内容安全策略
- chrome扩展的内容安全策略问题
- WebGL CORS:试图突破用户代理的安全策略
- 跨站点 XMLHttpRequest 内容安全策略指令解决方法
- 内容安全策略指令:“script-src 'self' 'unsafe-eval'”
- Chrome 扩展程序“拒绝加载脚本，因为它违反了以下内容安全策略指令”
- 拒绝执行 JavaScript URL，因为它违反了以下内容安全策略指令:
- 在一个简单的网站上违反了内容安全策略指令
- REST API错误:拒绝连接到..因为它违反了以下内容安全策略指令:
- 没有内联脚本，仍然得到"由于内容安全策略指令而被拒绝:“;脚本src'self'&”;
- 拒绝应用内联样式，因为它违反了以下内容安全策略指令
- Javascript抛出:拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令:"script-src
- 拒绝加载脚本，因为它违反了以下内容安全策略指令
- 如何摆脱内容安全策略指令问题
