Stripe payment page Connection is not secure problem - reactjs

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

Related

Stripe payment integration failing CSP

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

CSP Scanner: Wildcard Directive alert for OpenID Connect session management endpoint

We used ZAP 2.8 to scan our angular web application implemented with IdentityServer4 (implicit flow).
It generated a Wildcard Directive alert (show in below), I am not sure it is a security issue or not.
If it is a security issue, what should we do? The OpenID Connect session management endpoint is not part of our app, it is IdentityServer4 build-in functionality. any suggestions? thanks
Medium (Medium) CSP Scanner: Wildcard Directive
Description
The following directives either allow wildcard sources (or ancestors), are not defined, or are overly broadly defined:frame-ancestor
URL https://server103.abc.com:54231/services.identity/connect/checksession
Method GET
Parameter Content-Security-Policy
Evidence default-src 'none'; script-src 'sha256-ZT3q7lL9GXNGhPTB1Vvrvds2xw/kOV0zoeok2tiV23I='
The issue is that the frame-ancestors isn't defined.
Per: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
default-src fallback No. Not setting this allows anything.
So even though you did define default-src, frame-ancestors doesn't fallback to it, so since it's unspecified it'll accept anything.
It's up to you (or whoever controls the other component) if that's an issue or not.

Facebook not recognizing my SSL certificate

I have a site built in angularjs and working with prerender.io and with a SSL certificate from rapidssl and everything work fine...
Except from Facebook that is not showing the right information for the page.
When I open Facebook crawler
Can't validate SSL Certificate. Either it is self-signed (which will cause browser warnings) or it is invalid.
And is not recognizing the values og:url, og:type, og:title, og:image, og:description, fb:app_id
It was working in the past, but it stop working I don't know why.
I googled and I concatenated my ssl.crt and my intermidiate.crt but without result.
My page is: https://www.granojo.com/video/10432
Your cert center isn’t providing an intermediate certificate as it should in the TLS handshake. Here is a solution how to chain your certification:
https://victorlava.com/how-to-fix-curl-60-ssl_cacert-cant-validate-ssl-certificate/

Localhost and CORS with Auth0 not allowing me to login

I'm making a React app and trying to use Auth0 to authenticate. After trying to log in, it returns this:
XMLHttpRequest cannot load https://my-domain.auth0.com/usernamepassword/login. Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
I thought it would be related to this: CORS problems with Auth0 and React but I have both http://localhost:3000, http://localhost:3000/login in the 'Allowed Origins (CORS)' spot in Auth0's settings (and yes I'm using the correct client ID as well).
I tried putting http://localhost:3000/, http://localhost:3000/login in the 'Allowed Callback URL's (don't know exactly what that does) but that didn't work either.
When I use the social connection (Google) it allowed me to login after putting http://localhost:3000/login in the Allowed Callback URL's.
But it still won't work for just a new user logging in.
Any help?
If it makes a difference:
Auth0 Logs show for the social login but there are no logs at all for when I connect otherwise
I think related to this is that I also get this every time I load the page:
There was an error fetching the SSO data. This could simply mean that there was a problem with the network. But, if a "Origin" error has been logged before this warning, please add "http://localhost:3000" to the "Allowed Origins (CORS)" list in the Auth0 dashboard: ...(link to my dash)
I get a 404 from the gravatar website
Also I get these errors (may not be related):
Refused to set unsafe header "accept-encoding"
Refused to set unsafe header "user-agent"
Something was wrong with the client in Auth0. I don't know what it was but I built an Angular4 app and connected to the same client in Auth0 and got the same errors. I then tried deleting the client in Auth0 and making a new one and now it works. I have no idea what was causing the error, but creating a new client and connecting to that one fixed the issue.

Why is my content script not adding iframe based sidepanel to some sites especially HTTPS sites? [duplicate]

The users of our website run our Chrome plugin which, amongst other things, performs cross-origin requests via XMLHttpRequest as described on the Chrome extension development pages. This has been running just fine for a few years now. However, ever since our users upgraded to the latest version of Chrome (v38), these requests have failed. Our site runs on HTTPS and some of the URLs loaded via our content script are on HTTP. The message is:
[blocked] The page at 'https://www.ourpage.com/' was loaded over
HTTPS, but ran insecure content from 'http://www.externalpage.com':
this content should also be loaded over HTTPS.
The reported line where the error occurred is in the content script where I'm issuing the HTTP call:
xhr.send(null);
I have no control over the external page and I would rather not remove SSL from our own page. Question: Is this a bug or is there a workaround that I am not aware of?
(Note: The permissions in the manifest were always set to <all_urls> which had worked for a long time. Setting it to http://*/ and https://*/ did not help.)
If possible, use the https version of that external page.
If that is not possible, use the background page to handle the AJAX request (example).

Resources