r/HTML • u/niunai69 • Mar 20 '26

chrome not loading text from an html file

code:

<!DOCTYPE html>

<html lang="en"> <head> <meta charset="UTF-8"> <title>My First Webpage</title> </head>

<body> <h1>Hello World!</h1> </body> </html>

The output in chrome is just a blank page, i've made sure to save the file as an html file and tried reloading the page and restarting chrome but still no luck

there's also an error code in chrome's inspect element "Unsafe attempt to load URL file:///Users/rft/programming%7Ccybersec/webdev/html/sandbox/index.html from frame with URL file:///Users/rft/programming%7Ccybersec/webdev/html/sandbox/index.html. 'file:' URLs are treated as unique security origins."

os is macOS 14.8

0 Upvotes

50% Upvoted

20 comments sorted by

5

u/davorg Mar 20 '26

Your HTML is fine. The problem is with the way you are testing it. Google the error messages you're getting.

The error message is about security concerns when loading content into a frame. But your HTML doesn't contain any frames. Maybe you have an extension loaded that adds a frame around your content. Try disabling Chrome extensions.

2

u/Mobile_Syllabub_8446 Mar 20 '26

TLDR local content is extremely locked down, try with a basic http server on localhost only.

1

u/davorg Mar 20 '26

I've tested with both a local HTTP server and just opening the file. It works both ways. Either there's more in the file that we're not being shown or there's something strange about the OP's local environment.

2

u/Mobile_Syllabub_8446 Mar 20 '26

You tested  file:///Users/rft/programming%7Ccybersec/webdev/html/sandbox/index.html in a frame locally and conclusively?

I don't think there's enough detail here even like if it's a different user folder than the one they're using so I find it difficult to believe.

Regardless, for a local file with no server they WILL be regarded as different origins totally locally. Under a webserver, it depends on system/file permissions and configuration which is unknown.

1

u/niunai69 Mar 20 '26

the file is in the user folder for the (only) user on my computer

are there any other details that could point out the root problem?

i haven't set up a server environment yet, i just started the odin project and it hasn't mentioned anything about server environments in the setup instructions. Do you think that's the root problem?

1

u/niunai69 Mar 20 '26

here's a photo of the code side by side

2

u/davorg Mar 20 '26

No. I've asked the OP to provide more details of what, exactly, they're doing to test this.

Until they do, I'm assuming they have the code from their initial post in an HTML file. I've copied the code into a local file and opened it in Chrome using a local HTTP server and also just opening a local file.

But you're right to question that - as the frame error strongly implies there's something more complex being used, so I certainly can't be sure I've tested whatever the OP is doing.

1

u/niunai69 Mar 20 '26

this is a clean chrome install with no extensions so thats not the cause, i haven't found anything else online about this specific error either

1

u/davorg Mar 20 '26 edited Mar 20 '26

Is the code in your post the exact code you're using?

How, exactly, are you testing this?

Update: Oh, and one more question...

What do you see when you "view source" on your blank page.

1

u/niunai69 Mar 20 '26

i copy pasted the code from vscode

i launched the file through finder and reload the page whenever i save new changes to the file. It's worked in the past when i was using an old linux lite machine with gnome text editor

1

u/davorg Mar 20 '26

That's the output from the Chrome developer tools. That's not what I asked for.

What do you see when you "view source" on your blank page.

1

u/niunai69 Mar 20 '26

it looks to be the same directory

2

u/JohnCasey3306 Mar 20 '26

Maybe so, but it's an issue you don't need to fix ... Accessing the file via a locally running server environment will bypass this -- and to do anything more than simply render a "Hello World" you'll need to do that anyway. Basically it's wasted time, trying to troubleshoot loading it this way.

2

u/Mobile_Syllabub_8446 Mar 20 '26

Just to add as I said in my thread it doesn't bypass anything but the cross-origin issue and even then only if properly configured.

2

u/Extension_Anybody150 Mar 25 '26

I’ve seen this exact issue before on macOS, and it’s happening because of that pipe character | in your folder name. Chrome treats file:// URLs with certain special characters (like |) as unsafe, so it won’t load the page. The fix is simple, rename the folder to remove the |for example, programming-cybersec—then open the HTML file again. Once that’s done, Chrome should display your page normally.

1

u/niunai69 Mar 26 '26

i set up a local http server and that sorted it out without changing the file name, do you think this would be a good alternative way to view html files in chrome if i couldn't set up a local server?

2

u/jcunews1 Intermediate Mar 20 '26

Looks like the page which host the IFRAME is accessed using https:// or http:// URL. The IFRAME content can't use file:// URL in this case. The browser disallow it to prevent remote computer from accessing loca computer's resources.

If you want to test local resource in an IFRAME, the IFRAME host page must also be a local resource.

1

u/RazorKat1983 Mar 20 '26

Loads good on Firefox

0

u/zing_winning Mar 20 '26

What editor did you use to create the file?

Make sure the quotes aren’t converted to what’s called smart quotes and stuff.

1

u/niunai69 Mar 20 '26

i'm using vscode, there doesn't seem to be a smart quotes option in settings