Stripe payment integration failing CSP - reactjs

when I try to integrate stripe on to my web application, I am able to get to the card detail page. When I enter test cards and press pay now, I am getting an error that says
refused to frame "http://localhost:3000" because it violates the following Content security policy directive "frame-src-https"
I am using react and backend is nodeJs

Related

Sign in with Linkedin not working (giving issue's of invalid access token and blocked by CORS Origin)

As I'm trying to integrate Linkedin API to get user's email to make a social sign in functionality in my project. Currently my project is working in react.js as frontend and node.js as backend.
I'm working in 'localhost:3000'.
For that I have created a App in Linked Developers section. From that I got my 'Client id' and 'Client Secret' key. And I also selected sign in with linkedin in products. Then I have integrated one package for react which helps me to sign with linkedin process. On clicking of that button it opens a popup which asks for linkedin signin. After that successfull sign in I get a code and state in response. When I enter that code for authorization it shows invalid access token. I tried to hit the API for authorization - "https://www.linkedin.com/oauth/v2/authorization. Then I hit the API - "https://api.linkedin.com/v2/me to get user profile but still getting the issue of "invalid access token".
I have read multiple documents and tried to integrate linkedin API in frontend as well as in backend too. But both side I'm getting error of CORS issue (Cross origin has blocked). or redirect_uri is not as per registered value. (I have entered multiple redirect_uri's in my linkedin app but none of them are working). or access token is not proper.
Please help me in this issue. I'm not getting why I'm having this error. What steps I have to follow Please guide me breifly.
I have tried to hit the API in multiple ways: postman, sample html file through AJAX, in react using its one of package, in php file using AJAX. But same issue in all.

Stripe payment page Connection is not secure problem

I used react-stripe-checkout npm for making a donation payment page. Everything working fine. But in some browsers, it says Connection is not secure and some browsers don't show any problem on connection.
2nd Problem. In the console, there's showing an error multiple times -
[Report Only] Refused to apply inline style because it violates the
following Content Security Policy directive: "style-src 'self'.
Either the 'unsafe-inline' keyword, a hash ('sha256-vm6IzvFZd99ObdwJODb8jyYg2jyzf6SewoA692PD8/A='), or a nonce ('nonce-...') is required to enable inline execution.
is this Connection is not secure warning showing in the Stripe Checkout page or the website that host your web application? If it's on your website then you might want to check your SSL certification configuration.
The 2nd error is related to the Content Security Policy, you can find the Stripe CSP directives here https://stripe.com/docs/security/guide#content-security-policy

Refused to frame 'https://www.facebook.com/' because an ancestor violates the Content Security Policy : "frame-ancestors https://www.facebook.com"

I've implemented the facebook sdk using npm package "react-messenger-customer-chat", which takes pageid and appid as props. I am injecting this code into shopify store (using iframe) using shopify scrpittags api. I've also whitelisted the shopify store domain on my facebook page, still getting this error. Can you please suggest me some solutions.
Check if your page is publicly visible.

react-facebook-login works on desktop browser but throws "URL Blocked: This redirect failed because the redirect URI is not whitelisted" on mobile

My web app, stockbets.io, uses Facebook login for oauth. On a desktop web browser this works fine, and none of my pilot users have had any trouble signing in. When they try the exact same flow on mobile, however, we get this error:
URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs.
Here is a snapshot of my settings panel for the Facebook Login service:
This seems like it should be straightforward, but I'm at a loss as to why this works on desktop but not mobile. The expected behavior, if you'd like to test, is that you should receive a message saying that the product is in early beta but send us an email if you'd like early access. What happens currently is the above error message.
Any tips?
According to GitHub, this seems like something related to the react-facebook-login library. According to a similar thread on GitHub... looks like you'll just need to make sure the following props are added to you React component.
<FacebookLogin
appId="13xxxxxxxxxxx09"//TODO: Replace yours...
autoLoad={false}
fields="first_name, last_name ,email, picture"
callback={(resp)=>this.responseFacebook(resp)}//TODO: Replace your callback
cssClass="fbtn"
disableMobileRedirect={true}
/>

getting ng-token-auth and devise_token_auth to work with OAuth in ionic InAppBrowser

When I test the setup on my laptop Chrome browser everything works just fine using both sameWindow and newWindow: I am able to login though for example Facebook and the user is authorized and can use my app.
However, when I try to deploy the app to android and use the inAppBrowser things break. When selecting the 'login through FB' button in my app I can see the inAppBrowser frame come up with the Facebook mobile site asking to login. When I inspect that specific window through Chrome inspect, I can see that the callback from FB coming in to omniauth on my server including state and code in the querystring:
https://<app>.herokuapp.com/omniauth/facebook/callback?code=<code>&state=<state>
This request receives a 302 redirect to the following URL:
https://<app>.herokuapp.com/api/v1/auth/facebook/callback
This follow-up request receives a 200 response. So far it all seems fine and the inAppBrowser window closes, we get back to my mobile app and I see the ng-token-auth "auth:login-success" event passing by.
However, any subsequent API requests to my server receive a 401 Not Authorized response. When I look at the request headers of those API requests I don't see any of the headers that Chrome on my laptop is sending to the server such as: access-token, client, expiry, token-type and uid.
I would be very grateful for any advice on where to look or what I am missing here.
Thanks!
Turns out that when working with ionic and I assume it is the same with cordova, storing the tokens according to default behavior in the cookie does not work. However, once you configure it to work with localStorage it works great!
For more info see this issue I opened at the GitHub project.

Resources