braintree / braintree-web

A suite of tools for integrating Braintree in the browser
https://developer.paypal.com/braintree/docs/start/hello-client/javascript/v3
MIT License
444 stars 134 forks source link

Errors on React #652

Closed mustom closed 2 years ago

mustom commented 2 years ago

General information

Issue description

My React version is 17.0.2, and I use CRA. BrainTree component is not loaded on checkout component. I got this errors on my chrome console. It was not happened when I tested it on my localhost. But, when I run my app with real domain with SSL, the errors below were displayed. Nothing displayed on Braintree window.

dropin.js:2187 Refused to connect to 'https://payments.sandbox.braintree-api.com/graphql' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Refused to connect to 'https://api.sandbox.braintreegateway.com/merchants/4pcx7767h37h85r6/client_api/v1/configuration?authorizationFingerprint=eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiIsImtpZCI6IjIwMTgwNDI2MTYtc2FuZGJveCIsImlzcyI6Imh0dHBzOi8vYXBpLnNhbmRib3guYnJhaW50cmVlZ2F0ZXdheS5jb20ifQ.eyJleHAiOjE2NjczMTExMzgsImp0aSI6ImVjYTM0ZWY1LTQ3ODYtNDQ2Ny04NzNiLWUwOGE3NzhhNjA0ZCIsInN1YiI6IjRwY3g3NzY3aDM3aDg1cjYiLCJpc3MiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tIiwibWVyY2hhbnQiOnsicHVibGljX2lkIjoiNHBjeDc3NjdoMzdoODVyNiIsInZlcmlmeV9jYXJkX2J5X2RlZmF1bHQiOmZhbHNlfSwicmlnaHRzIjpbIm1hbmFnZV92YXVsdCJdLCJzY29wZSI6WyJCcmFpbnRyZWU6VmF1bHQiXSwib3B0aW9ucyI6e319.6-xsTkUbmd7VhzIR-t5YQOkRZYFWXNXhLiRFZBZ6VN_V-PlvBZzIovghuedeBUTKncyi-lFB7RALUXZ__sM0Jg&_meta%5BmerchantAppId%5D=berrysix.com&_meta%5Bplatform%5D=web&_meta%5BsdkVersion%5D=3.82.0&_meta%5Bsource%5D=client&_meta%5Bintegration%5D=custom&_meta%5BintegrationType%5D=custom&_meta%5BsessionId%5D=ae495ef7-ef28-441d-a212-768f528d450a&braintreeLibraryVersion=braintree%2Fweb%2F3.82.0&configVersion=3' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Refused to connect to 'https://api.sandbox.braintreegateway.com/merchants/4pcx7767h37h85r6/client_api/v1/configuration?authorizationFingerprint=eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiIsImtpZCI6IjIwMTgwNDI2MTYtc2FuZGJveCIsImlzcyI6Imh0dHBzOi8vYXBpLnNhbmRib3guYnJhaW50cmVlZ2F0ZXdheS5jb20ifQ.eyJleHAiOjE2NjczMTExMzgsImp0aSI6ImVjYTM0ZWY1LTQ3ODYtNDQ2Ny04NzNiLWUwOGE3NzhhNjA0ZCIsInN1YiI6IjRwY3g3NzY3aDM3aDg1cjYiLCJpc3MiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tIiwibWVyY2hhbnQiOnsicHVibGljX2lkIjoiNHBjeDc3NjdoMzdoODVyNiIsInZlcmlmeV9jYXJkX2J5X2RlZmF1bHQiOmZhbHNlfSwicmlnaHRzIjpbIm1hbmFnZV92YXVsdCJdLCJzY29wZSI6WyJCcmFpbnRyZWU6VmF1bHQiXSwib3B0aW9ucyI6e319.6-xsTkUbmd7VhzIR-t5YQOkRZYFWXNXhLiRFZBZ6VN_V-PlvBZzIovghuedeBUTKncyi-lFB7RALUXZ__sM0Jg&_meta%5BmerchantAppId%5D=berrysix.com&_meta%5Bplatform%5D=web&_meta%5BsdkVersion%5D=3.82.0&_meta%5Bsource%5D=client&_meta%5Bintegration%5D=custom&_meta%5BintegrationType%5D=custom&_meta%5BsessionId%5D=ae495ef7-ef28-441d-a212-768f528d450a&braintreeLibraryVersion=braintree%2Fweb%2F3.82.0&configVersion=3' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

mustom commented 2 years ago

I found the solution. This issue was happened by one of node.js middleware helmet. I should have set content security policy setting for Helmet.