拒绝应用内联样式，因为它违反了以下内容安全策略指令
因此，在大约1小时内，我的扩展失败了。
我在做我的扩展，它在做我假装的事情。我做了一些更改，由于不喜欢，我删除了它们，现在我的扩展抛出错误：
拒绝应用内联样式，因为它违反了以下内容安全策略指令：“default 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'"
}
有什么建议吗？
共有3个答案
根据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文件中的函数更改样式属性（如果需要）。
正如错误消息所说，您有一个CSP禁止的内联样式。我在您的超文本标记语言中至少看到一个（list-style：无）。将该样式放在CSS文件中。
为了进一步解释，内容安全策略不允许内联CSS，因为它可能是危险的。内容安全政策简介：
"如果攻击者可以注入直接包含恶意负载的脚本标记...浏览器没有将其与合法内联脚本标记区分开来的机制。CSP通过完全禁止内联脚本来解决这个问题：这是唯一确定的方法。"
您还可以通过添加style src“self”“unsafe inline”来放松样式的CSP
"content_security_policy": "default-src 'self' style-src 'self' 'unsafe-inline';"
这将允许您在扩展中继续使用内联样式。
正如其他人所指出的，这是不推荐的，你应该把你所有的CSS放在一个专用文件中。请参阅OWASP关于为什么CSS可以成为攻击载体的解释（链接请访问@KayakinKoder）。
-
我已经在visual studio 2015 professional中创建了新的ASP.NET MVC5项目，并在内容安全策略的布局中添加了元标记，如下所示- 现在，当我运行我的应用程序，我得到以下错误在chrome浏览器控制台- 拒绝应用内联样式，因为它违反了以下内容安全策略指令：“样式-src'self'”。'unsafe-inline'关键字、散列('sha256-cwe3bg0vyqoi
-
问题内容： 当我尝试将我的应用程序部署到5.0.0以上的android系统的设备上时，我一直收到以下错误消息： 07-03 18：39：21.621：D / SystemWebChromeClient（9132）：file：///android_asset/www/index.html：第0行：拒绝加载脚本“ http：// xxxxx ”，因为它违反了以下内容安全策略指令：“ script-sr
-
当我尝试将我的应用程序部署到Android系统高于5.0.0（Lollipop）的设备上时，我不断收到以下错误消息： 07-03 18:39:21.621:D/SystemWebChromeClient（9132）：file:///android_asset/www/index.html: 第0行：拒绝加载脚本的http://xxxxx'因为它违反了以下内容安全策略指令：“script src's
-
我正在学习将Cordova与jquery mobile结合使用，我有以下错误： 拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“默认src“self”数据：间隙：https://ssl.gstatic.com “不安全评估”。启用内联执行需要'unsafe inline'关键字、哈希（'sha256-iacGaS9lJJpFDLww4DKQsrDPQ2lxppM2d2GGnzCeKkU='）
-
我得到了这个错误： 尝试加载mapboxGL地图时。这是我的CSP标签：
-
我尝试通过cryptojs库加密用户数据，并通过ajax发送到服务器，但控制台显示错误： 拒绝加载脚本'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js'，因为它违反了以下内容安全策略指令：脚本-src'自我'https://apis.google.com'不安全评估'。请注意，没有显式设置脚本-src-