javascript - style - Se negó a aplicar el estilo en línea porque viola la siguiente directiva de Política de seguridad de contenido
quitar estilos css con jquery (5)
Como dice el mensaje de error, tiene un estilo en línea, que CSP prohíbe. Veo al menos uno ("estilo de lista: ninguno") en su HTML. Pon ese estilo en tu archivo CSS en su lugar.
Para explicar con más detalle, la Política de seguridad del 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 maliciosa ... el navegador no tiene ningún mecanismo para distinguirla de una etiqueta de secuencia de comandos en línea legítima. CSP resuelve este problema al prohibir por completo la secuencia de comandos en línea: Por supuesto."
Entonces, en aproximadamente 1 hora mis extensiones fallaron.
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 está arrojando un error:
Se negó a aplicar el estilo en línea porque viola 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 ''default-src'' se usa como una alternativa.
¿Qué causa este error?
Hice mis cambios en:
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();
});
});
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?
Otro método es usar el CSSOM (Modelo de objetos CSS), a través de la propiedad de style en un nodo DOM.
var myElem = document.querySelector(''.my-selector'');
myElem.style.color = ''blue'';
Más detalles en CSSOM: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style
Como lo mencionaron otros, habilitar unsafe-line para css es otro método para resolver esto.
Puede usar en Content-security-policy agregar "img-src ''self'' data :;" Y use el esquema CSS.No use Inline CSS.Es seguro de los atacantes.
Según http://content-security-policy.com/ El mejor lugar para comenzar:
default-src ''none''; script-src ''self''; connect-src ''self''; img-src ''self''; style-src ''self'' font-src ''self'';
Nunca inserte estilos o scripts en línea, ya que socava el propósito de la CSP. Puede usar una hoja de estilo para establecer una propiedad de estilo y luego usar una función en un archivo .js para cambiar la propiedad de estilo (si es necesario).
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 han señalado otros, esto no se recomienda, y debe colocar todo su CSS en un archivo dedicado. Consulte la explicación de OWASP sobre por qué CSS puede ser un vector de ataques (felicitaciones a @ KayakinKoder por el enlace).