Question

所以，在大约1小时内，我的扩展失败了。

我正在进行扩展，它正在做我假装的事情。我做了一些更改，因为我不喜欢我删除了它们，现在我的扩展程序正在抛出错误：

拒绝应用内联样式，因为它违反了以下内容内容安全策略指令：“default-src'self'”。注意 'style-src'没有明确设置，因此'default-src'用作a 回退。

导致此错误的原因是什么？

我做了我的更改：

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'"
}

任何消化？

Answer 1

您还可以通过添加style-src 'self' 'unsafe-inline';

来放宽您的CSP样式

"content_security_policy": "default-src 'self' style-src 'self' 'unsafe-inline';"

这样您就可以在扩展程序中继续使用内联样式。

重要提示

正如其他人所指出的那样，建议不，您应该将所有CSS放在专用文件中。请参阅OWASP explanation，了解为什么CSS可以成为攻击的载体（感谢@ KayakinKoder获取链接）。

Answer 2

正如错误消息所示，您有一个内联样式，CSP禁止。我在HTML中看到至少一个（list-style: none）。把那种风格改成你的CSS文件。

为了进一步解释，内容安全策略不允许内联CSS，因为它可能很危险。来自An Introduction to Content Security Policy：

“如果攻击者可以注射一个脚本标记直接包含一些恶意负载.. 浏览器没有机制可以区分它与合法的内联脚本标记。 CSP通过禁止内联脚本解决了这个问题完全：这是唯一的方式肯定“。

Answer 3

另一种方法是通过DOM节点上的style属性使用CSSOM（CSS对象模型）。

var myElem = document.querySelector('.my-selector');
myElem.style.color = 'blue';

有关CSSOM的更多详情： https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style

正如其他人所提到的，为css启用unsafe-line是解决此问题的另一种方法。

Answer 4

根据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文件中的函数来更改样式属性（如果需要）。

Answer 5

嗯，我认为为时已晚，到目前为止，还有许多其他解决方案。

但是我希望这可以有所帮助：

我正在使用身份服务器的React，所以'unsafe-inline'根本不是选项。如果您查看控制台并实际阅读了CSP文档，则可能会发现以下三种解决方案：

'unsafe-inline'，因为如果您的项目使用CSP是出于某种原因，就像抛出了完整的策略，就像完全没有CSP策略一样，它说的不安全
>
1. 'sha-XXXCODE'很好，安全，但不是最佳选择，因为有大量的手工工作，SHA的每次编译都可能更改，因此很容易成为噩梦，仅当脚本或样式为不太可能更改，并且参考文献很少
2. 现在。这是赢家！

Nonce的工作方式与脚本类似

CSP头 /// csp资料nonce-12331

<script nonce="12331">
   //script content
</script>

由于csp中的随机数与标记相同，因此将执行脚本

对于内联样式，随机数也以属性的形式出现，因此适用相同的规则。

因此生成随机数并将其放在您的内联脚本中

如果您使用的是webpack，也许您正在使用样式加载器

以下代码可以解决问题


module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader',
            options: {
              attributes: {
                nonce: '12345678',
              },
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

Answer 6

您可以在Content-security-policy中添加“img-src'self'数据：;” 并使用大纲CSS。不要使用内联CSS。它是安全的攻击者。

拒绝应用内联样式，因为它违反了以下内容安全策略指令

6 个答案:

重要提示