Develop Reference

Refused to load inline script

I have a local node js server that when I run it on my desktop, website loads correctly. Problem is when I run the server on my laptop I get these errors on opening website.
How can it be that on desktop and on heroku server it's working correctly but not locally on my laptop?
PS: I have never used meta to set CSP or manifest.json or anything like that, as I don't know why it should not work without those settings just like on desktop. I also have a valid SSL certificate created with mkcert just like on my desktop.

As of Chrome 46, inline scripts can be allowed by specifying the base64-encoded hash of the source code in the policy. This hash must be prefixed by the used hash algorithm (sha256, sha384 or sha512).
See this link for more informatio.
If you have a need for some external JavaScript or object resources, you can relax the policy to a limited extent by allowlisting secure origins from which scripts should be accepted.
Your Explorer wants to ensure that executable resources loaded with an extension's elevated permissions are exactly the resources you expect, and haven't been replaced by an active network attacker. As man-in-the-middle attacks are both trivial and undetectable over HTTP, those origins will not be accepted.

Access to another page in same directory yields CORS error with file: URL

I am attempting to build a tiny browser-based app which will run from a file: URL without using a server. (So I can just drop the files on a flash drive, and launch it by just double-clicking the HTML file.) The app needs to read another file, but each approach I attempt to use yields a CORS error.
My two approaches have been:
Make an AJAX request
Load the content into an iframe and try to read the document
which yield the following errors, respectively:
Access to XMLHttpRequest at 'file:///PATHHERE' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
SecurityError: Blocked a frame with origin "null" from accessing a cross-origin frame.
Per MDN's definition of an origin:
Two URLs have the same origin if the protocol, port (if specified), and host are the same for both.
Based on that definition, any file: URL should be same-origin and hence CORS (being cross origin) would not apply.
I found that MDN has a an additional page about file: URLs which states that the desired file must be in the same or subdirectory of the page's file to be considered same-origin. I found that is true for Firefox, but Opera, Chrome, and Safari appear to not follow that idea but rather treat all file: URLs as cross-origin, even if the page is trying to load a copy of itself!
So I could just only use Firefox, except the catch is the file I'm trying to load is a directory and Firefox treats directory listings as cross-origin even if it is a subdirectory of the directory where the original page lives. The error is "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///myapp/subdir. (Reason: CORS request not http)." (Although I would content that it is not cross-origin, therefore shouldn't have to be HTTP.)
So is there any way in any current major browser (preferably Chrome since it would be available everywhere I'd want to use this) to get a directory listing over a file: URL?
And if not, is there any good reason why that's not supported, at least for directories under the folder where the page was loaded from? As in, is there some security reason for it that just isn't obvious to me? Or is it just the general bias against file: URLs? (i.e. that any real app would be hosted on a webserver.)

This is a security feature of internet browsers. Reading a file with file:/// protocol is a big security problem. That is why it is not allowed.
If you still want to read local file in your html page, you can use electron.js - it uses a different approach.
https://electronjs.org/

Does the same origin policy allow you to use ajax to request the current file with the file:// protocol?

If I have an html page I'm loading at the path file://some/path/whatever.html, can javascript in that file download whatever.html and examine it? I know the same origin policy disallows access to other files, but I'm not clear on whether it also bars access to the current file when using the file:// protocol.
In short: does the same origin policy disallow any access to file:// protocol paths?
I looked at mdn's documentation on this, but it doesn't make it clear.

It depends on the browser.
I've been able to do this in Firefox (using AJAX with jQuery, there might be an easier way), but not in Chrome, which doesn't allow access to local files to JavaScript.
EDIT: just learned that you can launch Chrome with the --allow-file-access-from-files parameter, which should enable this behavior.

Javascript/JQuery event for Chrome blocking insecure content

If a page is served over https but the associated files are served from a non-secure http website, Chrome will throw the “insecure content” warning. Is there an event/property that I could be using to know when Chrome has blocked an unsecure content and also know if the user allowed the insecure content. A shield appears at the right of the adress bar when Chrome loads "insecure content" and the user has the possibility to click on this shield and still run the script. Is there any event for this?
Thank you.

The only way I can think to do this would be to serve a file over non-https, that would include a function to run if they allow non-secure content.
This script will obviously only be included if they've allowed the non-secure content to be loaded, and therefore works as your event check. You can therefore also check if these haven't been allowed by storing a global variable in the non-secure file & checking for it in a secure JS file (or within the document).
Obviously, if you're serving content via SSL, you should really ensure all of your content included is also over SSL.

Unsafe JavaScript attempt to access frame in Google Chrome

Our web application (based on HTML5, SVG & JS) runs fine in all the browsers except Google Chrome.
In Google Chrome, the normal javascript events run fine, however, all the javascript events attached to the iFrame are not executed. We get the error in the console:
Unsafe JavaScript attempt to access frame
At the moment, the application is locally hosted and this problem cropped up during inhouse testing.
Googling this brings up lots of posts but none suggests any concrete solution. Any suggestions?

As an additional security measure, Chrome treats every "file" path as its own origin rather than treating the entire "file" scheme as a single origin (which is what other browsers do). This behavior applies only to "file" URLs and you can force Chrome to revert to a single local origin (like other browsers) by passing the --allow-file-access-from-files switch at startup.
You can find more information on the risks associated with local origins described here: http://blog.chromium.org/2008/12/security-in-depth-local-web-pages.html

Please make sure that both the iframe and main page are using the same protocol (i.e. both https or both http, but not mixed) and are on the same domain (i.e. both www.example.com and not example.com and dev.example.com). Also there's the possibility that something tries to use the file:// protocol, which will also cause this message.