web-dev-qa-db-fra.com

Refuse d'appliquer le style en ligne car il enfreint la directive suivante relative à la politique de sécurité du contenu

Donc, en 1 heure environ, mes extensions ont échoué.

Je faisais mon extension et il faisait ce que je prétendais. J'ai apporté quelques modifications et, comme je n'ai pas aimé, je les ai supprimées, et maintenant mon extension génère une erreur:

A refusé d'appliquer le style inline parce qu'il enfreint le code suivant Directive relative à la sécurité du contenu: "default-src 'self'". Notez que 'style-src' n'a pas été défini explicitement, donc 'default-src' est utilisé en tant que se retirer.

Qu'est-ce qui cause cette erreur?

J'ai effectué mes modifications dans:

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();


        });
    });

Voici mon fichier manifeste:

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

une suggestion?

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

Vous pouvez également assouplir votre CSP pour les styles en ajoutant style-src 'self' 'unsafe-inline';

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

Cela vous permettra de continuer à utiliser le style en ligne dans votre extension.

Note importante

Comme d'autres l'ont fait remarquer, c'est pas recommandé, et vous devriez mettre tous vos CSS dans un fichier dédié. Voir l'explication de OWASP sur la raison pour laquelle CSS peut être un vecteur d'attaques (félicitations à @ KayakinKoder pour le lien).

30
Métoule

Comme le message d'erreur le dit, vous avez un style en ligne, ce que CSP interdit. Je vois au moins un (list-style: none) dans votre code HTML. Mettez ce style dans votre fichier CSS à la place.

Pour expliquer davantage, la politique de sécurité du contenu n'autorise pas les CSS en ligne, car cela pourrait être dangereux. De Introduction à la politique de sécurité du contenu :

"Si un attaquant peut injecter une balise de script Contenant directement des données utiles malveillantes ..., le navigateur Ne dispose d'aucun mécanisme lui permettant de la distinguer d'une balise de script Inline légitime. CSP résout ce problème en interdisant inline script entièrement: c'est la seule façon d'être bien sûr. "

14
sowbug

Selon http://content-security-policy.com/ Le meilleur endroit pour commencer:

default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self' font-src 'self';

Jamais des styles ou des scripts en ligne car cela sape l'objectif de CSP. Vous pouvez utiliser une feuille de style pour définir une propriété de style, puis utiliser une fonction dans un fichier .js pour modifier la propriété de style (si nécessaire).

2
user742030

Une autre méthode consiste à utiliser le modèle CSSOM (CSS Object Model) via la propriété style sur un nœud DOM.

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

Plus de détails sur CSSOM:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style

Comme mentionné par d’autres, activer unsafe-line pour css est un autre moyen de résoudre ce problème.

2
sandstrom

Vous pouvez utiliser dans Content-security-policy, ajouter "img-src 'self' data:;" Et Use outline CSS.Don't utiliser Inline CSS.It est sécurisé contre les attaquants. 

0
Anand Acharya