I receive error
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://MY-Firebase-APP.Firebaseapp.com' is therefore not allowed access.
when accessing a json file from my Firebase storage. Here is the rules for the storage-
service firebase.storage {
service firebase.storage {
match /b/paystumped.appspot.com/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}
The app is hosted by Firebase as well. Here is the firebase.json I am using when I run 'firebase deploy'
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"headers": [
{
"source": "**/*",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
},
{
"source": "**/*.#(jpg|jpeg|gif|png)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=7200"
}
]
},
{
"source": "404.html",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=300"
}
]
}
],
"cleanUrls": true,
"trailingSlash": false
}
}
I am sure there is some trivial CORS setup to do to make this work.
After reading up on CORS and understanding how this should work I found the desired answer here.
https://stackoverflow.com/a/37765371/4360863
The firebase storage policy is configured by a utility provided by google.
Related
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...
I have a somewhat involved deployment process for my Gatsby site which is hosted on Firebase, so I'm using Gatsby Cloud to build the site and deploy it to Firebase. I have a set of cache-control rules that I want the site to use when I deploy to Firebase which are found in the firebase.json file (shown below). It works fine when I deploy the site from my local machine, but when Gatsby Cloud builds and deploys to firebase, it seems to ignore the firebase.json file in favor of some other configuration which I can't see, so the cache-control rules get ignored. Any idea how I can get Gatsby Cloud to honor my firebase.json file?
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
},
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"headers": [
{
"source": "**/*",
"headers": [
{
"key": "cache-control",
"value": "cache-control: public, max-age=0, must-revalidate"
}
]
},
{
"source": "static/**",
"headers": [
{
"key": "cache-control",
"value": "public, max-age=31536000, immutable"
}
]
},
{
"source": "**/*.#(css|js)",
"headers": [
{
"key": "cache-control",
"value": "public, max-age=31536000, immutable"
}
]
},
{
"source": "sw.js",
"headers": [
{
"key": "cache-control",
"value": "cache-control: public, max-age=0, must-revalidate"
}
]
},
{
"source": "page-data/**",
"headers": [
{
"key": "cache-control",
"value": "cache-control: public, max-age=0, must-revalidate"
}
]
}
]
},
"storage": {
"rules": "storage.rules"
},
"emulators": {
"functions": {
"port": 5001
}
}
}
I had the same issue. You need to copy the firebase.json file over into the public/ folder. Quick hack would be to just copy it, better would be to use the onPostBuild hook
Something like this:
exports.onPostBuild = () => {
fs.copySync(
path.join(__dirname, '/firebase.json'),
path.join(__dirname, '/public/firebase.json')
)
}
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
Problem:
Unable to apply caching headers to re-written routes (i.e. /bla -> /index.html).
Firebase documentation clearly states that the headers are applied when the 'source' glob pattern matches the original request.
Can anyone help with a workaround / solution to this?
Code:
Note: The headers directive for the 'index.html' source does not work unless the user directly hits /index.html, but is kept in the code to better articulate the issue.
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "build",
"rewrites": [
{
"source" : "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "index.html",
"headers": [
{
"key" : "Cache-Control",
"value" : "max-age=0"
}
]
},
{
"source": "**/*.#(js|css)",
"headers": [
{
"key" : "Cache-Control",
"value" : "max-age=31536000"
}
]
}
]
}
}
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