web-dev-qa-db-ja.com

次のコンテンツセキュリティポリシーディレクティブに違反するため、インラインスタイルの適用を拒否しました

そのため、約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'"
}

疑いはありますか？

javascriptgoogle-chrome-extensioncontent-security-policy
38
João Beirão

style-src 'self' 'unsafe-inline';を追加して、スタイルのCSPを緩和することもできます

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

これにより、拡張機能でインラインスタイルを使用し続けることができます。

重要な注意点

他の人が指摘しているように、これはnot推奨であり、すべてのCSSを専用ファイルに入れる必要があります。 CSSが攻撃の媒介となりうる理由については、 OWASPの説明 を参照してください（リンクについては@ KayakinKoderに感謝します）。

40
Métoule

エラーメッセージが示すように、CSPで禁止されているインラインスタイルがあります。少なくとも1つ（list-style: none）HTMLで。代わりに、CSSファイルにそのスタイルを入れてください。

さらに説明すると、コンテンツセキュリティポリシーはインラインCSSを許可しません。から コンテンツセキュリティポリシーの概要 ：

「攻撃者が悪意のあるペイロードを直接含むスクリプトタグを挿入できる場合、ブラウザには、正当なインラインスクリプトタグと区別するメカニズムがありません。CSPは、インラインスクリプトを完全に禁止することでこの問題を解決します。承知しました。"

15
sowbug

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ファイルでスタイルプロパティを変更します（必要な場合）。

3
user742030

別の方法は、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を有効にすることは、これを解決する別の方法です。

3
sandstrom

Content-security-policyで「img-src 'self' data :;」を追加して使用できます。また、アウトラインCSSを使用します。インラインCSSは使用しないでください。攻撃者から保護されます。

0
Anand Acharya