☰

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

tag-icon • tag-icon javascript google-chrome-extension content-security-policy
Refused to apply inline style because it violates the following Content Security Policy directive Ask Question

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?

ベストアンサー1

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推奨されており、すべてのCSSを専用のファイルに配置する必要があります。OWASPの説明CSS が攻撃のベクトルになる理由について (リンクを提供してくれた @KayakinKoder に感謝します)。

おすすめ記事