I would like to force a download of an image stored in Firebase Storage, but the download attribute in HTML anchors does not support cross-domain and I can't change the content-type to application/octet-stream because it's used to generate a thumbnail.
How can it be done ?
In this case, you cannot use a simple 'download' in html anchors.
What you can do is sending your download request through javascript.
There is an official sample for downloading.
storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) {
// `url` is the download URL for 'images/stars.jpg'
// This can be downloaded directly:
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(event) {
var blob = xhr.response;
};
xhr.open('GET', url);
xhr.send();
// Or inserted into an <img> element:
var img = document.getElementById('myimg');
img.src = url;
}).catch(function(error) {
// Handle any errors
});
about cross domain
download image example
more about web firebase
I had a similiar issue with downloading an mp4 video file. The browser seemed to ignore any download attribute in my html anchors. So my solution was to request the Blob from firebase like so wich also helps hiding an url to the file in storage:
await getBlob(storageRef(storage, path))
.then((blob) => {
downloadUrl.value = URL.createObjectURL(blob);
}
now the browser (including ios) directly triggers a download instead of opening the video in the browser by clicking the anchor:
<a :href="downloadUrl" download="videofile">Download</a>
Related
Context
I'm building a chrome extension that allows users to run automated scripts on 3rd party sites from anywhere on the web. The extension needs the ability to dynamically insert an iframe on any page that the user in on where that iframe is loading a 3rd party site.
The Problem
When I try to load linkedin.com in an iframe from google.com I get the linkedin.com refused to connect. If I look I can see that the x-frame options are still present in the headers while I have confirmed that I've stripped them out in them out.
I've added the following to my extension background script to allow iframes to load in any site
chrome.webRequest.onHeadersReceived.addListener(function (details) {
const headers = details.responseHeaders.filter(header => {
let headerName = header.name.toLowerCase();
return !(headerName === 'content-security-policy' || headerName === 'x-frame-options');
})
if (details.url.includes('linkedin.com')) {
// this console log shows that I've stripped out the necessary headers correctly
console.debug('REMOVED HEADERS: ', headers);
}
return {
responseHeaders: headers
};
}, {
urls: ['<all_urls>']
}, ['blocking', 'responseHeaders']);
I'm using the following code in the console on google.com to insert an iframe loading linkedin.com
(function () {
var iframe = document.createElement('iframe');
iframe.style.position = 'absolute';
iframe.style.zIndex = 100000;
iframe.style.top = 0;
iframe.style.left = 0;
iframe.height = 600;
iframe.width = 900;
iframe.referrerPolicy = 'no-referrer-when-downgrade';
iframe.src = 'https://www.linkedin.com';
document.body.appendChild(iframe);
})();
Here you can see the console log showing the modified headers with x-frame and CSP removed from the iframe request headers
but then the iframe doesn't load. it returns 200 but nothing happens
This actually was working and the Brave shield was preventing the iframe from loading in the page.
I get HTML code from server api and create links like this:
const blob = new Blob([page], { type: "text/html" });
const url = URL.createObjectURL(blob);
Then create a iframe to show this page:
const iframe = document.createElement("iframe");
iframe.src = url;
But I got a RefererNotAllowedMapError,
Your site URL to be authorized: blob:http://xxx.example.com/****
I already added *.example.com/*, blob:*.example.com/* in Website restrictions.
Based on the text in the error message, you need to add:
blob:http://xxx.example.com/*
(or blob:http://*.example.com/*) doesn't work per OP
With below code, I can not download image to iframe. Instead, it downloaded to local drive.
in JS:
storageRef.child('images/CopyPerson.jpg').getDownloadURL().then(function(url) {
var iframe1 = document.getElementById('downloadedCourse');
iframe1.src = url;
}).catch(function(error) {
// Handle any errors
});
in html:
<iframe id="downloadedCourse" width="800" height="500" src=""></iframe>
However, if I use img instead of iframe, it works as supposed. The reason I need use iframe is because I intend to download pdf file. Anyone knows why?
I presume that this is because the content-disposition header is set to attachment instead of inline. Try setting the metadata to change this and see if that works:
// Obviously you only have to set the metadata once per file
// Not every time you download the URL
storageRef.child('images/CopyPerson.jpg').updateMetadata({
"contentDisposition": "inline"
}).then(function() {
return storageRef.child('images/CopyPerson.jpg').getDownloadURL()
}).then(function(url) {
var iframe1 = document.getElementById('downloadedCourse');
iframe1.src = url;
});
I'm developping a component to easily edit associations in document properties pages.
The visual part of the component is an IFRAME showing the myspaces webscript.
I'm having difficulties to transfer user authentication to the content of the IFRAME. The session is lost, so the browser ask for a new BasicAuthentication.
I can transfer the ticket using the alf_ticket url parameter, but it is not reused for other urls produced by the webscript.
How could I transfer the Alfresco authentication to the webscript included in the IFRAME ?
<script type="text/javascript">
var self = this;
var ticket;
var xmlHttpReq = false;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open("GET", "http://blrkec335927d:8080/alfresco/wcservice/api/login?u=admin&pw=admin", true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'json');
self.xmlHttpReq.setRequestHeader('X-Alfresco-Remote-User', 'admin');
xmlHttpReq.onreadystatechange = function() {//Call a function when the state changes.
alert(xmlHttpReq.status);
if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200)
{
var xml = xmlHttpReq.responseXML;
var getticket = xml.getElementsByTagName("ticket");
ticket = getticket[0].childNodes[0].nodeValue
var url1 = "http://blrkec335927d:8080/alfresco/wcservice/ui/myspaces?f=0&p=%2FCompany%20Home&alf_ticket="+ticket;
var aa='<iframe bgcolor="#edf6fc" width="100%" height="100%" frameborder=0 src="'+url1+'" />';
document.getElementById('uploaddoc').innerHTML = aa;
}
}
self.xmlHttpReq.send();
</script>
<body>
<span id="pageTitle">${label['ALFRESCO_DOCUMENT']}</span>
<div id="uploaddoc">
</div>
</body>
<span id="footerButtons" style="vertical-align: bottom;"></span>
I am using above code . But still while loading page its asking for username and password. Please help me
First of all, don't use an iFrames for a simple webscript. You're not loading an entire new page which should have his own session.
Just use Client-Side JavaScript to get the JSON backend data en draw your own UI.
In any case you're compelled to use an iFrame, then just create your own myspaces webscript. Copy all the content, rename it and add your alf_ticket behind every generated url.
From a xul-based firefox addon, I need to:
programmatically create an invisible iframe (once)
reuse it to load multiple URLs as the addon runs
access the returned HTML after each URL loads
Problem: I can only get the first page-load for any created iframe to trigger an 'onload' or 'DOMContentLoaded' event. For subsequent URLs, there is no event triggered.
Note: I'm also fine with using the hiddenDOMWindow itself if this is possible...
Code:
var urls = ['http://en.wikipedia.org/wiki/Internet', 'http://en.wikipedia.org/wiki/IPv4', 'http://en.wikipedia.org/wiki/Multicast' ];
visitPage(urls.pop());
function visitPage(url) {
var XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
var hiddenWindow = Components.classes["#mozilla.org/appshell/appShellService;1"].getService
(Components.interfaces.nsIAppShellService).hiddenDOMWindow;
var doc = hiddenWindow.document, iframe = doc.getElementById("my-iframe");
if (!iframe)
{
iframe = doc.createElement("iframe");
//OR: iframe = doc.createElementNS(XUL_NS,"iframe");
iframe.setAttribute("id", "my-iframe");
iframe.setAttribute('style', 'display: none');
iframe.addEventListener("DOMContentLoaded", function (e) {
dump('DOMContentLoaded: '+e.originalTarget.location.href);
visitPage(urls.pop());
});
doc.documentElement.appendChild(iframe);
}
iframe.src = url;
}
There are some traps:
The hiddenWindow differs between platforms. It is XUL on Mac, and HTML else.
You should use .setAttribute("src", url); to reliably navigate.
The following works for me (Mac, Win7):
var urls = [
'http://en.wikipedia.org/wiki/Internet',
'http://en.wikipedia.org/wiki/IPv4',
'http://en.wikipedia.org/wiki/Multicast'
];
var hiddenWindow = Components.classes["#mozilla.org/appshell/appShellService;1"].
getService(Components.interfaces.nsIAppShellService).
hiddenDOMWindow;
function visitPage(url) {
var iframe = hiddenWindow.document.getElementById("my-iframe");
if (!iframe) {
// Always use html. The hidden window might be XUL (Mac)
// or just html (other platforms).
iframe = hiddenWindow.document.
createElementNS("http://www.w3.org/1999/xhtml", "iframe");
iframe.setAttribute("id", "my-iframe");
iframe.addEventListener("DOMContentLoaded", function (e) {
console.log("DOMContentLoaded: " +
e.originalTarget.location);
var u = urls.pop();
// Make sure there actually was something left to load.
if (u) {
visitPage(u);
}
});
hiddenWindow.document.documentElement.appendChild(iframe);
}
// Use .setAttribute() to reliably navigate the iframe.
iframe.setAttribute("src", url);
}
visitPage(urls.pop());
Don't reload the hiddenWindow itself, or you will break lots of other code.