[SOLVED] Refused to apply inline style because it violates the following Content Security Policy directive

Refused to apply inline style because it violates the following Content Security Policy directive

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 suggestion?

Solution

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).