Include ReCaptcha without a Remote Script

Add-ons Development
#1

Hello!

I need to use ReCaptcha in our popup to prevent bot sign ups and mitigate brute force attempts.

However the Mozilla security policy of no remote scripts is making this difficult. I was told we can’t add the Google URLs to our CSP and do it that way.

I’ve tried adding the contents of https://www.gstatic.com/recaptcha/releases/A1Aard-wURuGsXRGA7JMOqVO/recaptcha__en_gb.js into the project and add it to web_accessible_resources and having another file which is a modified version of
https://www.google.com/recaptcha/api.js

Where we use const recaptchaUrl = browser.runtime.getURL('vendor/recaptcha-main.js') for the script injection part of the ReCaptcha code.

However ReCaptcha doesn’t like this and the ready callback is never called.

How can we include ReCaptcha in our extension whilst not using remote scripts?

Any help would be greatly appreciated :orange_heart:

1 Like
#2

I saw a small bit of success by taking the contents of https://www.gstatic.com/recaptcha/releases/A1Aard-wURuGsXRGA7JMOqVO/recaptcha__en_gb.js and placing the code inside a function which I can invoke called initializeMainRecaptcha. Instead of the web_accessible_resources route where I load the script into a script tag.

That got it working for Chrome. Firefox is still having none of it.

#3

I adore your attempt to have the sign up page included within the source of your extension. However if this is a server side account, it is probably simpler and easier to maintain if the sign up (and login) is handled by pages served by your authentication service.

#4

As in a redirect similar to how Pocket does it?

#5

I’m not sure what you’re referring to with pocket. In general yes, by directing the flow to a tab/window that has your website loaded in it. Since you’re an extension you could then still get the result directly from the website, using a contentScript or the tabs API to read an URL etc. Or you may even go for OAuth and use the identity API, which will then be very similar to how authentication often works in mobile apps.

1 Like
#6

Yeah that’s exactly what I was thinking. For reference this is Pocket logging in just takes you to a new tab as you mentioned.

We’ve done something similar in the past by posting messages to the extension so we can definitely do this.

Thank you for your time Martin, you’ve been a great help!