uncaught exception: Error: This operation is not supported in the
environment this application is running on. "location.protocol" must
be http, https or chrome-extension and web storage must be enabled.
var config = {
apiKey: "*****",
authDomain: "******",
};
firebase.initializeApp(config);
var provider = new firebase.auth.GoogleAuthProvider();
provider.addScope('profile');
provider.addScope('https://www.googleapis.com/auth/drive');
firebase.auth().signInWithRedirect(provider);
alert(1);
}
uncaught exception: Error: This operation is not supported in the
environment this application is running on. "location.protocol" must
be HTTP, HTTPS or chrome-extension and web storage must be enabled.
Recently even i faced the same error.
You are opening this file directly in the browser without any web server. Firebase authentication won't work if you open the file directly. Try to load your HTML through web server it should solve your issue.
The reason behind this bug is when you use authentication services they will use web storage. web storage does not work when you open an HTML file directly without any web browser
For example, use apache and open through apache like http://localhost/filename.html in the browser
Try this code. It should work.
var config = {
apiKey: "*****",
authDomain: "******",
};
firebase.initializeApp(config);
var provider = new firebase.auth.GoogleAuthProvider();
provider.addScope('profile');
provider.addScope('https://www.googleapis.com/auth/drive');
firebase.auth().signInWithRedirect(provider);
//add the code below to your previous lines
firebase.auth().getRedirectResult().then(function(authData) {
console.log(authData);
}).catch(function(error) {
console.log(error);
});
Most simple way....
just upload your files on github and run with github page(i.e. https://ur name.github.io/yr dir/yr html file.
Related
My Front end is react Application.
I have gateway server which has been recently migrated to tomcat from spring boot, with secured protocol(https). This Gateway server is responsible to authenticate me through Oauth and genrate a Token and created session for the domain.
Before making https, the connection of my react application was working seamlessly fine, but after the change, I always get the error ERR_SSL_PROTOCOL_ERROR, with my localhost hitting the secured gateway URL.
to connect the local instance of React to the remote servers through Gateway, I have used createProxyMiddleware package as:
module.exports = (app) => {
app.use(/^\/(?!static).+/, createProxyMiddleware({
target: target.url,
changeOrigin: false,
secure: false,
toProxy: true,
onProxyRes: (proxyResponse) => {
if (proxyResponse.headers['set-cookie']) {
const cookies = proxyResponse.headers['set-cookie'].map(cookie =>
cookie.replace(/; secure/gi, '')
);
proxyResponse.headers['set-cookie'] = cookies;
}
}
}));
};
In a file called setupProxy.js as mentioned in https://create-react-app.dev/docs/proxying-api-requests-in-development/ as Setting Custom Proxy as I am dynamically setting the target URL as per environment variable been set on multiple npm run start variants as npm run start-server1, npm run start-server2 etc.
Now whenever I am using the respective start command to trigger the connection with secured gateway url, I am not server with required information, rather displayed with error as shown above.
I also looked out for the solution to find http to https connection, where eople have suggested for changeOrigin, set https=true in packagejson, use certificate created in local machine with pfx: fs.readFileSync(`${__dirname}/../all.p12`), under target option. but nothing seems to be working.
Please suggest how can this be achieved using createProxyMiddleware library
My Flutter app looks great in the Chrome (web) emulator and running on a local server.
I navigated to this directory:
Users/TDK/StudioProjects/kabbalah/build/web/
I installed the Firebase CLI tools and then ran
firebase init hosting
I wasn't sure about this question:
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
I responded y. The response was
✔ Firebase initialization complete!
Then I ran
firebase deploy --only hosting
The response is
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/kabbalah-numerology/overview
Hosting URL: https://kabbalah-numerology.web.app
When I go to the Project Console I see
Deployed
When I go to https://kabbalah-numerology.web.app I get this screen:
Shouldn't I see my web app? Did I deploy from the wrong directory?
I opened Safari to check if Chrome was cacheing an old webpage but I got the same screen.
I put this code block into index.html. It made no difference.
<body>
<script>
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "my-super-secret-key",
authDomain: "kabbalah-numerology.firebaseapp.com",
projectId: "kabbalah-numerology",
storageBucket: "kabbalah-numerology.appspot.com",
messagingSenderId: "my-sending-id",
appId: "my-app-id",
measurementId: "my-measurement-id"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
</body>
Check the firebase.json file, which controls your hosting setup. Most likely the public folder in there, which determines from what directory files are served, points to the wrong location.
I typically run firebase init in the root of my project, and then point public in firebase.json to the output of the flutter web build.
I´m using a keycloak instance to login in the frontend and secure the backend-api. After deployment on a linux machine on aws I faced a issue. I´m getting constantly redirected to the login page by accessing the api with a jwt token. Locally it´s working fine.
My client is a confidential client. I´m using client_id and _secret to authorize for the token call. The jwt token is valid and sucessfully generated.
My implementation of the api works with expressJs and the keycloak-nodejs-connector:
keycloakConfig = {
serverUrl: 'https://keycloak.myserver.com/auth',
realm: 'examplerealm',
clientId: 'ui-client'
};
public init() {
if (this.keycloak) {
console.warn("Trying to init Keycloak again!");
return this.keycloak;
}
else {
console.log("Initializing Keycloak...");
const memoryStore = new session.MemoryStore();
// #ts-ignore
this.keycloak = new Keycloak({ store: memoryStore }, this.keycloakConfig );
return this.keycloak;
}
}
I could imagine that it is dependent on the current https setting. My nodejs api provides a endpoint for http and https (locally with a self signed certificate). On the server, where keycloak is running, I added a letsencrypt certificate with certbot and everything looks fine in the browser.
Keycloak is started with the docker-container jboss/keycloak.
I´m curious to figure out my current issue and help is very appreciated :slight_smile: Let me know, if I missed to add necessary informations.
Thanks in advance.
Dominik
I found a solution for this.
First I updated to the latest version of keycloak-connect. They provided a new major version 12 and it seems there was a change about the configuration.
Second there was a issue with the configuration. I digged into the current config object and figured out, that it should look like this:
keycloakConfig = {
realm: 'test-realm',
authServerUrl: 'https://myurl/auth/',
realmPublicKey: 'key'
};
I have an embedded Shopify application with React (Polaris) on the frontend and Node (Koa.js) on the backend. One feature of the application is to export some information as an Excel spreadsheet.
To generate the file, I'm using the xlsx package and file-saver to download it.
Everything works fine in Chrome (v 80.0.3987.132), but in Firefox (v 73.0) I get the following error when I click on the button to download the file:
Content Security Policy: The page’s settings blocked the loading of a
resource at blob:https://... (“frame-src”).
As this is an embedded application, it is running inside an iframe. Based on the error message I thought that the Content Security Policy for blobs inside an iframe is blocking the file to be downloaded so I added koa-helmet to my backend with the following settings:
const Koa = require('koa');
const KoaHelmet = require('koa-helmet');
const server = new Koa();
server.use(KoaHelmet({
frameguard: false,
contentSecurityPolicy: {
directives: {
frameSrc: ["'blob'"]
}
}
}));
I also tried frameSrc: ["'blob:'"], frameSrc: ["'blob:;'"], 'frame-src': ["'blob'"], 'frame-src': ["'blob:'"], 'frame-src': ["'blob:;'"] but none of these solved the problem.
What am I missing?
I've been struggling with the following problem for the past couple of days:
We have a Web API project with a CORS implementation.
When I run the project locally, in debug mode, everything works.
The problem arises when I try to deploy the project to the local IIS or if I stop debugging in VS.
As soon as I try to make a request I get the following error:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:82' is therefore not allowed access.
To further anoy me, when I deploy the API to our azure environment, everything works and I dont get the error anymore.
This is my startup.cs with my CORS config:
public void Configuration(IAppBuilder app)
{
app.UseCors(buildCorsOptions());
ConfigureAuth(app);
}
private static CorsOptions buildCorsOptions()
{
return new CorsOptions
{
PolicyProvider = new CorsPolicyProvider
{
PolicyResolver = context =>
{
var corsPolicy = new CorsPolicy
{
AllowAnyHeader = true,
AllowAnyMethod = true,
SupportsCredentials = true
};
//localhosts for debugging purposes
corsPolicy.Origins.Add("http://localhost");
corsPolicy.Origins.Add("http://localhost:82");
return Task.FromResult(corsPolicy);
}
}
};
}
Anyone that has any idea what I might be missing?
I found the solution!
We had an endpoint returning an exception that was being executed before CORS had a chance to modify the response headers.
This made the error look like a CORS problem, but it realy was just an internal exception in our code.
Tried several codes and config changes offered by dozens of website earlier and none worked for me (VS 2019 Community Edition + EDGE + IISExpress). Workaround is to just use Google Chrome instead and install the plugin called CORS Unlock. You need to install this plugin after you launch your page via VS.