Jump to content

HTML5 download attribute is not working at all on all browsers


Gamicord

Recommended Posts

I am creating a simple HTML Website on my laptop. 

So I created a simple HTML Mark up like this:
 
<img src="Will Logo.png" alt="Logo">
<a href="Will Logo.png" download>Download Image</a>

When I click the link, it doesn't download the Image, it opens it in a new window.

I have tried it on Edge, Chrome and  Firefox, and the result is the same-- the Image doesn't download. It simply opens up in a new window.

Is there some settings that I need to enable, for this HTML5 download attribute to work?

2.) When I reference this discussion from this same W3C Forum (

The person said "This might not work on the computer's local filesystem due to security restrictions in some browsers because of the same-origin policy which usually excludes the local filesystem."

Is it because I am trying to download within my Laptop, and that is why it is not working?

Does it treat the file from within my laptop as a "same origin policy that excludes my local file system"? Is this the problem?

Regards.

 

Link to comment
Share on other sites

Yes, if you opened the HTML file from your laptop that's probably the cause of the error.

You can install a local server on your laptop if you want to test these kinds of things on your laptop. WAMP or XAMPP are relatively easy to install and let your laptop act like a real server.

Link to comment
Share on other sites

  • 1 year later...

If the Download Attribute wouldn't just natively work, why does Mozilla Docs and W3Schools write it out there, as if the Download Attribute has been baked into every Browsers' API, and will just download files, once the browser sees the download attribute present?

Why don't they let us know that you still need a server to make it happen?

Link to comment
Share on other sites

It is specified in the Mozilla documentation.

The Mozilla documentation ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes ) says:

Quote

Note:

If you click on the "same-origin URLs" link ( https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#file_origins ) the page says this:

Quote

Modern browsers usually treat the origin of files loaded using the file:/// schema as opaque origins. What this means is that if a file includes other files from the same folder (say), they are not assumed to come from the same origin, and may trigger CORS errors.

 

Link to comment
Share on other sites

Everything that the Mozilla documentation is saying, is so damn confusing insomuch that it doesn't make sense at all.

It says -- "files from the same folder (say), they are not assumed to come from the same origin".

But it doesn't tell us what is assumed to come from the same origin, within the Local File system.

They are just speaking plenty big big English that will confuse someone, rather than help someone.

THE BIGGER CHALLENGE
Normally, we teach kids HTML, CSS and JavaScript, using just NotePad, Notepad++ and a Web browser.

And most times, we do this without an internet connection, without having a server, and without having a backend like NodeJS, WAMP, or XAMPP.

MOVING FORWARD
How then, can we use the "Download Attribute" to download files from the Local File system without having an internet connection, without having a server, and without having a backend like NodeJS, WAMP, or XAMPP, but just having NotePad or Notepad++ and a Web browser?

 

 

Link to comment
Share on other sites

The answer is that you can't, all I can do is try to explain why.

These days running an HTML page on your computer would be as dangerous as running an executable file, if it weren't for all of the security measures that browsers take.

The browsers block a lot of functionality on the filesystem for security reasons. I am not a cybersecurity expert so I don't know all of the details, but I imagine that the download attribute is blocked because it could allow malicious actors to probe your computer and find out which files exist on it, which could provide enough information for them to gain access.

There are ways to disable the same origin policy, but they're very complicated and would definitely put your computer at risk. Here's a thread talking about how to do it: https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome

You can teach the basics of the HTML, CSS and Javascript languages with just the filesystem, but when your code needs to access other files a server is required. Courses teaching these languages almost always provide some form of server environment to the students.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...