Se negó a aplicar el estilo en línea porque viola la siguiente directiva de Política de seguridad de contenido

Question 1

Entonces, en aproximadamente 1 hora, mis extensiones fallaron mucho.

Estaba haciendo mi extensión y estaba haciendo lo que pretendía. Hice algunos cambios, y como no me gustaban, los eliminé, y ahora mi extensión arroja un error:

Se negó a aplicar el estilo en línea porque infringe la siguiente directiva de Política de seguridad de contenido: “default-src ‘self'”. Tenga en cuenta que ‘style-src’ no se estableció explícitamente, por lo que se usa ‘default-src’ como alternativa.

¿Qué causa este error?

Hice mis cambios en:

ventana emergente.html

<!DOCTYPE html>
<html ng-app="PinIt" ng-csp>
    <head>
        <link rel="stylesheet" href="https://stackoverflow.com/questions/17766817/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>

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


        });
    });

Aquí está mi archivo de manifiesto:

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

alguna sugerencia?

Question 2

También puede relajar su CSP para estilos agregando style-src 'self' 'unsafe-inline';

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

Esto le permitirá seguir usando el estilo en línea en su extensión.

Nota IMPORTANTE

Como otros han señalado, esto es no recomendado, y debe poner todo su CSS en un archivo dedicado. Ver el Explicación OWASP sobre por qué CSS puede ser un vector de ataques (felicitaciones a @KayakinKoder por el enlace).

Question 3

Como dice el mensaje de error, tiene un estilo en línea que CSP prohíbe. Veo al menos uno (list-style: none) en su HTML. Pon ese estilo en tu archivo CSS en su lugar.

Para explicar más, la Política de seguridad de contenido no permite CSS en línea porque podría ser peligroso. De Una introducción a la política de seguridad de contenido:

“Si un atacante puede inyectar una etiqueta de secuencia de comandos que contiene directamente alguna carga útil maliciosa… el navegador no tiene ningún mecanismo para distinguirlo de una etiqueta de secuencia de comandos en línea legítima. CSP resuelve este problema al prohibir la secuencia de comandos en línea por completo: es la única forma de ser Por supuesto.”

Question 4

según http://política-de-seguridad-del-contenido.com/ El mejor lugar para empezar:

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

Nunca estilos o scripts en línea, ya que socava el propósito de CSP. Puede usar una hoja de estilo para establecer una propiedad de estilo y luego usar una función en un .js archivo para cambiar la propiedad de estilo (si es necesario).

Question 5

Otro método es utilizar el CSSOM (CSS Object Model), a través de la style propiedad en un nodo DOM.

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

Más detalles sobre CSSOM:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style

Como han mencionado otros, permitir unsafe-line for css es otro método para resolver esto.

Question 6

Puede usar en Content-security-policy agregar “img-src ‘self’ data:;” Y use CSS de contorno. No use CSS en línea. Está seguro de los atacantes.

Question 7

Bueno, creo que es demasiado tarde y muchos otros tienen la solución hasta ahora.

Pero espero que esto pueda ayudar:

Estoy usando reaccionar para un servidor de identidad, por lo que ‘inseguro en línea’ no es una opción en absoluto. Si observa su consola y lee los documentos de CSP, es posible que encuentre que hay tres opciones para resolver el problema:

‘inseguro en línea’, como dice, no es seguro si su proyecto usa CSP es por una razón y es como descartar la política completa, será lo mismo que no tener ninguna política de CSP
1. ‘sha-XXXCODE’ esto es bueno, seguro pero no óptimo porque hay mucho trabajo manual y cada compilación, el SHA puede cambiar, por lo que se convertirá fácilmente en una pesadilla, utilícelo solo cuando es poco probable que cambie el script o el estilo y hay pocas referencias
2. Mientras tanto. ¡Este es el ganador!

Nonce funciona de manera similar a los scripts.

CSP HEADER ///csp cosas nonce-12331

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

Debido a que el nonce en el csp es el mismo que la etiqueta, se ejecutará el script

En el caso de los estilos en línea, el nonce también vino en forma de atributo, por lo que se aplican las mismas reglas.

así que genere el nonce y póngalo en sus scripts en línea

Si está utilizando un paquete web, tal vez esté utilizando el cargador de estilo

el siguiente código hará el truco


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

Nota IMPORTANTE

¿Ha sido útil esta solución?