Rozszerzenie odmawia załadowania skryptu z powodu dyrektywy Content Security Policy

Poniżej znajduje się mój kod HTML

Skrypty: 

<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/>

I dalej jest js 

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

Plik manifestu: 

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

Zauważyłem, że gdy uruchamiam ten kod po prostu w przeglądarce, alert pojawia się poprawnie, ale gdy uruchamiam go jako rozszerzenie chrome, daje mi następujące błędy.

Uncaught ReferenceError: $ is not defined

I

Odmowa wczytania skryptu " http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js ', ponieważ narusza następującą dyrektywę Content Security Policy: "script-src 'self' chrome-extension-resource:".

Nie rozumiem, co to za błędy. Proszę o pomoc w zrozumieniu rozszerzenia..

Dziękuję

Author: Maharshi, 2014-09-16
Source

2 answers

W rozszerzeniu Chrome Zewnętrzne źródła skryptów muszą być wyraźnie dozwolone przez content security policy (CSP) w manifeście:

Jeśli potrzebujesz zewnętrznych zasobów JavaScript lub obiektowych, możesz rozluźnić zasady w ograniczonym zakresie, umieszczając na białej liście Bezpieczne źródła, z których Skrypty powinny być akceptowane...

Uproszczona definicja polityki, która umożliwia ładowanie zasobów skryptów z example.com przez HTTPS może wyglądać like: 

"content_security_policy":"script-src 'self' https://example.com; object-src 'self'"
Skrypty mogą być ładowane tylko do rozszerzenia przez HTTPS, więc musisz załadować zasób jQuery CDN przez HTTPS: 
<script src="https://ajax.googleapis.com/..."></script>

I dodaj zmodyfikowany CSP do manifestu, aby umożliwić ten zasób 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'"
}

I jeszcze lepszym rozwiązaniem dla konkretnego przypadku byłoby włączenie jQuery do rozszerzenia lokalnie, zamiast ładowania z Internetu (na przykład rozszerzenie nie będzie działać w trybie offline). Wystarczy załączyć kopię jQuery w swoim folder rozszerzenia i odnosić się do niego ze ścieżką względną w znaczniku skryptu. Zakładając, że biblioteka jQuery i wyskakujący plik HTML znajdują się w tym samym podkatalogu, po prostu wykonaj: 

<script src="jquery-x.y.z.min.js"></script>
 52
Author: apsillers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-16 12:21:07 
<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>
 -2
Author: Stanislav,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-13 13:21:23