Dynamically loading script file in background script in Chrome extension - javascript

I have loaded jQuery via the manifest.json and I now want he ability to dynamically load other local scripts (if needed).
I have tried the following
$.getScript(chrome.extension.getURL('script.js'), function () {
console.log("Script loaded")
});
But it gives this error
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-JNPQ...'), or a nonce ('nonce-...') is required to enable inline execution.
How can I fulfill what it asks for?

Related

'self' scripts being blocked from loading, but when I use the nonce they work?

There is probably a simple solution to this, but I can't figure it out.
I have a CSP defined like so:
"Content-Security-Policy: default-src * 'unsafe-inline' 'unsafe-eval' data: blob:; style-src 'unsafe-inline' 'self' cdnjs.cloudflare.com fonts.googleapis.com; script-src www.google-analytics.com cdnjs.cloudflare.com 'self' 'nonce-". $_SESSION['nonce'] . "'; img-src * 'self' data:;object-src 'self' sias.dev:8000; connect-src * 'unsafe-inline'; frame-src 'self' sias.dev:8000 www.google.com;"
The CSP needs to be tweaked a little but is partially working. I need a nonce because I have some legacy sites that have some inline scripts. The nonce is generated dynamically and changed on page loads. However, I ran into an issue where I'm loading some 'self' scripts on a page called via AJAX (not inline, but script src tags. That is probably bad practice, but I don't want to load those except for the page called via ajax.
The strange thing is that I don't have any inline scripts on that page, just script src tags like below, where the nonce is dynamic and matches that in the CSP policy.
<script nonce = "" src="/js/create_dicom/js/plupload.full.min.js"></script>
<script nonce = "" src="/js/create_dicom/js/jquery.ui.plupload.min.js"></script>
<script nonce = "" src="/js/create_dicom/js/main.js"></script>
<script nonce = "" src="/bower/pdfjs/src/pdf.js"></script>
<script nonce = "" src="/bower/pdfjs/src/pdf.worker.js"></script>
When I don't use a nonce, I get:
"Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”)."
When I do use a nonce they load fine and the page works. I thought that you only needed a nonce for inline scripts and not 'self' script. Should I be using strict-dynamic somehow ? I don't need a nonce in the main page for script-src tags. They load fine there ?
Also, the places that I need a nonce are mostly on pages that are loaded via AJAX. Is there are way to refactor things (i.e. putting them in .js files and loading the relevant .js that way). That is kind of a pain because I don't have a script loader and I'd want to load just the relevant js for files loaded via AJAX.
Thanks.
Console err: The page’s settings blocked the loading of a resource at INLINE says then you definitely have an inline script blocked not external, therefore it's nothing to do with 'self'. You can look al right console corner and see script_name:line_number:column where it happens.
In case of lock externall script, the err looks like: The page’s settings blocked the loading of a resource at HTTPS://EXAMPLE.COM/PATH/SCRIPT.JS.
Could be 3 kinds of inline scripts: <script>...<script>, <a href='javascript:void(0)' and <a onclick='evtHandler()'. Firefox does not distinguish these, Chrome is more verbose, so see how it looks this error in Chrome browser.
There are 2 options:
- there is NO error in Chrome - this is good, FF is known by false positive violations
- there is error in Chrome - you have an inline script and Chrome will say which exactly.
Tweak CSP via browser console log is bad practice. You use pdf.min.js, but this script contains a piece of code:
const n = document.createElement("script");
n.src = e;
n.onload = t;
n.onerror = function() {
r(new Error("Cannot load script at: " + n.src))
};
(document.head || document.documentElement).appendChild(n)
which means that some external scripts could be loaded on some conditions. Only God knows what yoy need to press to occur that and from where this script will be loaded.
Therefore a right way (if site have a visitors) is to use the report-uri directive and analyse a violation reports while about 2 weeks.
PS: Just curious - you specify: connect-src * 'unsafe-inline'; so you do have inline scripts somewhere? By the way, 'unsafe-inline' token is not used in the connect-src directive, it will be ignored.

PHP/Apache: Refused to load the google "www.gstatic.com/charts/loader.js" script due to Content Security Policy

I am coding a PHP view that display Google charts, at DocumentRoot of Apache, in a single HTML it works, but when I put the same code inside the PHP page, the browser throws an exception like so:
It happens at calling the script by src tag:
Refused to load the script 'https://www.gstatic.com/charts/loader.js'
because it violates the following Content Security Policy directive: "default-src 'self'".
Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
It happens at in line script, the code is in the page:
Refused to execute inline script because it violates the following Content Security Policy directive:
"default-src 'self'". Either the 'unsafe-inline' keyword,
a hash ('sha256-gCemxHcM8ctzTMqVc2498nRLFHED+rKI4ZaErIVSSk0='),
or a nonce ('nonce-...')
is required to enable inline execution.
Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
My virtualhost is the following: php743.localhost.com
I have been looking for a solution for both inside the app and on Apache, but I could not fix it.
Any ideas?

How to embed a bokeh js plot in a web page with CSP?

The div generated by bokeh uses inline style, giving the error Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-...'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

Chrome extension error when adding script tags to html

My problem is, when developing a chrome extension, I am getting error;
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self' blob:
filesystem: chrome-extension-resource:". Either the 'unsafe-inline'
keyword, a hash
('sha256-+BWoieEB23JsqONQi994gklHUNPq5RCtit+I45ejZPU='), or a nonce
('nonce-...') is required to enable inline execution.
When I try to add to the html.
What can I do?

Why isn't this inline javascript blocked by content security policy?

I have a page that I set the script-src of the content security policy like this:
script-src 'self' *.uservoice.com *.intuit.com ajax.googleapis.com localhost:*
When I load the page with a hard-coded inline script I have created myself to test, it is blocked like expected:
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self'
*.uservoice.com *.intuit.com ajax.googleapis.com localhost:* ". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce
('nonce-...') is required to enable inline execution.
However, when I insert a new script tag dynamically, the script isn't blocked, for example, this still executes:
$("body").append("<script>alert('xss');</script>")
I am using Chrome as the browser here for testing. I was hoping that this script would be blocked as well, since that would really help to prevent xss. Is there something I can change to block this type of script injection as well?
The script you add with append or innerHtml won't be executed unless you use eval(). So it's not violating CSP.
Although this may look like a cross-site scripting attack, the result is harmless. HTML5 specifies that a tag inserted via innerHTML should not execute. 1
See script elements inserted using innerHTML do not execute when they are inserted.

Categories