I have multiple HTML files stored in Firebase storage. Those files contain regular HTML, and they include links to other files (css, js, etc) stored within Firebase storage as well.
In order to download a file in Firebase storage you usually have to get a proper download URL in your client, something like:
const ref = firebase.storage().ref('static/styles.css');
ref.getDownloadURL().then(downloadUrl => ...download file here...)
Now, my HMTL file is rendered within an iframe. I can process this HTML file and replace all references to other css and js files in the client (Angular) with proper Firebase URLs, and the iframe renders the page just fine.
My issue occurs when one of the files downloaded by the iframe (usually css or js) references a third file. As this reference does not have the right Firebase URL, it fails.
For example, a css file referencing an image background:
background: #2a2f27 url(../images/banner.jpg) no-repeat;
The code above will fail.
Is there a way to serve those files with the Firebase URLs already in place? Maybe with a cloud function?
Another option could be to intercept those outgoing calls in the iframe itself and replace them before the calls are made, but I am afraid this is not possible for security reasons.
Related
I am creating a web app where, this app will generate a .html file in public/ directory. And after that i want to show that generated html file on a page using iframe .
I am using NextJS for this task. I have configured next.config.js for rewrites but getting 404 error. I am using Railway for hosting. Since in Vercel we can not access filesystem here.
Instead of generating html dynamically, if I upload that .html file, then i can access that file using iframe in production.
I think we can not access those files which were not available during build process. (this is my guess , maybe wrong)
How can I solve this problem or should I use another framework ?
Thanks
Since I was accessing .html files (i.e <iframe src="path-to-file"></iframe>) which were not available during build process, that's why i was getting 404 error.
So I did the following thing:
suppose I want to do this <iframe src="/pdf/page01.xhtml"></iframe> where file location is in public/pdf/page01.xhtml.
so this src is sending a GET request to localhost:3000/pdf/page01.xhtml.
To manipulate this request I created a pages/api/pdf/[...slug].js. In this file you can use process.cwd() to access the file inside your public dir. You read file content using fs.readFile and send the response res.status(200).send(data) like this.
By doing this I was getting the desired result.
Suggestions are always welcome.
I'm running API tests using GitHub Actions and I want to upload to the report generated by Mochawesome to Google Cloud so I can see failures clearly without digging through CI logs. I have the upload part working but when I view the html file on Google Cloud it doesn't load, I just get a blank white page. I'm uploading the css files too so why isn't the html file loading?
Using cdn for assets resolves the isssue .mocharc.js:
module.exports = {
reporter: 'node_modules/mochawesome',
'reporter-option': [
'cdn=true',
'timestamp=true'
],
};
When you're creating a file using the Cloud Storage API , set the mime_type to 'text/html' and skip the content_disposition.
You can manually edit the metadata to set the proper type, which is text/css for CSS files. If the type is neither specified nor auto-detected at upload time, Google Cloud Storage serves files as binary/octet-stream which may prevent the browser from properly rendering it.
Alternatively, you can also specify the MIME type in HTML, e.g.,
<link rel="stylesheet" href="css/theme.css" type="text/css">
to make sure that the browser handles it appropriately.
Here are a few examples with similar implementation:
Run HTML file from Google Cloud URL
Serve HTML file
Website host HTML file page
I'm using Firebase Cloud Functions to generate an HTML file and now I'd like to host it together with related assets (js, css, fonts etc.) but without success.
I call the function, it generates the file properly and puts it in Firebase Storage together with js/css/other assets. Now I would like to return a URL of the index.html file so that the user can access it in the browser and the .html page will have access to the assets. Unfortunately the generated URL enforces download but I'm pretty sure that even if I managed it somehow, it won't be able to access asset files.
I know it's possible on AWS (S3 bucket) but can I do it on Firebase? Firebase Hosting doesn't seem to be the right solution in that case, does it?
Don't save it to Storage, that's a bad use case for this scenario. Instead, save it to Hosting:
https://firebase.google.com/docs/hosting/
Also, you can consider serving the content directly from the cloud function, probably there's no need to create a static version first.
Hello StackOverflow and Firebase Community!
I am trying to achieve something that is probably not intended with Firebase: I want to store HTML folders (banner ads in my case) in Firebase Storage.
My question is: How to keep the relative path from my HTML file to the related JS and image files.
So this files could easily find each-other:
/path/to/my/folder/index.html
/path/to/my/folder/main.js
/path/to/my/folder/picture.jpg
<html>
...
<script src="main.js">
...
</html>
document.onload = function() {
myImage.src = 'picture.jpg'
}
These relative URLs are not working if I store all the files on Firebase Storage, and access them with their DownloadURL, with looks like https://firebasestorage.googleapis.com/v0/b/my-project.appspot.com/o/my_folder_300x250%2Findex.html?alt=media&token=12a123a1-1234-1a1a-1234-a1ab123456a1,
I can make the files reachable without token by opening Firebase's security rules, but the relative path is still broken because of the URL parameters, and the folder path being escaped.
I also managed to make it work on an other project by making the Google Cloud Storage bucket public. I can access the files and keep the relative path using an URL like: https://my-project.appspot.com.storage.googleapis.com/path/to/my/folder/my_folder_300x250/index.html. This works great, but has major security flaws that I want to prevent, like listing all the files in the bucket 😱
I tried to save my banners as zip files, unzip them on the front end side, and recreate the folder structure in browser with the FileSystem API. But I'm limited to Chrome.
I could also try to replace all the URLs in my HTML, JS and CSS files, but this doesn't feel like a good solution.
I found a pretty simple solution:
In Google Cloud Console, I created a new role that has get access, but no list access, and applied it to allUsers, with the following permissions.
resourcemanager.projects.get
storage.objects.get
This will solve my issues for now, and I'll keep accessing data using links like https://my-project.appspot.com.storage.googleapis.com/path/to/my/folder/my_folder_300x250/index.html instead of firebase's downloadURL().
Firebase Storage is built around Cloud Storage, which doesn't actually have directories, but a flat namespace. Directories are emulated via the storage object naming convention: names can contain the / character and placing a "directory" path at the beginning of the object name makes that object appear to be in that "directory". See
How Subdirectories Work.
So your only solution (if you want to store the files independently) is to process all references, make the "paths" absolute and name the files accordingly. As you observed, you probably need to take into account all the URL query parameters as well.
Here's what I would like to accomplish:
I have a file stored in Windows Azure Blob Storage (or for that matter any file which is not on my web server but accessible via a URL).
I want to force download a file without actually downloading the file on my web server first i.e. browser should automatically fetch the file from this external URL and prompts the user to download it.
Possible Solutions Explored:
Here's what I have explored so far (and why they won't work):
Using something like FileContentResult as described here Returning a file to View/Download in ASP.NET MVC to download the file. This solution would require me to fetch the contents on my server and then stream from my server to the browser. For this reason this solution won't work.
Using HTML 5 download attribute: HTML 5 download attribute would have worked perfectly fine however the problem is that while it is really a very neat solution, it is not supported in all browsers.
Changing the file's content type: Another thing I could do (at least for the files that I own) to change the content type property of the file to something that the browser wouldn't understand and thus would be forced to download the file. This might work in some browsers however not in all as IE is smart enough to go beyond the content type and sees the file's content to determine the content type. Furthermore if I don't own the files, then I won't have access to changing the content type of the file.
Simply put, in my controller action I should be able to specify the URL of the file and somehow browser should force download the file.
Is this something which can be accomplished? If yes, then any ideas how I could accomplish this?
Simply put, in my controller action I should be able to specify the URL of the file and somehow browser should force download the file [without exposing the URL of the file to the client].
You can't. If the final URL is to remain hidden, your server must serve the data, so your server must download the file from the URL.
Your client can't download a file it can't get the URL to.
You can create file transfer WCF service (REST) which will stream your content from blob storage or from other sources through your file managers to client browser directly by URL.
https://{service}/FileTransfer/DownloadFile/{id, synonym, filename etc}
Blob path won't be exposed, web application will be free from file transfer issues.