Gamicord Posted August 21, 2023 Share Posted August 21, 2023 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 More sharing options...
Ingolme Posted August 23, 2023 Share Posted August 23, 2023 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 More sharing options...
Gamicord Posted October 16 Author Share Posted October 16 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 More sharing options...
Ingolme Posted October 16 Share Posted October 16 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: download only works for same-origin URLs, or the blob: and data: schemes. 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 More sharing options...
Gamicord Posted October 17 Author Share Posted October 17 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 More sharing options...
Ingolme Posted October 18 Share Posted October 18 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now