I'm trying to use navigator.canShare() and navigator.share() to experiment with websharing in a react app.
When I call navigator.canShare() in react, I get the following run time error:
TypeError: navigator.share is not a function
How can I get react to recognize navigator.canShare()?
As mentioned in MDN docs, you can only use navigator.share() over HTTPS
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
MDN also says:
"Locally-delivered resources such as those with http://127.0.0.1 URLs, http://localhost and http://.localhost URLs (e.g. http://dev.whatever.localhost/), and file:// URLs are also considered to have been delivered securely.
Note: Firefox 84 and later support http://localhost and http://.localhost URLs as trustworthy origins (earlier versions did not, because localhost was not guaranteed to map to a local/loopback address)."
Not sure if this means HTTPS is not required locally or not, but I'm getting the same error, even with the Permissions-Policy header.
Related
I am using an API in my react code and it was issuing CORS error on npm start. The Moesif extension resolved the issue but I don't know that is it a good way to resolve this issue as I want this site to be functional by other users as well. And I think that without using this extension it will give an error on other devices.
How can I solve this issue?
you can't use that api in production because api provider does not allow you to do that.
I'm having trouble using Mock Service Worker in a React project. The application is bundled using parceljs inside the dist folder, the pages are visualized correctly however msw is unable to register the service worker. I followed all the setup suggest in the msw documentation but not matter how my application is run in http or https with self-signed certificates, Firefox 100 will output
Failed to get service worker registration(s): Storage access is restricted in this context due to user settings or private browsing mode.
Uncaught (in promise) DOMException: The operation is insecure.
Or Chrome
Uncaught (in promise) Error: [MSW] Failed to register the Service Worker:
Failed to register a ServiceWorker for scope ('https://localhost:1234/') with script ('https://localhost:1234/mockServiceWorker.js'): An SSL certificate error occurred when fetching the script.
at index.js:684:17
at Generator.next (<anonymous>)
at fulfilled (RequestHandler-deps.js:36:47)
Despite following the troubleshooting guidelines here.
The only way to have msw running is to open the application using the anonymous mode in Firefox but in the console the service workers are registered in fallback mode
[MSW] Mocking enabled (fallback mode).
My system is Ubuntu 22.04, nodejs version 16.14, parceljs version 2.5.0, msw version 0.38.1.
As the error suggests, your SSL certificate is not trusted by your browser.
There's a designated Using local HTTPS recipe in MSW documentation, I highly recommend you read it. It lists all the possible ways to resolve this issue.
Context: you cannot register a Service Worker in an insecure environment. Such environments include HTTP or self-signed (untrusted) HTTPS. I believe the latter is precisely your case.
I'd recommend whitelisting localhost, making the browser treat it as secure. In Chrome, you can do that by:
Opening chrome://flags.
Finding the allow-insecure-localhost flag and enabling it.
Alternatively, consider serving your app locally with an actual certificate that the browser may verify. Browsers often provide you with feedback around the certificate validity, mentioning exact things that fail.
Also, if you're running Firefox in a private mode, I think they don't support Service Workers in that scenario. Switch from the private mode back to the regular mode, and the worker should register.
So I created a React application using create-react-app, installed react-youtube npm package
and when Youtube video renders I am getting a ton of warnings about SameSite attribute, so it is caused by rendering a youtube video in my application. From what I researched, cookies are controlled from server-side and youtube should take care of cookies itself since I didn't create them. Is there anything I can do from client side to get rid of these warnings?
Warnings messages:
"Indicate whether a cookie is intended to be set in a cross-site context by specifying its SameSite attribute"
"Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute"
I created a sandbox example of what I have:
https://codesandbox.io/s/withered-night-h17gg?file=/src/App.js
However it looks like sandbox example doesn't have these warnings, but I just created exactly the same application using create-app just now and I am getting these warnings.
Getting a redirect issue on Safari browser only when trying to load an AppEngine site with Identity-aware proxy enabled. It shows requests being redirected to https://accounts.google.com/o/oauth2/v2/auth but then failing.
Origin is not allowed by Access-Control-Allow-Origin
If I load the url manually in a new tab in Safari I get: AppEngine error code 9.
I'm thinking it's probably to do with Safari's stricter cookie rules, somehow the IAP session cookie is being ignored because it's from another domain?
Safari seems to have stricter CORS rules, which may require additional rules. Especially if using AppEngine IAP.
If using <img>, <video>, <link> and <script> tags, and loading content from other domains using CORS. You need the crossorigin="use-credentials" attribute to allow the cookie sharing:
<script src="https://example.com/script.js" crossorigin="use-credentials"></script>
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes
Note: this is less secure.
Angular has a build command which will add the attributes automatically for you:
ng build --prod --crossOrigin=use-credentials
https://angular.io/cli/build#options
I am using Swisscom Application Cloud (based on Cloudfoundry). I deployed an app usign Static Buildpack and the idea is that this app delivery a JSON file. As soon as I try to access the remote JSON file from a AngularJS application with a GET call, I get a 405 Method Not Allowed on the OPTIONS call. I think it is a CORS issue. Is there anyone out there having an idea how I can make sure that CORS is handled properly by my Static Buildpack app? Is there anyway I can define this in my manifest.yml?
Greets,
Marc
Without having tried it myself, I guess you can achieve this by providing a custom nginx configuration (http://docs.cloudfoundry.org/buildpacks/staticfile/#custom_nginx_configuration) containing CORS settings.
Nginx CORS examples: https://serverfault.com/questions/162429/how-do-i-add-access-control-allow-origin-in-nginx/