negative10xprogrammer | Stripe Developers | Page 1

summer juniperBOT May 25, 2023, 9:38 PM

#

split ingot May 25, 2023, 9:38 PM

#

Hello! What's going on?

dawn gulch May 25, 2023, 9:42 PM

#

so i've created full backiend suppotr for stripe etc and i wanted to try to implement the frontend so i can do some testing, i followed the stripe element quick guide (react) so i basically just copy pasted the code in as specified

#

but im getting these errors

#

Content Security Policy: The page's settings blocked the loading of a resource at inline ("script-src"). preload.js:136:52
TypeError: styleElement.sheet is null element-collapser.js:91:9
Content Security Policy: The page's settings blocked the loading of a resource at inline ("style-src"). element-collapser.js:88:56
Content Security Policy: The page's settings noticed the loading of a resource from inline ("style-src"). A CSP report is being sent.

split ingot May 25, 2023, 9:44 PM

#

It sounds like you have a content security policy that's not allowing those resources to load. What is on line 136 of preload.js?

dawn gulch May 25, 2023, 9:44 PM

#

iu should say i have zero frontend knowledge

#

sec

#

so I added this

     <meta http-equiv="Content-Security-Policy" content="
    script-src https://js.stripe.com https://maps.googleapis.com;
    frame-src https://connect-js.stripe.com https://b.stripecdn.com https://js.stripe.com;
    connect-src http://localhost:3000;
    style-src 'unsafe-inline';
">

And i only have this error now:

23:47:13,237 Content Security Policy: The page's settings blocked the loading of a resource at http://localhost:3000/static/js/bundle.js (“script-src”).

split ingot May 25, 2023, 9:50 PM

#

You need to also add localhost alongside the other domains to correct that one.

dawn gulch May 25, 2023, 9:51 PM

#

u mean like so?

     <meta http-equiv="Content-Security-Policy" content="
    script-src https://js.stripe.com https://maps.googleapis.com http://localhost:3000;
    frame-src https://connect-js.stripe.com https://b.stripecdn.com https://js.stripe.com http://localhost:3000;
    connect-src http://localhost:3000;
    style-src 'unsafe-inline' http://localhost:3000;
">

split ingot May 25, 2023, 9:51 PM

#

Or perhaps self if you're loading the page from localhost.

#

I don't think you want the port numbers, but let me check...

#

You can specify the port, but it's probably best to just do http://localhost. More details here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources

dawn gulch May 25, 2023, 9:53 PM

#

Alright so this still gives this error:
23:53:04,621 Content Security Policy: The page's settings blocked the loading of a resource at http://localhost:3000/static/js/bundle.js (“script-src”). localhost:3000

split ingot May 25, 2023, 9:54 PM

#

Hm. Maybe try without the trailing slash.

dawn gulch May 25, 2023, 9:56 PM

#

no difference rip.

https://stripe.com/docs/payments/quickstart

this is what i followed, react

#

so my app.js, checkoutform and app.css are identical to the example

split ingot May 25, 2023, 10:01 PM

#

Are you loading the page from localhost?

#

If so add 'self' (with the quotes) and see if that does the trick.

dawn gulch May 25, 2023, 10:03 PM

#

'self' instead of localhost on all of them?

#

or just add?

split ingot May 25, 2023, 10:05 PM

#

If the page is being loaded from localhost it would be instead of localhost.

dawn gulch May 25, 2023, 10:05 PM

#

yes it is, on all of them?

#

when I add it, nothing changes until i add it to script-src https://js.stripe.com https://maps.googleapis.com 'self';

and then i get a bunch of new errors

#

split ingot May 25, 2023, 10:09 PM

#

What are the new errors?

dawn gulch May 25, 2023, 10:10 PM

#

📎 message.txt

split ingot May 25, 2023, 10:12 PM

#

Network error? Hm.

#

Does, like, http://localhost:3000/static/js/bundle.js load if you go to it directly?

dawn gulch May 25, 2023, 10:13 PM

#

yes

split ingot May 25, 2023, 10:15 PM

#

Can you find any other details about the NetworkError there? Are you still seeing CORS errors, or just the NetworkError stuff?

dawn gulch May 25, 2023, 10:16 PM

#

ok so the network errors are Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

and the csp errors are still present

split ingot May 25, 2023, 10:18 PM

#

Ah, okay, I thought the CSP errors had gone away. The NetworkError is probably a result of the CSP issue. So what's the URL of the page you're loading?

#

It's a localhost URL, right?

dawn gulch May 25, 2023, 10:19 PM

#

yes http://localhost:3000/

split ingot May 25, 2023, 10:20 PM

#

Hm. self should be taking care of it then:

Refers to the origin from which the protected document is being served, including the same URL scheme and port number. You must include the single quotes.

#

🤔

dawn gulch May 25, 2023, 10:20 PM

#

So exactly like this? i dont know if the other ones are correct for stripe elements as per the guide above

split ingot May 25, 2023, 10:21 PM

#

Can you paste the current CSP error just to make sure I'm aligned with the current state?

dawn gulch May 25, 2023, 10:22 PM

#

00:16:06,947 Content Security Policy: The page's settings blocked the loading of a resource at inline (“script-src”). preload.js:136:52
00:16:07,356 Content Security Policy: The page's settings blocked the loading of a resource at eval (“script-src”). App.css:118
00:16:07,356 Content Security Policy: The page's settings alerted about a resource being loaded from inline (“script-src”). A CSP report is being sent. preload.js:136:52
00:16:07,518 Content Security Policy: The page's settings blocked the loading of a resource at inline (“script-src”). preload.js:136:52
00:16:08,108
TypeError: styleElement.sheet is null
element-collapser.js:91:9
00:16:08,109 Content Security Policy: The page's settings blocked the loading of a resource at inline (“style-src”). element-collapser.js:88:56
00:16:08,109 Content Security Policy: The page's settings alerted about a resource being loaded from inline (“style-src”). A CSP report is being sent. element-collapser.js:88:56

split ingot May 25, 2023, 10:24 PM

#

Oh, okay, all that's left are inline and eval errors. If you add both 'unsafe-eval' and 'unsafe-inline' to script-src and 'unsafe-inline' to style-src I think you'll be good.

#

That said, eval is very unsafe, so be careful with that one. That's basically allowing the use of eval() and other unsafe methods.

dawn gulch May 25, 2023, 10:29 PM

#

just to make sure:

like this?

split ingot May 25, 2023, 10:30 PM

#

Yep, I think that should do it.

dawn gulch May 25, 2023, 10:32 PM

#

00:31:04,830 Content Security Policy: Page settings blocked the loading of a resource on inline ("script-src"). preload.js:136:52
00:31:04,830 Content Security Policy: Page settings flagged a load of a resource from inline ("script-src"). A CSP report will be sent. preload.js:136:52
00:31:04,895 Content Security Policy: Page settings blocked the loading of a resource on inline ("script-src"). preload.js:136:52
00:31:05,501 TypeError: styleElement.sheet is null
element-collapser.js:91:9
00:31:05,501 Content Security Policy: Page settings blocked the loading of a resource on inline ("style-src"). element-collapser.js:88:56
00:31:05,501 Content Security Policy: Page settings flagged a load of a resource from inline ("style-src"). A CSP report will be sent. element-collapser.js:88:56

oh man im going crazy 😛 when i switch self to localhost instead i only get the one error tho:

00:32:07,571 Content Security Policy: Page settings blocked the loading of a resource at http://localhost:3000/static/js/bundle.js ("script-src"). localhost:3000

Not sure if that makes any difference to u tho

split ingot May 25, 2023, 10:33 PM

#

I think maybe you have another Content Security Policy set somewhere. Are you seeing a Content-Security-Policy header when the page loads?

dawn gulch May 25, 2023, 10:34 PM

#

u mean when i reload and inspect network?

there's nothing in the request headers:

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: *
Content-Type: text/html; charset=utf-8
Accept-Ranges: bytes
ETag: W/"7f6-MwdnDMpuwEKlta+Wa4enH6J8wLs"
Vary: Accept-Encoding
Content-Encoding: gzip
Date: Thu, 25 May 2023 22:33:57 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

split ingot May 25, 2023, 10:34 PM

#

It would be in the response headers.

dawn gulch May 25, 2023, 10:35 PM

#

yeah sorry response

#

that was it above

#

very strange

split ingot May 25, 2023, 10:36 PM

#

This error in particular is strange because it doesn't indicate specifically what blocked it: Content Security Policy: Page settings blocked the loading of a resource at http://localhost:3000/static/js/bundle.js ("script-src"). localhost:3000

dawn gulch May 25, 2023, 10:37 PM

#

does it have to do with cors being set to enable any origin?

split ingot May 25, 2023, 10:37 PM

#

What browser are you using?

dawn gulch May 25, 2023, 10:37 PM

#

mozilla firefox

split ingot May 25, 2023, 10:37 PM

#

Ah, okay, can you try in Chrome? I think Chrome provides a more helpful error.

dawn gulch May 25, 2023, 10:38 PM

#

ur right

App.js:18 Refused to connect to 'https://localhost:7299/process-card-payment' because it violates the following Content Security Policy directive: "connect-src 'self'".

(anonymous) @ App.js:18
App.js:18 Refused to connect to 'https://localhost:7299/process-card-payment' because it violates the document's Content Security Policy.
(anonymous) @ App.js:18
App.js:18 Refused to connect to 'https://localhost:7299/process-card-payment' because it violates the following Content Security Policy directive: "connect-src 'self'".

(anonymous) @ App.js:18
App.js:18 Refused to connect to 'https://localhost:7299/process-card-payment' because it violates the document's Content Security Policy.

split ingot May 25, 2023, 10:45 PM

#

Ah, a brand new port number!

#

Add that separately.

dawn gulch May 25, 2023, 10:46 PM

#

that's the port for the backend

#

i need both?

#

wasn't i supposed to omit the port number?

#

yes

#

that worked!

#

i think

#

wait

#

haha

#

ok so the errors are no longer there in chrome but in firefox they are

#

looks like this now

#

right the slash

split ingot May 25, 2023, 10:50 PM

#

Okay, and what are the errors in Firefox now?

#

Oh, you have https there too.

#

Try http://localhost:*

#

No s, and a wildcard for the port number. No trailing slash.

dawn gulch May 25, 2023, 10:53 PM

#

in chrome i only have this:

Failed to load resource: the server responded with a status of 500 ()
:7299/process-card-payment:1 Failed to load resource: the server responded with a status of 500 ()

probably due to some server side error idk

and firefox:

00:52:53,105 Content Security Policy: Page settings blocked the loading of a resource on inline ("script-src"). preload.js:136:52
00:52:53,105 Content Security Policy: Page settings flagged a load of a resource from inline ("script-src"). A CSP report will be sent. preload.js:136:52
00:52:53,529 Content Security Policy: Page settings blocked the loading of a resource on inline ("script-src"). preload.js:136:52
00:52:53,967 TypeError: styleElement.sheet is null
element-collapser.js:91:9
00:52:53,968 Content Security Policy: Page settings blocked the loading of a resource on inline ("style-src"). element-collapser.js:88:56
00:52:53,968 Content Security Policy: Page settings flagged a load of a resource from inline ("style-src"). A CSP report will be sent. element-collapser.js:88:56

split ingot May 25, 2023, 10:55 PM

#

Does http://localhost:* make any difference?

dawn gulch May 25, 2023, 10:55 PM

#

unfortunately not

split ingot May 25, 2023, 10:56 PM

#

Hm. Not sure what Firefox isn't liking...

dawn gulch May 25, 2023, 10:56 PM

#

split ingot May 25, 2023, 10:57 PM

#

I mean, you're allowing inline right there...

#

Maybe put the specific domains last, with the self and unsafe- stuff first?

dawn gulch May 25, 2023, 11:06 PM

#

nothing unfortunately. very weird

split ingot May 25, 2023, 11:10 PM

#

Yeah, I dunno. It's especially strange that it works in Chrome but not Firefox.

#

The directives you have are correct as far as I can tell.

#negative10xprogrammer