95

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

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

拒绝应用内联样式,因为它违反了以下内容安全策略指令:“default-src 'self'”。请注意,'style-src' 没有明确设置,所以 'default-src' 用作后备。

是什么导致了这个错误?

我在以下方面进行了更改:

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

有什么建议吗?

4

6 回答 6

106

您还可以通过添加来放松 CSP 的样式style-src 'self' 'unsafe-inline';

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

这将允许您在扩展程序中继续使用内联样式。

重要的提示

正如其他人指出的那样,建议这样做,您应该将所有 CSS 放在一个专用文件中。请参阅OWASP 解释,了解为什么 CSS 可以成为攻击的媒介(感谢 @KayakinKoder 获取链接)。

于 2013-08-25T11:08:50.197 回答
26

正如错误消息所说,你有一个 CSP 禁止的内联样式。list-style: none我在您的 HTML中至少看到一个 ( )。而是将该样式放在您的 CSS 文件中。

进一步解释,内容安全策略不允许内联 CSS,因为它可能很危险。从内容安全策略简介

“如果攻击者可以注入直接包含一些恶意负载的脚本标签......浏览器没有将其与合法的内联脚本标签区分开来的机制。CSP 通过完全禁止内联脚本来解决这个问题:这是唯一的方法当然。”

于 2013-07-21T03:37:44.080 回答
10

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

于 2015-11-19T22:15:00.047 回答
5

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

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

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

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

于 2014-11-23T11:01:20.513 回答
0

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

于 2017-10-13T12:20:10.423 回答
0

好吧,我认为为时已晚,到目前为止,许多其他人都有解决方案。

但我希望这可以帮助:

我正在为身份服务器使用反应,所以“不安全内联”根本不是一个选项。如果您查看控制台并实际阅读 CSP 文档,您可能会发现解决问题的方法有以下三种:

  1. 'unsafe-inline' 正如它所说,如果您的项目使用 CSP 是不安全的,这是出于一个原因,它就像抛弃完整的策略一样,与根本没有 CSP 策略相同

    1. 'sha-XXXCODE' 这很好,安全但不是最佳的,因为有很多手动工作,每次编译 SHA 可能会改变,所以它很容易成为一场噩梦,只有在脚本或样式不太可能改变并且有很少参考

    2. 随机数。这是赢家!

Nonce 的工作方式与脚本类似

CSP 头 ///csp 的东西 nonce-12331

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

因为csp中的nonce和tag是一样的,所以脚本会被执行

对于内联样式,nonce 也以属性的形式出现,因此适用相同的规则。

所以生成随机数并将其放在你的内联脚本上

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

以下代码可以解决问题


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

于 2020-05-22T20:06:30.040 回答