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.
Related
Newish to Next.js. I deployed a Next app to GCP with Cloud Run. The local build runs with with no errors or warnings but I'm getting Minified React errors 419 and 425 on production.
I looked at the full error message but I'm not sure how to debug my code since my local build works fine.
I'm grabbing half a dozen collections from a Firestore db in a getStaticProps() and subscribing to two collections with onSnapshot in a useEffect() hook.
Any thoughts?
I could try grabbing everything in a useEffect (ditching the getStaticProps) but that seemed like the place to do my data fetching since it's a simple SPA with static data that doesn't change much.
The 400s error that you have mentioned generally means that the client is not in the capacity to complete a request.
The error “419” Indicates that you're missing your CSRF token from your request; you may fix this by adding the token when it is generated in the headers token variable and without the CSRF-token the endpoint will return the 419 status response.
Next,the error “425” indicates that when using Server-Side Rendering (SSR) with a framework like NextJS, it is uses React hydration, which basically means React is figuring out how to take the DOM structure rendered from the HTML file and convert it into a running single-page app (SPA),for this to work correctly, React Hydration requires that the HTML from the server and what your client-side app renders are an EXACT match.
I would recommend you to rectify these in your source code and try to deploy the build again.
Also check out these links for more information and examples:
Error Decoder - 425
Error Decoder - 419
Error text content does not match
419 page expired CSRF token
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 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.
I ran PageSpeed Insights and it told me this
Preconnect to required origins
Consider adding `preconnect` or `dns-prefetch` resource hints to establish early connections to important third-party origins. Learn more.
URL
Potential Savings
https://fls-na.amazon-adsystem.com
https://ir-ca.amazon-adsystem.com
https://fonts.googleapis.com
https://images-na.ssl-images-amazon.com
https://ws-na.assoc-amazon.com
I'm using Gatsby so I connected them using the plugin gatsby-plugin-preconnect
{
resolve: 'gatsby-plugin-preconnect',
options: {
domains: [
"https://ir-ca.amazon-adsystem.com",
"https://fls-na.amazon-adsystem.com",
"https://images-na.ssl-images-amazon.com",
"https://fonts.googleapis.com",
"https://ws-na.assoc-amazon.com"
]
}
}
Then I run PageSpeed Insights again and it tells me
Preconnect to required origins
Warnings:
A preconnect <link> was found for "https://fonts.googleapis.com" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.
A preconnect <link> was found for "https://ws-na.assoc-amazon.com" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.
A preconnect <link> was found for "https://images-na.ssl-images-amazon.com" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.
A preconnect <link> was found for "https://fls-na.amazon-adsystem.com" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.
A preconnect <link> was found for "https://ir-ca.amazon-adsystem.com" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.
I received a much worse performance score with them preconnected
I'm trying to integrate my single page React app with GitHub.
I successfully run first stage of authentication, i.e. receiving redirect with code from https://github.com/login/oauth/authorize
The problem is the second part, i.e. POST to https://github.com/login/oauth/access_token
I can't do POST or GET from my web page itself via JavaScript or JQuery. Using $.ajax or $.post all end up with error Access-Control-Allow-Origin.
The app was created with create-react-app and run with npm start.
How can I avoid Access-Control-Allow-Origin error in my scenario? Is there a way to get GitHub token for GitHub API in some other way?
I've tried to do POST with , and it does not complain on Access-Control-Allow-Origin. In fact after .submit() I receive expected response (as per https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/#web-application-flow) but it comes as a file, which Chrome immediately downloads.