6

I have recently moved from stripe.js v2 to stripe.js v3 / elements. As part of this, I am recieving new CSP errors. These don't seem to be causing stripe to fail, but I would like to understand them: 

Content Security Policy: The page's settings blocked the loading of a resource at self ("script-src"). Source: ;undefined.
elements-inner-card-15fb9df8718486f330c3990dde96bfd7.html:1

Content Security Policy: The page's settings blocked the loading of a resource at self ("script-src"). Source: ;undefined.
controller-3984d4085075df939703ec0d22159407.html:1

Both elements-inner-card-15fb9df8718486f330c3990dde96bfd7.html and controller-3984d4085075df939703ec0d22159407.html are from stripe. What I don't understand is the script-src of undefined?

  • How can a script-src be undefined? A <script> element generally had a src , if not it's unsafe-inline. What does undefined mean?

  • How can I modify my CSP to allow Stripe v3?

Edit: the error only seems to occur on Firefox, when using LastPass. Chrome does not show this error, nor does Firefox with Addons Disabled.

mikemaccana
  • 110,530
  • 99
  • 389
  • 494
  • 1
    That looks like a bug in Firefox that you should consider reporting. (For some tips on reporting Firefox, see the answer at https://stackoverflow.com/questions/33059442/how-as-a-programmer-to-report-bugs-i-find-in-core-gecko-browser-engine-behavio/33059443#33059443). – sideshowbarker May 01 '18 at 02:17
  • @sideshowbarker Good point. Looks like the error happens everywhere, even on Stripe elements demo site, so filed: https://bugzilla.mozilla.org/show_bug.cgi?id=1458200 – mikemaccana May 01 '18 at 11:00
  • I’ve seen similar errors caused by browser add-ons and the like. Try restarting Firefox without add-ons and see if the error still happens – Stephen R May 05 '18 at 01:07

1 Answers1

1

For those ending up here like me, the solution was different than "disabling addons".

Context: I'm using stripe in React and I use react-stripe-elements to do it. The CSP error came when I was doing this: 

<form>
    {loading ? <Spinner /> : <CardElement /> }
</form>

It seems that the dynamic mounting/unmounting does not go well there. I changed it like that:

<form>
    <div className={classnames({hidden: !loading})}><Spinner /></div>
    <div className={classnames({hidden: loading})}><CardElement /></div>
</form>

With the corresponding CSS for hidden of course and the error went away.

Hope it helps some lost souls :)

Benoît Latinier
  • 2,062
  • 2
  • 24
  • 36