拒绝应用内联样式，因为它违反了以下内容安全政策指令 [英] Refused to apply inline style because it violates the following Content Security Policy directive
本文介绍了拒绝应用内联样式，因为它违反了以下内容安全政策指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在做我的扩展，它正在做我所假装的。我做了一些更改，因为我不喜欢我删除它们，现在我的扩展名正在抛出错误：
拒绝应用内联样式，因为它违反了以下
内容安全策略指令：default-src'self'。请注意，
'style-src'未明确设置，所以'default-src'用作
后备。
导致这个错误的原因是什么？
我做了以下更改：
$ b popup.html
<！DOCTYPE html>
< html ng-app =PinItng-csp>
< head>
< link rel =stylesheethref =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>页面：< / h2>
< div id =elem> {{title}}< / div>
< div> {{url}}< / div>
< h2> Imagens：< / h2>
< ul>
< li ng-repeat =pageInfos中的pageInfostyle =list-style：none>
< div class =imgplusshare>
< img src = {{pageInfo}} class =imagemPopup/>
< ul class =imas>
< li id =liFacebookng-click =fbshare（pageInfo）>
< span>
< img src =facebook_16.png/> Facebook
< / span>
< / li>
< li id =liTwitterng-click =twshare（pageInfo）>
< span>
< img src =twitter-bird-16x16.png/> Twitter
< / span>
< / li>
< li id =liGooglePlusng-click =gpshare（pageInfo）>
< span>< img src =gplus-16.png/> Google +< / span>
< / li>
< li id =liEmailng-click =mailshare（pageInfo）>
< span>< img src =mail_icon_16.png/>电子邮件< / span>
< / li>
< hr>
< / ul>
< / div>
< / li>
< / ul>
< / div>
< / body>
< / html>
myApp.service（'pageInfoService'，function（）{
this.getInfo = function（callback）{
var model = {};
chrome如果（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（）;
}）;
}）;
这是我的清单文件：
version：1.0，
manifest_version：2，
description：Pin It，
图标：{
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，
权限：[http：// * / *，https：// * / *，unlimitedStorage，contextMenus，cookies ，通知]，
content_security_policy：default-src'self'
}
任何消化？
解决方案
您也可以通过添加style-src'self''unsafe-inline'来放松您的CSP风格;
content_security_policy：default-src'self'style-src'self''unsafe-inline';
这将允许您在扩展中继续使用内联样式。
重要提示
正如其他人指出的，这是不是建议的，您应该将所有CSS放入一个专用文件。关于CSS为什么可以参见 OWASP解释一个攻击的向量（赞赏@ KayakinKoder的链接）。
So, in about 1 hour my extensions failed hard.
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.
What causes this error?
I made my changes in:
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();
});
});
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?
解决方案
You can also relax your CSP for styles by adding 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. See the OWASP explanation on why CSS can be a vector for attacks (kudos to @ KayakinKoder for the link).
这篇关于拒绝应用内联样式，因为它违反了以下内容安全政策指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
