Stripe js v3 doesn't load with AdBlock

[trip16661]

I am developing a simple React app with SSR, and have found that Stripe.js doesn't load while AdBlock is enabled. Please have a look at the below:

Console when AdBlock is turned off

Console when AdBlock is turned on

Request headers when AdBlock is turned on

I'm currently using AdBlock with Chrome.

Not sure if this is the best place to raise this issue or if I should actually be raising it with AdBlock. In any case it's such a common extension that I can't imagine this not being an issue for a large group of users. I haven't tried this out in live mode yet, but I assume the issue may be there still.

I will carry on with development with AdBlock turned off but it would be great to hear back on this. I searched everywhere and didn't come up with anything, hard to believe I'm the only one coming against this but if I'm doing something wrong please let me know!

[asolove-stripe]

Hey @trip16661, thanks for reporting this!

I have AdBlock turned on in Chrome for Mac, and stripe.js seems to work on several sites that I tried, for example our elements examples page. And when I went to a site with ads blocked by AdBlock, I saw the console error listed as Failed to load resource: net::ERR_BLOCKED_BY_CLIENT which looks different from the one you're seeing.

That said, obviously something is going on with AdBlock and I'd love to fix it. Can you help me figure out how to reproduce?

• Is there a public url I can go to where it breaks for you?
• Or could you go to the elements examples page and see if it's also broken for you?
• Have you changed any of the AdBlock options from their defaults?

[trip16661]

@asolove-stripe

Ummm now that you link that site, I tried to use adblock and check it and the same error appears.

I don't have additional config in adblock but mine looks like:

[asolove-stripe]

Wow, that's very bizarre. I've got the same exact settings. Can you send me the version number of AdBlock? That's at the bottom of the settings page.

Really not sure what else could be going on...

[trip16661]

@asolove-stripe Version 3.32.0

Now that I review the site again, I discovered that the bug occurs only when it's your first time on the page. Once you reload again it just works normally.

For example, go to the stripe elements demo page, hard reload, the errors happen. Now do a normal reload, the error doesn't happen anymore.

I tried this repro on my local environment as well and it was exactly the same.

[asolove-stripe]

Hmm, I tried this on a couple computers and did not see the problem even with a hard reload. But they all were on version 3.31.2, so maybe that's the difference?

The hunt continues...

[Update: I upgraded to 3.32.0 and still don't see this. Arg.]

[susannepeng]

Hey guys, just jumping in, I'm seeing the same results as described by @trip16661 on the Stripe Elements example page.

My version of AdBlock: 3.31.2 My version of Chrome: 67.0.3396.99

[michelle]

I just installed Adblock@3.32 on Chrome@67.0.3396.99 with these options and am not seeing the issue:

I'm going to go ahead and submit a bug report to AdBlock to see what they say.

[michelle]

Here it is: https://help.getadblock.com/public/tickets/ae70e2a777101a58482af726979c89fae2c80ea497b33055397aab2a875213a5

[atty-stripe]

With the latest versions of Chrome and Adblock Plus, we're unable to reproduce this error. It also doesn't seem to impede functionality of Elements.

Please let us know if you see this again in newer versions, and we can reopen.

[michelle]

Just to close the loop here, Adblock folks got back to us on the ticket: https://help.getadblock.com/public/tickets/ae70e2a777101a58482af726979c89fae2c80ea497b33055397aab2a875213a5

The error you were seeing wasn't related to Stripe.js. It was a minor bug in an unrelated process that, while annoying, didn't cause any actual trouble. And good news, it's been fixed.

[4sh3]

Hi, Adblock is blocking stripe right now...

[atty-stripe]

Hi @4sh3, I cannot reproduce myself on latest Chrome with the latest version of AdBlock. Can you share your Chrome / AdBlock versions and a screenshot of which requests you see getting blocked? Is core payments functionality affected?

[MaffooBristol]

Just as a sidenote, I'm using uBlock Origin and I get a load of these errors, but the functionality still seems to work fine

[JohnnyLin-a]

I'm running Nano defender for adblocking and that is the culprit. Once I disabled it, the stripe elements were visible again. I know the last comment is almost 1 year old but it's still something that still happens May 2020.

Edit: Not all webistes are affected. The Stripe Elements examples page would work fine and it won't be blocked. But for my laravel project, that's the opposite.

[daprezjer]

@JohnnyLin-a , any luck? I'm having the same problem w/ my Laravel project, but with AdBlockPlus.

Update, I found it's when ABP's "block additional tracking" option is selected. W/o it, the page loads fine. But I'm guessing lots of folks will have this turned on?

[asolove-stripe]

@daprezjer could you maybe share logs from earlier in the session? All the things being blocked in that screenshot are logging, which should not block Stripe.js from working. I assume something is blocking a previous part of Stripe.js if it actually isn't working.

[daprezjer]

Appreciate it @asolove-stripe . I was in mid-development and just assumed all the blocked resources meant that Stripe wouldn't work. But you're correct, it does work fine even with the errors. If it isn't too difficult, can you explain what's being logged, aka what folks who have this turned on are missing out on?

[asolove-stripe]

@daprezjer you're not missing out on anything, other than being counted in our telemetry to detect if anything is broken. We get enough non-Adblock users that this isn't a problem.