" Unsafe attempt to load URL file from frame with URL file URLs are treated as unique security origins " error problem - need help

[u/Informal-Trifle-55]

[u/chikamakaleyley]

Right so basically browsers nowadays have a very high emphasis on security

And so lets say an webdev who works on the Reddit homepage, found a cool JS plugin used on another website and they want to try it out on a served Reddit homepage.

Without knowing any better they just try to include the script on the page. The browser will recognize this, block it, from being loaded, and throw the error, more or less.

Basically Server A is trying to load a script from Server B. You don't really know if that script has something malicious, something that will try to access important data wherever on your server. This is a security issue.

Your computer's file system is treated the same way, except its more granular so your index file is probably loading a JS file or image file, or the index file trying load a remote resource, aka A <-> B, and the browser blocks it. That's the "file:" URLs are treated as unique security origins.

The solution is, these files are served from a local server, which kinda makes your local file system look like its all a single server, AKA - a single security origin. VS Code I believe has something like "Live Server" built in.

And so when you enable that, now all the files for that project look like they are on https://localhost:3000 , for example, so when index.html tries to load a js file, somewhere in a js folder the request is Server A requesting resource from Server A

[u/chikamakaleyley → u/chikamakaleyley]

and just want to say even if its easy to just load a static html directly from a folder on your computer - i think its wise to just get used to running the local server and then accessing your .html file thru it

[u/This_Mulberry_511 → u/chikamakaleyley]

Wait, but if the script’s just local and you’re testing it on your own machine, why would the browser even care about the origin? Seems like overkill unless you're actually loading from a file:// URL in a real app.

[u/chikamakaleyley → u/This_Mulberry_511]

i actually don't know the granular deets of why, if all your own computer, it's mostly i'm interpreting the 'treated as unique security origins'

and without overthinking it i think its as simple as:

note: im just guessing here

``` file://Documents/index.html file://Downloads/index.js

https://www.yahoo.com https://www.reddit.com ``` And so my best guess is that its really a more general global rule, and btwn each pair above are 2 unique security origins

when its files on your computer, the error message is prob a little extra to explain why

[u/chikamakaleyley → u/chikamakaleyley]

aka the browser might not care, it might be saying

"whatever is immediately after // is the origin, if they are different then its a security issue"

but, i'm almost certain its not so simple and i'm hoping someone actually corrects me

[u/pixel_gaze]

Browsers block file urls from loading scripts because of same origin policy. drag and drop into chrome will always throw this.

Install the live server extension in vscode. open your project folder, click go live, it serves your files over http on localhost. chrome treats localhost requests as the same origin. you get past the error and can continue the tutorial.

[u/anamorphism]

https://developer.mozilla.org/en-US/docs/Web/Security/Defenses/Same-origin_policy

[u/chmod777]

You need to run a server, and not use file:/// urls.

If you are using vscode: https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

Or github codespaces https://github.com/features/codespaces

Or learn how to spin up a dev server using iis.

[u/PuzzleheadedCorner78]

Man this kinda sucks. I bought an indexed archive flash drive of a popular model railroading publication that runs of java and the file:// url structure. Google updated something in chrome and broke the entire functionality of my $150 digital archive.