I'm developing a Chrome extension, which is supposed to schedule and manage meetings on Google calendar.
I followed Google's documentation, but I get error "Uncaught ReferenceError: gapi is not defined".
I've added this line:
<script src="https://apis.google.com/js/client.js?onload=onGAPILoad"></script>
but then I get this error:
Refused to load the script 'https://apis.google.com/js/client.js?onload=onGAPILoad' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
The "permissions", "oauth2" and "content_security_policy" attributes in the manifest file are defined as follows:
"permissions": [
"cookies", "tabs", "bookmarks", "identity", "identity.email"
],
"oauth2": {
"client_id": "MY_CLIENT_ID.apps.googleusercontent.com",
"scopes":["https://www.googleapis.com/auth/calendar"]
},
"content_security_policy": {
"extention_pages":"script-src 'self' https://apis.google.com; object-src 'self'"
}
Any idea how to solve it?
Any help towards fixing this error would greatly be appreciated.
Related
I'm developing a Frontend using NextJS and Keycloak for auth-purpose. After adding Sentry, I'm facing this issue here, where the token endpoint of Keycloak is returning an error; So I can log in.
I've tried many things:
Change the web-origin config of Keycloak, which (obviously) doesn't change or solves the problem
Play with the Sentry client config, without success, because the denyUrls property still make the Sentry SDK send the sentry-trace into the request.
Now I don't have any more Idea, so I coming here for more help.
So after some investigations, I came across this tracingOrigins property that can be set using integrations like this:
integrations: [
new (Sentry.Integrations as any).BrowserTracing({
tracingOrigins: [
process.env.NEXT_PUBLIC_URL,
process.env.NEXT_PUBLIC_BACKEND_URL,
process.env.NEXT_PUBLIC_MATOMO_URL,
],
}),
],
This config is done inside the sentry.client.config.ts file. The downside is that, urls which are not included there, are simply not tracked.
Unfortunately, Keycloak has hardcoded list of allowed headers, so you can't configure Keycloak for sentry-trace header.
You can have some non ideal work arounds:
don't use sentry
compile own hacked Keycloak version, where you allow that header
add reverse proxy in front of Keycloak, which will add sentry-trace header to allowed headers
...
I've solved this issue on a nextJs application by adding the following header to the static sourcemap response.
'Access-Control-Allow-Headers' on next.config.js
const CONFIG = {
headers: () => [
{
source: "/_next/:path*",
headers: [
{ key: "Access-Control-Allow-Origin", value: SHOP_ORIGIN },
{ key: 'Access-Control-Allow-Headers', value: '*' },
],
},
],
}
I have two cloud functions, youtubeRedirect and youtubeToken. Before doing the URL rewrite, (as found here https://firebase.google.com/docs/hosting/functions), everything was working.
youtubeRedirect takes the user to a google auth screen, and provides a redirect to the youtubeToken function. It sets these two cookies
res.cookie('state', state.toString(), { maxAge: 3600000, secure: true, httpOnly: true });
res.cookie('UID', req.query.uid);
When the user is redirect to youtubeToken, the cookie value is checked;
if (!req.cookies.state) {throw new Error('State cookie not set or expired.');}
When using URL rewrites for my custom domain, it fails at this point as req.cookies is empty. When I check my cookies in Chrome, I can see the cookies have been set for my custom domain. I have rewritten both youtubeRedirect and youtubeToken in my firebase.json file
"hosting": {
"public": "api",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/youtubeRedirect",
"function": "youtubeRedirect"
},
{
"source": "/youtubeToken",
"function": "youtubeToken"
}
]
}
The auth side of things is working fine - authorised redirect URI's etc. all changed beforehand, where it used to redirect to us-central1-[appName].cloudfunctions.net it now redirects to my custom domain. The redirection to youtubeToken is working - my brower URL is showing my custom domain.
If I revert everything back to using the us-central1-[appName].cloudfunctions.net function address, it all works. Checking the cookies in devtools shows that the cookies are set as I expect. If I run it all with my custom domain, the cookies are also there... except the function itself cannot find them.
It seems to be that the cookies are being checked somehow before the URL rewrite has occurred, and failing? Really struggling to see a solution to this!
I thought I had found a smoking gun when having console.log(req.get('host')) in youtubeToken returned us-central1-[appName].cloudfunctions.net however placing it within youtubeRedirect has the same outcome, so that just confused me further...
Found the answer in another question
When using Firebase Hosting together with Cloud Functions or Cloud Run, cookies are generally stripped from incoming requests. This is necessary to allow for efficient CDN cache behavior. Only the specially-named __session cookie is permitted to pass through to the execution of your app.
Source
My solution is to set the cookie like so in youtubeRedirect
const sessionCookie = {
state: state.toString(),
UID: req.query.uid
}
res.cookie('__session', JSON.stringify(sessionCookie), { maxAge: 3600000, secure: true, httpOnly: true });
And then retrieve it in youtubeToken
const sessionCookie = JSON.parse(req.cookies.__session)
if (!sessionCookie.state) {
I'm trying to generate a dynamic link in firebase using the REST API. I've tried following instruction on the following page of the documentation: https://firebase.google.com/docs/dynamic-links/rest#create_a_short_link_from_parameters
My apologies in advance for bad formatting, but my request looks something like this:
POST https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=
with headers:
Content-Type: application/json
and body:
{
"dynamicLinkInfo":{
"domainUriPrefix":"https://<myDomain>.page.link/",
"link":"https://www.google.com/",
"androidInfo":{
"androidPackageName":"com.<companyName>.<appname>"
}
}
}
The response i get is:
{
"error": {
"code": 400,
"message": "Invalid Dynamic Link domain: '' or Domain Uri Prefix: 'https://<myDomain>.page.link/'. Expecting exactly one. Dynamic Link Domain isPresent = false, Domain URI prefix isPresent = false, [https://firebase.google.com/docs/dynamic-links/rest#create_a_short_link_from_parameters]",
"status": "INVALID_ARGUMENT"
}
}
My firebase project has a the .page.link domain registered within the project. In the dynamic links section of the firebase project it does show up. I've tested creating links in the firebase console and i've even been able to manually make dynamic short-links using the react-native-firebase package so i'm pretty sure nothing is wrong with my project.
You cannot have / at the end of domainuriprefix. Can you try removing it?
I want to add another solution.
In my case a simple white space in front of 'https' was the trigger.
"message": "Invalid Dynamic Link domain: '' or Domain Uri Prefix: ' https://[...]'
You do need to add the https:// portion to your domainUriPrefix ->
{
"dynamicLinkInfo":{
"domainUriPrefix":"<myDomain>.page.link",
"link":"https://www.google.com/",
"androidInfo":{
"androidPackageName":"com.<companyName>.<appname>"
}
}
}
I am using firebase hosting to host few scripts and trying to access them from another site. it naturally gets blocked due to CORS issues. based on my research on other forum threads etc i modified the firebase.json as below
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"headers": [ {
"source" : "**",
"headers" : [ {
"key" : "Access-Control-Allow-Origin",
"value" : "*"
} ]
}]
}
}
which essentially allow any url to access the resources hosted here. however, on trying to run my site i still see below
Access to XMLHttpRequest at 'https://oracle-bot-sdk.firebaseapp.com//loader.json'
from origin 'https://insurance-bot.moblize.it' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
what else is needed?
In addition to your firebase.json changes for cors, your firebase functions http / https function needs to also include the cors plugin.
Example
const cors = require('cors')({origin: true});
const functions = require('firebase-functions');
const app = functions.https.onRequest((req, res) => {
cors(req, res, () => {
// Your app stuff here
// Send Response
res.status(200).send(<response data>);
});
});
Express App Example
import express from "express";
const cors = require('cors')({origin: true});
const app = express();
app.get('**', (req, res) => {
cors(req, res, () => {
// Your App Here
// Send response
res.status(200).send(<response data>);
});
});
More documentation Serve Dynamic Content with Cloud Functions - Create an HTTP function to your Hosting site (Cors is not mentioned in the documentation btw)
Is the site (https://insurance-bot.moblize.it/) that is calling to https://oracle-bot-sdk.firebaseapp.com a Firebase hosted app?
I only ask because with version 4.2+ of Firebase Tools allows you to setup Multisite hosting using the same Firebase Project. I am not sure if that would help your situation out at all. Just wanted to mention it.
In the error message:
insurance-bot.moblize.it/:1 Failed to load https://oracle-bot-sdk.firebaseapp.com//loader.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://insurance-bot.moblize.it' is therefore not allowed access.
I noticed an extra '/' in https://oracle-bot-sdk.firebaseapp.com//loader.json. I doubt that is the issue, but wanted to mention it.
There is something that you could try. Similar to the answers above but a little different:
"headers": [
{
"source": "*",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
}
]
}
]
Also I would read some of the info here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Access-Control-Allow-Origin If you have not already.
I hope I was able to help in some way. Let me know.
My guess that you've mixed up firebase hosting and firebase cloud functions. Firebase hosting is made for hosting static websites and web apps. As you try to access from your website that is hosted on different domain your configuration for hosting is not applied. You mentioned that you host some scripts and it sounds like cloud functions. And good old CORS headers can help to your cloud functions like:
exports.corsEnabledFunction = (req, res) => {
res.set("Access-Control-Allow-Origin", "*");
res.set("Access-Control-Allow-Methods", "GET");
res.set("Access-Control-Allow-Headers", "Content-Type");
res.set("Access-Control-Max-Age", "3600");
// Continue with function code
...
}
More info: https://cloud.google.com/functions/docs/writing/http#handling_cors_requests
Make sure you have the Blaze or Flame plan, I think Spark plan blocks external access, maybe for the same reason as it does with cloud functions
Cloud Functions for Firebase - Billing account not configured
Go to the Google Cloud Console: https://console.cloud.google.com/functions/
Click the checkbox next to the function on which you want to grant access.
Click Show Info Panel in the top right corner to show the Permissions tab.
Click Add member.
In the New members field, type allUsers.
Select the role Cloud Functions > Cloud Functions Invoker from the Select a role drop-down menu.
Click Save.
taken from: https://github.com/firebase/firebase-functions/issues/645#issuecomment-605835353
This was the best solution for me as posted above
Go to the Google Cloud Console: https://console.cloud.google.com/functions/
Click the checkbox next to the function on which you want to grant access.
Click Show Info Panel in the top right corner to show the Permissions tab.
Click Add member.
In the New members field, type allUsers.
Select the role Cloud Functions > Cloud Functions Invoker from the Select a role drop-down menu.
Click Save.
taken from: https://github.com/firebase/firebase-functions/issues/645#issuecomment-605835353
Try pasting this as it's directly from the documentation, Customize Hosting Behavior:
"hosting": {
// Add the "headers" section within "hosting".
"headers": [ {
"source" : "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"headers" : [ {
"key" : "Access-Control-Allow-Origin",
"value" : "*"
} ]
}
}
Firebase hosting CORS doesn't work WITH custom domain.
However, CORS API works with https://yyyyyyy.web.app/ or firebaseapp.com domain
When trying to invoke the Stackdriver Error Reporting API (via the API explorer or via the Client-Side JavaScript library), I receive the following error:
Request:
{ "message" : "test" }
Response:
{
"error": {
"code": 400,
"message": "Request contains an invalid argument.",
"status": "INVALID_ARGUMENT"
}
}
The Stackdriver Error Reporting API is enabled and I have Owner rights to the App Engine project.
Is the API simply not functional? If I'm doing something wrong, can someone try to help?
The documentation for reporting events says that a ServiceContext is required.
If you're only sending a message (not a stacktrace / exception) you'll need to include a context with a reportLocation as well. This is noted in the documentation of the message field, but it's not obvious.
The following works from the API explorer:
{
"context": {
"reportLocation": {
"functionName": "My Function"
}
},
"message": "error message",
"serviceContext": {
"service": "My Microservice",
}
}
You might be interested in the docs on How Error are Grouped too.
FWIW, I work on this product and I think the error message is too generic. The problem is (?) that the serving stack scrubs the message unless they're annotated as being for public consumption. I'll chase that down.