High CPU usage in Safari due to incomplete recaptcha+CSP implementation

[gingerbeardman]

For some reason the OD-DB search page really stresses out Safari.
It makes it unusable, especially when trying to do the recaptcha.

I have to use Chrome to not have my laptop fans go into overdrive.

ProductName: Mac OS X
ProductVersion: 10.13.6
BuildVersion: 17G65

ProductName: Safari
ProductVersion: 11.1.2
BuildVersion: 13605.3.8

MacBook Pro (Retina, 13-inch, Early 2013)
3 GHz Intel Core i7
8 GB 1600 MHz DDR3
macOS 10.13.6 (17G65)

[simon987]

There is very little JavaScript code executed in the search page (none at all iirc) other than:

• Bootstrap
• Size slider
• google recaptcha

I doubt that the size slider or the bootstrap code is causing this issue. Can you try to disable javascript for *.the-eye.eu with JS Blocker or similar in safari and confirm that it is the case?

[gingerbeardman]

This is even before I get to the page with the slider on.

Switching JS off prevents the issue.

I'll see if I can identify what exactly is the cause.

Screen recordings

• Safari: https://youtu.be/ekkFlSJiMII (slow with JS, quick but broken without)
• Chrome: https://youtu.be/ou8D1nf6fLQ (fast with JS)

[simon987]

Hmm, first of all it is quite unusual to have that many captcha to pop, I'm using the website quite frequently and I only get them after 15 or so searches.

What I'm trying to figure out is which script is causing your CPU to spike. With an extension like NoScript you can disable specific scripts and that would help narrowing it down

[gingerbeardman]

I'll do so shortly. I did try to use JSblocker but I couldn't decipher it's UI

I get multiple captchas for every search.

[gingerbeardman]

OK, clue number 1 in the console log

[gingerbeardman]

If I prevent https://www.google.com/recaptcha/api.js from loading, the above errors go away and everything runs at a good speed.

It seems the issue is with recaptcha and known about google/recaptcha#107
google/google-api-javascript-client#397
and elsewhere https://stackoverflow.com/a/39914043/28290

FWIW I use AdGuard DNS not sure that would affect recaptcha frequency?

[gingerbeardman]

example of how to get recaptcha to work with CSP
https://github.com/google/recaptcha/blob/master/examples/recaptcha-content-security-policy.php

more info, from
https://developers.google.com/recaptcha/docs/faq#im-using-content-security-policy-csp-on-my-website-how-can-i-configure-it-to-work-with-recaptcha

I'm using Content-Security-Policy (CSP) on my website. How can I configure it to work with reCAPTCHA?

We recommend using the nonce-based approach documented with CSP3. Make sure to include your nonce in the reCAPTCHA api.js script tag, and we'll handle the rest.

Note: reCAPTCHA also works with 'strict-dynamic' on browsers that support it.

Alternatively, please add the following values to the directives:

script-src https://www.google.com/recaptcha/, https://www.gstatic.com/recaptcha/
frame-src https://www.google.com/recaptcha/

[simon987]

Very weird.. as far I know, CSP is not enabled on my web server and I don't see (Content-Security-Policy) anywhere in the headers. Do you use any kind of proxy or VPN ?

Sadly I don't have a machine that can run Safari to troubleshoot the issue

[gingerbeardman]

I don't run a proxy or VPN, no. But I do run some adblockers. I'll have another look.

[gingerbeardman]

OK, I can reproduce in Safari Technology Preview (pre-release channel for devs) in which I have no extensions or adblockers installed. So I cannot see it being due to Safari itself.

Next, I changed tried different DNS servers, AdGuard, OpenDNS, Google. Problem persists.

Will look into the recaptcha file/include now.

[gingerbeardman]

There are 7 mentions of the nonce attribute in the code inserted into the page by the https://www.google.com/recaptcha/api.js file, whose goal seems to be matching the CSP of the google server.

As I said previously, if I block that then the errors and CPU thrashing goes away.

So I am back to square one, I have no idea why this is a problem for Safari and not Chrome.

Is there an alternate way of including the recaptcha to see if that helps?

I'm out of ideas, for now. I'll keep thinking about it.

[simon987]

This is how it's included:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

as specified in https://developers.google.com/recaptcha/docs/invisible. I don't see another way to do it

Do you have performance issues with the /submit page?

[gingerbeardman]

Yes, I literally can't use the site in Safari as its so slow. Every key press or mouse click takes seconds to register.

[simon987]

I was looking for an excuse to use a FOSS captcha, this might just be it...
Everything seems to indicate the ReCAPTCHA code is causing this issue so I'll try to look for alternatives in the next few weeks.
Thank you for the help!

[gingerbeardman]

Cheers, I'll keep an eye on it

[emredalkiran]

@gingerbeardman, check this and Mozilla's web site out. Currently, Safari does not support strict-dynamic.

[gingerbeardman]

@emredalkiran I'm not sure what you mean? The issue you linked, I had already linked earlier in this thread.

Even if Safari does not support that directive, I don't see any bad results from it on any other sites than od-db which is the odd thing

[gingerbeardman]

Just an extra data point: itchio/itch#2156

So I think I'll look into reporting this to google

[gingerbeardman]

I reported to this to the ReCAPTCHA team via email and it seems to have been fixed at the source code level?

Will leave issue open for a while.

[riptl]

@simon987 close dis

[gingerbeardman]

@terorie why?

[riptl]

@gingerbeardman It's not using reCAPTCHA anymore 😄

[gingerbeardman]

I see, there is a typo in the banner

After a slight hiccup, our servers are back online!
The project now longer relies on ReCaptcha, has enhanced elasticsearch configuration and is hosted on even better hardware, enjoy!

Should be no longer

[riptl]

Ohh good catch, I didn't even see that

[riptl]

Can you quickly do a pull request to fix it, please?