What is a script from source 'undefined' mean in CSP?

Question

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.

Answer 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 :)