it-swarm.dev

رفض تطبيق النمط المضمن لأنه ينتهك التوجيه التالي لسياسة أمان المحتوى

لذلك ، في حوالي 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'"
}

أي شفط؟

38
João Beirão

يمكنك أيضًا الاسترخاء في ملف CSP الخاص بك عن طريق إضافة style-src 'self' 'unsafe-inline';

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

سيتيح لك ذلك الاستمرار في استخدام النمط المضمن في الإضافة.

ملاحظة مهمة

كما أشار آخرون ، هذا غير مستحسن ، ويجب وضع كل CSS في ملف مخصص. راجع شرح OWASP حول سبب كون CSS عبارة عن ناقل للهجمات (مجد إلى @ KayakinKoder للرابط).

40
Métoule

كما تقول رسالة الخطأ ، لديك نمط مضمّن ، والذي يحظره CSP. أرى واحدة على الأقل (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

هناك طريقة أخرى تتمثل في استخدام CSSOM (CSS Object Model) ، عبر الخاصية style على عقدة DOM.

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

مزيد من التفاصيل حول CSSOM: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style

كما ذكر الآخرون ، تمكين unsafe-line ل CSS هي طريقة أخرى لحل هذا.

3
sandstrom

يمكنك استخدام إضافة محتوى "img-src" الذاتي في سياسة أمن المحتوى: "" واستخدام المخطط التفصيلي CSS. لا تستخدم Inline CSS.It آمن من المهاجمين.

0
Anand Acharya