jquery - the - default src self data gap https ssl gstatic com unsafe eval

La extensión se niega a cargar el script debido a la directiva de Política de seguridad de contenido

Question

El siguiente es mi código de HTML

Guiones:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="background.js"></script>

HTML:

      <button name="btnlogin" id="btnlogin">Login</button><br/><br/>

y siguiente es js

$(document).ready(function(){
document.getElementById("#btnlogin").click(function(){
   alert("s");
 });
});

archivo de manifiesto:

{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a ''browser action'' with kittens.",
 "version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
}

Descubrí que cuando ejecuto este código simplemente en el navegador, la alerta aparece correctamente, pero cuando lo ejecuto como una extensión de Chrome, me da los siguientes errores.

Referencia no detectada Error: $ no está definido

y

Se negó a cargar el script '' http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js '' porque viola la siguiente directiva de Política de seguridad de contenido: "script-src ''self'' chrome -extensión-recurso: ".

No entiendo cuales son estos errores. Por favor ayúdame a entender la extensión ..

Gracias

Answer 1

En una extensión de Chrome, las fuentes de secuencias de comandos externas deben estar explícitamente permitidas por la política de seguridad de contenido (CSP) de la extensión en su manifiesto:

Si necesita algunos recursos de objetos u JavaScript externos, puede relajar la política de forma limitada al incluir en la lista blanca los orígenes seguros desde los que se deben aceptar los scripts ...

Una definición de política relajada que permite que los recursos de script se carguen desde example.com a través de HTTPS podría verse así:

"content_security_policy":"script-src ''self'' https://example.com; object-src ''self''"

Los scripts solo pueden cargarse en una extensión a través de HTTPS, por lo que debe cargar el recurso CDN jQuery a través de HTTPS:

<script src="https://ajax.googleapis.com/..."></script>

Y agregue un CSP modificado a su manifiesto para permitir ese recurso HTTPS:

{
    "manifest_version": 2,
    "name": "One-click Kittens",
    "description": "This extension demonstrates a ''browser action'' with kittens.",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "content_security_policy": "script-src ''self'' https://ajax.googleapis.com; object-src ''self''"
}

Y una solución aún mejor para su caso particular, sin embargo, sería incluir jQuery en su extensión localmente, en lugar de cargar desde Internet (por ejemplo, su extensión actualmente no funcionará sin conexión). Simplemente incluya una copia de jQuery en su carpeta de extensión y consúltela con una ruta relativa en su etiqueta de script. Suponiendo que su biblioteca jQuery y el archivo emergente HTML estén en el mismo subdirectorio, simplemente haga lo siguiente:

<script src="jquery-x.y.z.min.js"></script>

Answer 2

<script nonce=''<?= CSP::getNonce() ?>''>
var oldCreate = document.__proto__.createElement;
document.__proto__.createElement = function (elementName) {      
    var el = oldCreate.apply(this, arguments);
    if (elementName == "script") {           
        el.setAttribute(''nonce'', ''<?= CSP::getNonce() ?>'');
    }
    return el;
}
</script>

<script nonce=''<?= CSP::getNonce()?>'' type="text/javascript" src="/include/jquery.js"></script>