mcaptcha / glue

glue code to setup mCaptcha on your website

mCaptcha

Proof of work based, privacy respecting CAPTCHA system with a kickass UX.

STATUS: ACTIVE DEVELOPMENT

Skip to demo

mCaptcha is a privacy respecting, free CAPTCHA system with a kickass UX. Your users no longer have to interact with ridiculous image-based CAPTCHA system, wasting precious mental bandwidth. Instead, your computer will do the work for you, see for yourself!

How does it work?

mCaptcha uses SHA256 based proof-of-work (PoW) to rate limit users.

When a user wants to do something on a mCaptcha-protected website,

1. they will have to generate proof-of-work (a bunch of math that will takes time to compute) and submit it to mCaptcha.

2. We'll validate the proof:

   • if validation is unsuccessful, they will be prevented from accessing their target website
   • if validation is successful, read on,

3. They will be issued a token that they should submit along with their request/form submission to the target website.

4. The target website should validate the user-submitted token with mCaptcha before processing the user's request.

The whole process is automated from the user's POV. All they have to do is click on a button to initiate the process.

mCaptcha makes interacting with websites (computationally) expensive for the user. A well-behaving user will experience a slight delay (no delay when under moderate load to 2s when under attack; PoW difficulty is variable) but if someone wants to hammer your site, they will have to do more work to send requests than your server will have to do to respond to their request.

Why use mCaptcha?

• Free software, privacy focused
• Seamless UX - No more annoying CAPTCHAs!
• No tracking: Our CAPTCHA routes are cookie free!
• IP address independent: your users are behind a NAT? We got you covered!
• Resistant to replay attacks: proof-of-work configurations have short lifetimes (30s) and can be used only once. If a user submits a PoW to an already used configuration or an expired one, their proof will be rejected.

Demo

Client-side widget:

mCaptcha's UX is super silent, solving CAPTCHAs have never been more easier. One click and you are on your way. To observe mCaptcha in action, open dev tools and monitor console and network activity.

1. Link to widget

2. Video:

Demo servers are available at:

• https://demo.mcaptcha.org/
• https://demo2.mcaptcha.org/ (runs on a Raspberry Pi!)

Core functionality is working but it's still very much work-in-progress. Since we don't have a stable release yet, hosted demo servers might be a few versions behind master. Please check footer for build commit.

Feel free to provide bogus information while signing up (project under development, database frequently wiped).

Self-hosted:

Clone the repo and run the following from the root of the repo:

git clone https://github.com/mCaptcha/mCaptcha.git
docker-compose up -d

After the containers are up, visit http://localhost:7000 and login with the default credentials:

• username: aaronsw
• password: password

It takes a while to build the image so please be patient :)

See DEPLOYMENT.md for detailed alternate deployment methods.

Development:

See HACKING.md

Deployment:

See DEPLOYMENT.md

Configuration:

See CONFIGURATION.md

Funding

NLnet

2023 development is funded through the NGI0 Entrust Fund, via NLnet. Please see here for more details.

glue's Issues

upstream dependency conflict for react version 18.2.0

npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from @mcaptcha/[email protected]
npm ERR! node_modules/@mcaptcha/react-glue
npm ERR!   @mcaptcha/react-glue@"^0.1.0-rc2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Issue Description:
Upstream Dependency Conflict using nextjs and @mcaptcha/react-glue

Problem:
When attempting to install @mcaptcha/react-glue for Nextjs project without (legacy-peer-deps or force), an upstream dependency conflict is encountered.

Version:
next - "13.4.0",
react - "18.2.0",
react-dom - "18.2.0",
@mcaptcha/react-glue - "^0.1.0-rc2"

Steps to Reproduce:

1. Create or navigate to a project that utilizes React version 18.2.0.
2. Attempt to install "@mcaptcha/react-glue" version "^0.1.0-rc2" within this project using a package manager (e.g., npm or yarn).
3. Observe installation errors or warnings regarding upstream dependency conflicts.

Widget load a whole <html> page?

When adding the widget with

<script src="/static/js/mcaptcha.js"></script>
<script charset="utf-8">
  let config = {
    widgetLink: new URL(
        "https://mymcaptcha.tld/widget/?sitekey=b1JVrsLSQG6cM8cOPa"
    ),
  };
  new mcaptchaGlue.default(config);
</script>

And adding this to my form:

<div id="mcaptcha__widget-container"></div>

I end up with a whole <html><head><body>.... inside my form.... Is there something I'm not doing right? Or is this the intended behaviour?

Feature Request: Autostart solving captcha with a trigger (React)

It would be great if the captcha check could be automatically started with a JavaScript trigger. I haven't found a way to do that (or at least I'm not aware of one).

Background: If I use the captcha for a contact form it can automatically be solved once the user enters the text in a text field so he doesn't need to click on it and wait for it before sending the contact formular.

Solutions like FriendlyCaptcha have this feature.

rm inline scripting in gluecode loading mechanism

Get mCaptcha configuration from data-* instead for initializing the mCaptcha obj in client code.

[ISSUE] Be more ISO with other captcha providers

I'm the maintainer of Crowdsec-bouncer-traefik-plugin and some folks ask me to implement mCaptcha provider here.

The front end page to protect user with our plugin, is build like this for every Captcha Provider:

<head>
...
   <script src="{{ .FrontendJS }}" async defer></script>
...
</head>
<body>
...
   <div id="captcha" class="{{ .FrontendKey }}" data-sitekey="{{ .SiteKey }}" data-callback="captchaCallback">
...
   
  <script>
    function captchaCallback() {
      setTimeout(() => document.querySelector('#captcha-form').submit(), 500);
    }
  </script>
</body>

Is it possible to support this kind of setup with mCaptcha ? It would be super efficient if someone want to change from other provider to mCaptcha.

PS: Excellent project, good initiative to build some complete open source Captcha lib !

Changelog for 0.1.0-rc1

Trying to upgrade @mcaptcha/vanilla-glue from 0.1.0-alpha-3 to 0.1.0-rc1, I'm faced with this error:

Error: Couldn't find "mcaptcha_url" dataset in elmement (ID=mcaptcha__token-label)

Is there a changelog or migration guide available?

Also note the typo elmement in the error message.

Adding Option to Reset CAPTCHA via Code

Issue description
There should be an option to reset the mCaptcha from the codebase.

Problem
Within our project, we have integrated mCaptcha as a security measure before submitting forms. However, upon form submission, while all input values reset successfully using the useState hook, the mCaptcha checkbox remains checked. This issue arises because the mCaptcha checkbox resides within an iframe, and due to security restrictions, we cannot directly manipulate its state from our codebase, especially considering it has a different origin.

Version:
next - "13.4.0",
react - "18.2.0",
react-dom - "18.2.0",
@mcaptcha/react-glue - "0.1.0-rc3"

Expected Behaviour:
The mCaptcha should be resettable from the codebase.

Massive errorcount when having another application using postMessage

The core library relies on the message event to (it seems) exchange the token from the worker to the application.

But when having another application/library running (i.e. Angular dev tools) that uses the postMessage/message ecessivly, this leads to many errors in the log.

The related code seems to be this:

glue/packages/core/src/index.ts

Lines 98 to 107 in b06f3e7

	handle = (e: MessageEvent) => {
	console.log(`message received from ${e.origin} with data: ${e.data.token}`);
	if (new URL(e.origin).host != this.widgetLink.host) {
	console.error(
	`expected message from ${this.widgetLink.host} but received message from ${e.origin}. Aborting.`
	);
	return;
	}
	this.updateState(e.data.token);
	};

Maybe the library should send some sort of identification in the message? I.e: { type: 'mcaptcha', token: xxx }, so the code can check for the type and ignore any other messages?

Get rid of fixed widget sizes

Propagate #12 to other framework libs