114 votes

Refus d'appliquer le style en ligne car il viole la directive suivante de la politique de sécurité du contenu

Donc, en une heure environ, mes extensions se sont effondrées.

Je faisais mon extension et il faisait ce que je prétendais. J'ai fait quelques changements, et comme je n'ai pas aimé, je les ai supprimés, et maintenant mon extension jette des erreurs :

Refusé d'appliquer le style inline parce qu'il enfreint directive de la politique de sécurité du contenu : "default-src 'self'". Notez que style-src' n'a pas été explicitement défini, donc 'default-src' est utilisé en tant que solution de repli.

Quelle est la cause de cette erreur ?

J'ai fait mes changements 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 ?

120voto

Métoule Points 2886

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.

Remarque importante

Comme d'autres l'ont souligné, c'est no recommandé, et vous devriez mettre toutes vos CSS dans un fichier dédié. Voir le Explication de l'OWASP sur les raisons pour lesquelles CSS peut être un vecteur d'attaques (bravo à @ KayakinKoder pour le lien).

29voto

sowbug Points 3049

Comme le dit le message d'erreur, vous avez un style en ligne, ce que CSP interdit. Je vois au moins un ( list-style: none ) dans votre 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 ils peuvent être dangereux. À partir de Introduction à la politique de sécurité du contenu :

"Si un attaquant peut injecter un script qui contient directement une charge utile malveillante le navigateur ne dispose d'aucun mécanisme lui permettant de la distinguer d'une balise en ligne légitime. balise script en ligne légitime. La CSP résout ce problème en interdisant les balises script en ligne. entièrement : c'est la seule façon d'être sûr."

10voto

Conformément à 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';

Ne jamais mettre en ligne des styles ou des scripts car cela nuit à l'objectif de CSP. Vous pouvez utiliser une feuille de style pour définir une propriété de style et ensuite utiliser une fonction dans une balise .js pour modifier la propriété du style (si nécessaire).

5voto

sandstrom Points 2420

Une autre méthode consiste à utiliser le CSSOM (CSS Object Model), via l'option style sur un nœud du DOM.

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

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

Comme d'autres l'ont mentionné, permettre unsafe-line pour css est une autre méthode pour résoudre ce problème.

1voto

Juan Amador Points 95

Eh bien, je pense qu'il est trop tard et que beaucoup d'autres ont la solution jusqu'à présent.

Mais j'espère que cela peut aider :

J'utilise react pour un serveur d'identité, donc 'unsafe-inline' n'est pas du tout une option. Si vous regardez votre console et que vous lisez la documentation de la CSP, vous constaterez qu'il existe trois options pour résoudre le problème :

  1. "unsafe-inline", comme il est dit, n'est pas sûr si votre projet utilise des CSP, c'est pour une seule raison et cela revient à jeter la politique complète, ce serait la même chose que de ne pas avoir de politique de CSP du tout.

    1. 'sha-XXXCODE' c'est bon, sûr mais pas optimal car il y a beaucoup de travail manuel et à chaque compilation le SHA peut changer donc cela deviendra facilement un cauchemar, à utiliser seulement quand le script ou le style est peu susceptible de changer et qu'il y a peu de références.

    2. Nonce. C'est le gagnant !

Nonce fonctionne de la même manière que scripts.

EN-TÊTE CSP ///csp stuff nonce-12331

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

Parce que le nonce dans le csp est le même que celui du tag, le script sera exécuté.

Dans le cas des styles en ligne, le nonce se présente également sous la forme d'un attribut et les mêmes règles s'appliquent.

générez donc le nonce et mettez-le dans vos scripts en ligne.

Si vous utilisez webpack, vous utilisez peut-être le style-loader

le code suivant fera l'affaire

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X