Dynamic CSP header with Firebase Hosting - security

I am trying to publish an app to Shopify and in the review process I was required to add a dynamic Content-Security-Policy header, like this:
frame-ancestors https://<SHOP_NAME>.myshopify.com https://admin.shopify.com;
the SHOP_NAME value is contained in the query parameters in the request. Firebase allows adding custom headers using the headers configuration in firebase.json file, however in my case I need to get the value dynamically.
Does anyone know how to configure that using Firebase Hosting solution?
I tried to use the rewrite configuration and custom function, but I was not able to resolve the request properly.

Related

How to enable cross origin isolation? (the specifics)

I am hosting a website using 1and1 (ionos), and it is serving a HTML page with imported CSS and JS. I am trying to figure out how to enable cross origin isolation, but all I can find is that we need to enable certain response headers: https://web.dev/cross-origin-isolation-guide/.
Specifically in these instructions:
What does it mean to set a header on a top-level document? How does one accomplish this? I have done plenty of searching but have not found details on how to create/enable these response headers.
I need to do this in order to use SharedArrayBuffer in Firefox.

NuxtJS dynamic URLs for static site

How can I allow for dynamic URLs on a static Nuxt.js application? I have some dynamic routes like this.
/user/_user
/order-confirmation/_key
/some-route/_key/with/additional/_slug
I generate most of the routes on build time, but some IDs will exist after creating the app. I believe I could use .htaccess somehow to allow for this, but so far, I haven't been able to get it working. I have tried with this: nuxtjs cannot display dynamic url on production - but that doesn't seem to work either.
I can't believe there isn't more information on this, must be a pretty regular usecase.

Use existing ExpressJS app as Firebase app

I have existing app that runs on Heroku. It's a simple web app with no background jobs or database.
Basically it has three endpoints. One of them serves the HTML, the other is POST endpoint for communicating with backend and third is GET endpoint that renders error HTML content as well.
Now the frontend is not single page application and the goal is not to be one. It's just HTML page with a form and some links. The front end can be used without Javascript.
My questions are:
Can I re-use existing ExpressJS code? I was thinking about importing route callbacks and use them inside the "functions".
I know there is Firebase hosting that can serve static content. However, as I mentioned the server can respond with HTML content so I'd need traditional routing (such as /error url for rendering HTML error). In my ExpressJS app I use .ejs templating so I'd like to load the template and render it.
Can Firebase be set up so the "backend" (functions) can be placed on my own domain? I'd like to call relative URLs from my index file (like that POST endpoint) instead of using Google Firebase URL.
I'm really just trying to find out if my use case can fit the Firebase infrastructure. I think it's a good candidate since I need the web app to respond infrequently and it's not really demanding, not many people would use it. This is also my hobby project so I'm trying to minimize costs.
To answer your questions:
Yes you can, but keep in mind some things are limited. In my case, I had tried to use multer library for multipart forms but didn't work and had to resort to using busboy instead. To use an Express app for a function endpoint, you simply just pass your app as the onRequest function parameter like so: functions.https.onRequest(app).
Docs:
https://firebase.google.com/docs/functions/http-events#using_existing_express_apps
The hosting is for static files only. You can't use that with .ejs. Unless, you're thinking to use that as a proxy to your Express app..
Yes, you can set custom domains so you can use your domain(s) instead of default ones. Reference: https://firebase.google.com/docs/hosting/custom-domain
From your project's Hosting page, enter the wizard for connecting a custom domain:
If you have only one Hosting site, click Connect domain.
If you have more than one Hosting site, click View for the desired site, then click Connect domain.
Enter the custom domain name that you'd like to connect to your Hosting site.
(Optional) Check the box to redirect all requests on the custom domain
to a second specified domain (such that yourdomain.com and
www.yourdomain.com redirect to the same content).
Click Continue to initiate the validation process.

CORS Inconsistent Across three Apps

I have an analytics server ( matomo ) which is tracking nicely the main "Live" site. In turn, I have another web app "portal" which makes http calls to the analytics server successfully.
Now I'm trying to retrofit identical calls to yet another existing site. That site is where the content is created that is displayed on the Live site.
This last site is a huge nodejs + angularjs site that lives in another data center from another vendor. It successfully makes calls to a REST API layer with a different subdomain.
However, making calls to the aforementioned analytics is triggering CORS errors in the large app.
FireFox gives the following error:"(Reason: missing token ‘authorization’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel)"
I don't understand why it works on the portal but not the content-creator.
Everything is behind CloudFlare, and Cloudflare is forcing all to be https calls.
Each app uses a subdomain of the same domain. The content-creator is successfully making calls to the api.mydomain.com. The portal is successfully making calls to the analytics.mydomain.com and api.mydomain.com.
The analytics site is using php / apache. The portal is using php/angularjs. The content provider is using nodejs / angularjs.
The live site is using nodejs / angular 2.x.
Any insight would be appreciated.
Turns-out that some headers weren't being returned. The other programs didn't care, apparently, but the third one did, even though there was no POST being done. I added the following info to the apache2 conf file:
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

Add custom http response headers for files matching conditions

I need to add a custom http header to every http response from my IIS 8.5, but only for specific file types (css, js and html).
I've tried this solution
Add custom header based on file type, but it seems outdated, and I'm getting errors for bad web.config file.
How it can be done on IIS 8.5?Any help will be appreciated.
Solution on this link still working Add custom header based on file type for your problem.
You weren't able to use it because you need to install URL Rewrite module for IIS.
Please go to https://www.iis.net/downloads/microsoft/url-rewrite , download, install it and then restart IIS. After this steps error about bad web.config file should gone

Resources