Expiration header is not picked up by Firebase Hosting - firebase

My firebase.json file looks like this:
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"headers": [{
"source": "**",
"headers": [{
"key": "Cache-Control",
"value": "max-age=960000"
}]
}],
"rewrites": [ {
"source": "**",
"destination": "/index.html"
}],
"source" : "404.html",
"headers" : [ {
"key" : "Cache-Control",
"value" : "max-age=960000"
}],
"headers": [ {
"source" : "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"headers" : [ {
"key" : "Access-Control-Allow-Origin",
"value" : "*"
} ]
}],
"cleanUrls": true,
"trailingSlash": false
}
}
Now checking the assets in the browser I cannot see any impact on the expiration headers sent through at all.
What's the matter please?


Your configuration is malformed -- you have multiple top-level headers in your hosting configuration. It should instead look more like:
{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"headers": [
{
"source": "**",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=960000"
}
]
},
{
"source": "404.html",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=960000"
}
]
},
{
"source": "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
}
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"cleanUrls": true,
"trailingSlash": false
}
}

Related

Specify what firebase hosting config use when deploying

I am using firebase to deploy a react application.
I have 3 environments, dev/stg/prod.
I would like to set the header to "NO CACHE" in dev and stg but allow cache in production.
so basically :
for prod
{
"hosting": [
{
"target": "core",
"public": "dist/apps/core",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"headers": [
{
"source": "**/*.#(jpg|svg|jpeg|gif|png|js|css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=5256000"
}
]
},
{
"source": "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=5256000"
}
]
}
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
]
}
and this on stg dev
"headers": [
{
"source": "/**",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
},
{
"source": "**/*.#(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=604800"
}
]
}
]
I couldn't find a way to specify what firebase.json config use when executing a firebase:deploy Is there some way to set something similar up ?

Error deploying same app to multiple Firebase-projects

I'm trying to deploy the same app to multiple Firebase-projects but when i try to deploy it fails:
Deploy target 1 not configured for project project-1. Configure with:
firebase target: apply hosting 1 <resources...>
Deployment failed.
I have this configuration in my .firebaserc:
{
"targets": [
{
"project-1": {
"hosting": {
"1": [
"project-1"
]
}
}
},
{
"project-2": {
"hosting": {
"2": [
"project-2"
]
}
}
}
],
"projects": {
"1": "project-1",
"2": "project-2"
}
}
And my firebase.json:
{
"hosting": [
{
"target": "1",
"public": "dist/angular",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
{
"target": "2",
"public": "dist/angular",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
]
}

Firebase hosting CSP nonce implementation

I'm have been working on a CSP for my Firebase hosted website, a large number of request are block by the CSP because GTM (Google Tag Manager) is in inline script.
I'm using Firebase Analytics, which is the reason for GTM being injected into the page.
I have read that I can use a nonce [1], which in most cases is an non issue to implement.
How would this be implemented using Firebase hosting? - From my research Firebase hosting headers can't be modified after deployment.
1: https://developers.google.com/tag-manager/web/csp

Yes you can, you should have a firebase.json file in root of project folder, you can change your headers in it, check my file:
{
"hosting": {
"public": "dist/browser",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**/*.#(jpg|jpeg|gif|png|webp|eot|otf|ttf|ttc|woff)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=7200"
}
]
},
{
"source": "**/*.#(html|js|css)",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
},
{
"source": "**",
"headers": [
{
"key": "X-Frame-Options",
"value": "SAMEORIGIN"
}
]
},
{
"source": "**",
"headers": [
{
"key": "X-Content-Type-Options",
"value": "nosniff"
}
]
},
{
"source": "**",
"headers": [
{
"key": "Referrer-Policy",
"value": "strict-origin"
}
]
},
{
"source": "**",
"headers": [
{
"key": "Permissions-Policy",
"value": "geolocation=(), microphone=(), gyroscope=()"
}
]
}
]
}
}
Unfortunately i was obligated to remove my csp from it...

Firebase Hosting : How to Redirect URLs Based on Origin Domain

I have rules as follows, but I want this to only work if origin is any other domain except the current domain.
If my domain is friends.com, everything should go to index, otherwise be handled like below. e.g, if origin is from Google, with a path like friends.com/user, that should call an firebase https function instead of going to index.
{
"hosting": {
"public": "y",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [{
"source": "/user",
"function": "user"
},
{
"source": "/post",
"function": "post"
},
{
"source": "/*",
"destination": "/index.html"
}
],
"headers": [{
"source": "/css/**",
"headers": [{
"key": "Cache-Control",
"value": "max-age=0"
}]
}]
}
}

How do you set Access-Control-Allow-Origin on Firebase files

I am trying to set Access-Control-Allow-Origin to * on a certain file.
This is my firebase.json file:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"headers": [ {
"source" : "bundle.js",
"headers" : [ {
"key" : "Access-Control-Allow-Origin",
"value" : "*"
} ]
}]
}
However it never gets set: https://curious-athlete-131013.firebaseapp.com/bundle.js

Try nesting the headers underneath hosting rather than as it's own top level node:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public",
"rewrites": [{
"source": "**",
"destination": "/index.html"
}],
"headers": [{
"source" : "bundle.js",
"headers" : [{
"key" : "Access-Control-Allow-Origin",
"value" : "*"
}]
}]
}
}
"Custom, file specific, headers can be specified by defining a headers section within hosting in the firebase.json file:" - Firebase Docs

Resources