I'm trying to save downloaded file from secure url (https) with browser but I'm having problems with Firefox.
I use indexedDB to store file in browser memory and when download is finished, I try to save the file in my computer (I'm using a Mac but I think it's not important)
I have this piece of code:
var fileRequest = fileHandle.getFile(); //from indexedDB
fileRequest.onsuccess = function(event){
{...}
var file = event.target.result;
var url = window.URL.createObjectURL(file, {type : fileMimeType, autoRevoke : true});
//I did this with form and not with a href because:
//https://bugzilla.mozilla.org/show_bug.cgi?id=979227
var form = document.createElement('form');
form.action = url;
document.body.appendChild(form);
form.submit();
The browser asks to save this file in Downloads folder and everything seems to work fine BUT it prompts always this message:
"The information entered on this page will be sent through a not secure connection and could be read by third parties. Are you sure you want to send this information?"
If you click 'OK' the file is saved fine, but this security warning is the worst think a user wants to read in a webpage, so the user scares and runaway.
The created url by createObjectURL is a secure url too because is like:
blob:https//blahblah
This warning doesn't appear in Chrome (using his own filesystem method).
Please I need help :(
I use this code for avoid security warning in Firefox
var blobURL = URL.createObjectURL(some_blob);
var fr = document.createElement('iframe');
fr.frameBorder = 0;
fr.width = 1;
fr.height = 1;
document.body.appendChild(fr);
var doc = fr.contentDocument;
var form = doc.createElement('form');
form.action = blobURL;
doc.body.appendChild(form);
form.submit();
setTimeout(function(){
fr.parentNode.removeChild(fr);
}, 100);
Related
I'm using the IP Geolocation API from Abstract
$.getJSON("https://ipgeolocation.abstractapi.com/v1/?api_key=YOUR_UNIQUE_API_KEY", function(data) {
console.log(data.ip_address);
console.log(data.country);
})
EDIT: Basically I want to create a textfile that will save all the visitor IP addresses only onto my computer since I have the source files.
How can I save data.ip_address and data.country of each user onto only my local computer and not have the user click and download anything? Save the JSON into a texfile? That JSON request is on the one and only HTML file for my Github page. I just need the simplest solution for this quick, static project. I've tried using require(fs) but I keep getting an error and read that I can't really use nodeJS for what I'm doing.
Javascript doesn't have access to the local filesystem. You need a webserver and a server side language to be able to save something to the server's filesystem.
The only solution I can think of would be to force the browser to create a file and present it as a download. Something like:
var text = data.ip_address;
text += '\n';
text += data.country;
var filename = 'myData.txt';
var blob = new Blob([text], {type: 'text/csv'});
if(window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
} else {
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
This is a nasty hack but you can run this (either on your site or in your console):
const win = window.open("", "Title", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=200,top="+(screen.height-400)+",left="+(screen.width-840));
win.document.body.innerHTML = JSON.stringify(data);
// So in your case
$.getJSON("https://ipgeolocation.abstractapi.com/v1/?api_key=YOUR_UNIQUE_API_KEY", function(data) {
const win = window.open("", "Title", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=200,top="+(screen.height-400)+",left="+(screen.width-840));
win.document.body.innerHTML = JSON.stringify(data);
})
and then save that opened window to your local machine as a json file.
GitHub Pages does not support server-side languages such as PHP, Ruby, or Python.
-- from docs, so it's not possible to write files. GitHub pages serve static content, without any backend.
And even if it would be, collecting your users' location and IP into a GitHub repo might not be the best idea ever from privacy point of view.
I am using Chrome 79.
I am trying to start download of an image within a html page. The image is located on the same server as the webpage, but it is served via nginx server via different port. This apparently gets me to cross-origin security problems.
First I tried to use the standard
var a = document.createElement('a');
a.download = "file.bmp";
a.href = "http://xxxxxxx/xxx/somefile.bmp";
document.body.appendChild(a);
a.click();
a.remove();
Interestingly this gets me to the behaviour that my image is displayed in a new tab, but not downloaded. I assume this is due to cors reasons?
After reading discussion on this topic in :
Chrome 65 blocks cross-origin <a download>. Client-side workaround to force download?
I tried to use the approach presented there using the fetch function. Unfortunatelly this does not solve my problem. I get a response with "opaque" type and my blob is undefined...
var url = "http://xxxxxxxxx/xxx/somefile.bmp";
fetch(url, {
mode: 'no-cors'})
.then(function(response){handleBlob(response);})
.catch(e => console.error(e));
-------
function handleBlob(response)
{
var blob = response.blob;
var blobUrl = URL.createObjectURL(blob);
var ImageTest = document.getElementById("DummyLink");
ImageTest.download = "file.bmp";
ImageTest.href = blobUrl;
ImageTest.click();
}
I thought this is all very strange - the server name of the resource is same as of the webpage, so I would assume there is no real security danger here...
Any suggestions or workarounds on how to trigger a download of an image to the disk would be greatly appreciated.
Not 100% sure what your trying to do.
var url = 'http://webpage.com/images/images.jpg',
var img = document.createElement('img');
img.src = src;
document.getElementById("DummyLink").appendChild(img);
I want to use a button, instead of this input box to load the text file. When I press the button, I want to load a text file called "me.txt" without showing a browse window. ("me.txt" is in the same path). Is there anyway to do that?
<input type="file" name="file" id="file">
<script>
document.getElementById('file').onchange = function(){
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(progressEvent){
var lines = this.result.split('\n');
for(var line = 0; line < lines.length; line++){
var wordStr = (lines[line]);
var index = wordStr.indexOf("="); // Gets the first index where a space occours
var word = wordStr.substr(0, index); // Gets the first part
var meaning = wordStr.substr(index + 1);
if (word=="a") {
document.write(meaning);
}
}
};
reader.readAsText(file);
};
</script>
You cannot read a file from the user's computer without the user actively picking the file; and you cannot know the real path of that file on the user's computer. Browsers quite rightly prevent both of those things.
When I press the button, I want to load a text file called "me.txt" without showing a browse window. ("me.txt" is in the same path).
If you mean that me.txt is a file that's on the same path as the HTML page this code is running in, then:
If you're using a web server process and accessing the page via http:// or https://, you can use a simple ajax request to read the file, for instance:
$.get("me.txt").then(function(data) {
// ...use data...
});
If you're just running from the local file system (a file:/// URL), it's much better to use a local web server process instead. But if you have to use a file:/// URL, you can't read other local files in Chrome, but you can in Firefox:
// NOT allowed from file:/// URLs not work in Chrome; is allowed in Firefox
$.ajax({
url: "test.json",
dataType: "text"
}).then(function(data) {
// ...use data here
});
Firefox will report an XML parsing error in the console, but will also give you the data.
I'm new to JavaScript and Electron Projects. I have a small task to Run a Webpage in which I have "download" button, if I hit the button I have to get all contents and sources code to be downloaded for the current page. Here my Sample work :
browser.js
onload = function() {
var webview = document.querySelector('webview');
doLayout();
document.querySelector('#back').onclick = function() {
webview.goBack();
};
document.querySelector('#download').onclick = function() {
var urlStr = webview.getURL()
alert(urlStr)
// alert(webview.getWebContents());
};
}
Currently I am able to get Url in Alert View, but I'm not able to get webpage contents
Note: Please give solution only in JavaScript not in jQuery
finally this simple code helped me to download the html file
var htmlContent = [""];
var bl = new Blob(htmlContent, {type: "text/html"});
var a = document.createElement("a");
a.href = urlStr;
a.download = "new.html";
a.hidden = true;
document.body.appendChild(a);
a.innerHTML = "something random - nobody will see this, it doesn't matter what you put here";
a.click()
You can't do this without having some server-side code that reads the file required and sends it with download-headers.
Since Electron is a CSS/HTML/JS framework that also focusses on app development I doubt if this is possible within Electron. Given it's Node it might be possible (since Node is server-side), but I'm lacking in knowledge/experience in Electron on if this is possible.
You might want to check out this page in their documentation though: http://electron.atom.io/docs/api/download-item/
I'm working on the web pages of an embeded device. To exchange data between the web page and the application of this device I use xmlhttprequest.
Now I search a way to allow the client to upload a binary (to update the firmware of that device) to the server.
One big limitation : it needs to works in IE8 (a cross browser solution would be ideal, but it's mandatory to work on IE8 first...)
In detail what I have to do :
Use the <input type='file'> to select the file on the client computer
Send the file (using xmlhttprequest?) to the server
The server will reassemble the file and to whatever it need to do with it...
I was able to get a binary from the client to the server in chrome, but in IE8, my method was not compatible.
The relevant html file :
<input id="uploadFile" type="file" />
In the javascript, I tried different way to fire an event with the input file type
// does not work in IE8 (get an Obj doesnt support this property or method)
document.querySelector('input[type="file"]').addEventListener("change"),function(e)...
// tried with jQuery, does not work in IE8(I may not using it correctly...)
$('upload').addEvent('change', function(e)....
$('upload').change(function(e)....
So my first problem is : how to do a onChange event with the input type file in IE8?
Also the method I was using in chrome (found on this page : http://www.html5rocks.com/en/tutorials/file/xhr2/ ) but that is not working on IE8 :
function upload(blobOrFile) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function(e) { ... };
xhr.send(blobOrFile);
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
var blob = this.files[0];
const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
const SIZE = blob.size;
var start = 0;
var end = BYTES_PER_CHUNK;
while(start < SIZE) {
upload(blob.slice(start, end));
start = end;
end = start + BYTES_PER_CHUNK;
}
}, false);
})();
Because the document.querySelector generate an error in IE8, I don't know if the rest of this code works in IE8 (I wish it can works!)
Any help and suggestion will be greatly appreciated!!!