We are getting a frame-ancestors related iframe error when attempting to use the hellosign-embedded library from our application, the application is hosted in Firebase
example of error message:
Refused to frame 'https://app.hellosign.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
example of headers configuration for firebase hosting:
"headers": [
{
"source": "**/*",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
},
{
"key": "Content-Security-Policy",
"value": "frame-ancestors 'self' *://*.hellosign.com"
}
]
}
]
So either these settings are not being recognized, or there is a deeper issue.
Related
Running a Vue app that deploys to Firebase hosting. The solution works well, but it's unnecessary for us to serve Etag and Last-Modified for our dynamically generated files (using web pack).
Our cache policy benefits the most from not having the header-roundtrip to the server for a lot of our files.
This is the part where we set the cache headers, but I can only add, and not remove headers.
"headers": [
{
"source": "/**",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
},
{
"source": "**/*.#(ico|jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=31536000"
}
]
}
Is there any way with Firebase hosting to remove Etag and Last-modified for the items with heavy cache?
I have a firebase project with hosting for the frontend and a cloud function to handle all the backend requests. When I do firebase serve, and run the project on localhost, everything is fine. But, after deployment, when I try to access it online I get the following error.
Access to XMLHttpRequest has been blocked by CORS policy: Response to
preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
I have tried all the solutions for enabling CORS in firebase, but the error just doesn't disappear. What is causing this error and what can I do?
Relevant code in app.js (index.js equivalent) for cloud function
const functions = require('firebase-functions');
var express = require('express');
var cors = require("cors");
// These contain all the POSTS for the backend
var routes = require('./server/routes/routes');
var api = require('./server/routes/api');
var app = express();
app.use('/routes', routes);
app.use('/api', api);
app.use(cors({ origin: true }));
exports.app = functions.region('europe-west2').https.onRequest(app);
firebase.json
{
"hosting": {
"public": "public/client/dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/api/**",
"function": "app"
},
{
"source": "/routes/**",
"function": "app"
},
{
"source": "**",
"destination": "/index.html"
}
],
"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"
}
]
}
]
}
}
Cross-origin resource sharing (CORS) allows AJAX requests to skip the Same-origin policy and access resources from remote hosts.
The * wildcard allows access from any origin
app.use(cors({
origin: '*'
}));
If you want to restrict AJAX access to a single origin, you can use the origin
app.use(cors({
origin: 'http://yourapp.com'
}));
To enable HTTP cookies over CORS
app.use(cors({
credentials: true,
origin: '*'
}));
OR
app.use(cors({
credentials: true,
origin: 'http://yourapp.com'
}));
Problem:
Unable to handle Firebase Storage urls in Angular6 service worker (presumably due to CORS).
firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [ {
"source" : "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"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"
} ]
} ]
}
}
ngsw-conf.json
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/apple-touch-icon-precomposed.png",
"/apple-touch-icon.png",
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
],
"urls": [
"https://fonts.googleapis.com/**",
"https://firebasestorage.googleapis.com/**"
]
}
}],
"dataGroups": [{
"name": "api-performance",
"urls": [
"/some_route"
],
"cacheConfig": {
"strategy": "performance",
"maxSize": 100,
"maxAge": "3d"
}
}
]
}
All files were uploaded to the Firebase Storage with following metadata:
{
cacheControl: 'public,max-age=36000',
contentType: 'image/jpeg'
}
When I load the app in Chrome or Opera, the app renders OK but I get error message 'Failed to load some_firebase_storage_download_link : No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin my_app_domain is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.' and when I reload the app, no Firebase Storage resources are loaded.
When I load the app in Safari or Edge the app does not render at all and I get multiple console errors 'Failed to load resource'.
The app is being rendered and cached in Firefox without any issue.
When I omit the Firebase Storage and use only resources in Firebase Hosting, then the app is cached errorless in all browsers.
I have searched for setting the request's mode to 'no-cors', but failed to reach any resolution regarding my issue.
UPDATE
This might be caused by interference of NGSW and Firebase Firestore persistence handler (ie.: firebase.firestore().enablePersistence(); ). I am not sure how exactly Firebase Firestore persistence works, but when I initialise the app without Firestore persistence, then I am able to cache dynamic links from Firebase Storage. That is no use to me as I need both db and storage available at the same time.
am trying to link a chrome extension to firebase cloud messaging, but am getting
Unrecognized manifest key 'gcm_sender_id' error when i load the extension
image of the error,
here is my manifest file:
{
"manifest_version": 2,
"name": "iQU",
"description": "iQU",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "index.html"
},
"permissions": [],
"content_security_policy": "script-src 'self' 'unsafe-eval' https://cdn.firebase.com https://*.firebaseio.com https://*.firebaseio.com; object-src 'self'; ",
"web_accessible_resources": [
"assets/css/*",
"assets/js/*",
"assets/fonts/*"
],
"gcm_sender_id": "103953800507"
}
any help please?
This may be an oversight but I'm using firebase and set up the firebase.json file which is a mixture of auto-generation and copying the headers block from Firebase's documentation. The issue is, my fonts refuse to allow me access even though my file looks like this:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source" : "**/*.#(eot|otf|ttf|ttc|woff)",
"headers" : [{
"key" : "Access-Control-Allow-Origin",
"value" : "*"
}]
}, {
"source" : "**/*.#(jpg|jpeg|gif|png|svg)",
"headers" : [{
"key" : "Cache-Control",
"value" : "max-age=7200"
}]
}]
},
"storage": {
"rules": "storage.rules"
}
}
This is the CORS error I'm getting:
Access to Font {Firebase font url}. {Firebase font url} from origin {Firebase project url} has been blocked by CORS policy. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin {Firebase project url} is therefore not allowed access.
Side note: I have an images folder in which I am able to load those just fine. Is there something about fonts that require more attention?
Firebase rolled out a new feature/tool that forces users to update the CORS settings for Google Storage. I found the answer on this StackOverflow question.
Firebase Storage and Access-Control-Allow-Origin