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...
Related
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 ?
We are trying to set Cache-control in order to avoid aggressive caching by browsers. Unfortunately, we can't seem to get firebase to actually set this header. Here is our
firebase.json
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
},
{
"source": "**/*.#(jpg|jpeg|gif|png|svg|webp|eot|otf|ttf|ttc|woff|woff2)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=604800"
}
]
}
]
}
}
We thought maybe our blob pattern matching was off so we have tried every combination you can imagine. **/*, **/, /**, etc. We can't figure out why these headers are not being applied. Any help would be very appreciated.
Turns out the above actually works. It's just that chrome was caching the responses (the very thing we were trying to fix). When testing this make sure to use incognito mode.
I have an ionic 4 app hosted on firebase and when I push an update, my users have to clear their cache to load the newest version of the app.
I've searched around a bit and modified my firebase.json to reflect the following:
{
"hosting": {
"public": "www",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"headers": [
{ "source":"/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I thought this worked, but today I pushed an update and it required me to clear my cache. Does anyone have other ideas on how to force an update?
Try changing this
"headers": [{"key": "Cache-Control", "value": "no-cache"}]
to this
"headers": [{"key": "Cache-Control", "value": "no-cache, no-store, must-revalidate"]
Or this
"headers": [{"key": "Cache-Control", "value": "public, max-age=0"}]
Also, you are setting the rule for "source" : "/service-worker.js", is that what you want?
I think you want this :
"headers": [
{
"source": "/**",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
}]
See what they do in this answer
This could reduce performances for the users
I deploy a static site on firebase hosting with some header configuarations.
But I some of my headers doesn't appear after the site deployed.
I tried change the value of Cache-Control header and it works.
But X-Frame-Options,Content-Security-Policy,X-Content-Type-Options doesn't.
firebase.json:
{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"headers": [
{
"source": "**/*.#(html)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=3600"
},
{
"key": "X-Frame-Options",
"value": "SAMEORIGIN"
},
{
"key": "Content-Security-Policy",
"value":
"script-src 'self' 'unsafe-inline' cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' cdnjs.cloudflare.com"
}
]
},
{
"source": "**/*.#(jpg|jpeg|gif|png|ico|svg)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=2592000"
}
]
},
{
"source": "**/*.#(js|css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=2592000"
}
]
},
{
"source": "**/*",
"headers": [
{
"key": "X-Content-Type-Options",
"value": "nosniff"
}
]
}
]
}
}
Actual response header I get:
After deploy, make sure to clear your browser's cache or use incognito mode. That's what happened to me, my custom headers were not showing because Chrome cached previously deployed version
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
}
}