Menu
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?
834
Allow Inline Style Attribute using a hashEither the 'unsafe-inline' keyword, a hash ('sha256-nMxMqdZhkHxz5vAuW/PAoLvECzzsmeAxD/BNwG15HuA='), or a nonce ('nonce-...') is required to enable inline execution.
The Content Security Policy (CSP) prevents cross-site scripting attacks by blocking inline execution of scripts and style sheets. To solve this, move all inline scripts (e.g. onclick=[JS code]) and styles into external files. adding the hash or nonce of the inline script to your CSP header.
'unsafe-inline' allows the execution of unsafe in-page scripts and event handlers that increase the chances of XSS (Cross-Site Scripting).
Allowing inline styles makes you susceptible to a the "other XSS". Cross Site Styling attacks. The idea here is that any places where a user can inject a style attribute into your document they can modify the appearance of your page any way they want.
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.
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).
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
