friendlycaptcha / friendly-challenge Goto Github PK

we started to use captcha to protect certain searches on our website from abuse and since monday we see spikes of errors in our logs in response to our verification requests

response status: 401

{"success":false,"errors":["secret_invalid"]}

this is right after a flurry of successful verifications:

after about 10minutes everything is fine again (while the secret did not change).
we do not use site verification because quite a couple of domains are involved but we might give that a go. could it be that an attacker sends his own solutions and relies on us accepting those as per your documentations best practices?

I am not seeing the black icons as shown in "Screenshots of the widget in action":

https://docs.friendlycaptcha.com/

I followed the install docs exactly. It may have to do with bootstrap CSS because the button inside the widget is 100% width.

Thanks for this great library and the recent update providing a widget including polyfills. I do have one question though. To me it only makes sense to use the polyfills in browsers that also need the worker.compat.js script. Wouldn't it make more sense to use the compat worker in the polyfilled widget?

Hello,
we are trying to implement FC to replace googles ReCaptcha on our site. But we came across a big problem.
The first initial request always fails. after the first initial fail, everything works fine, but we can’t accept the initial high rejected verification. We came to the conclusion that if you just wait long enough, FC will approve the request, but the waiting time is very high.
The rejected verification were over a third of all verification before we took it from the live system.

we have created a test site for you:
https://devel-www.ariva.de/demo/friendly_captcha.m

getTemplate in dom.ts contains 2 inline styles and getPuzzle in puzzle.ts contains another one. Not only do these inline styles make it harder to apply custom styling, they also conflict a possible Content-Security-Policy that forbids inline styles. It would be nice if these styles could be moved to styles.css.

hey @gzuidhof! Currently you folks are publishing untranspiled ESM i.e. in index.js export { WidgetInstance }. This is problematic when we don't transpile in case of jest etc. I know there is workaround but that's something not the idle way I would say. Could this be please fixed?

And sorry to mention you directly. You could tell that we are in bit hurry :D

Hello,

could you please change the error message below to something meaningful and also make it customizable for translation:

Such a problem normally should not occur but if it does, the error message could be more user friendly .

Thank you and regards,

It requires JS.

when trying to verify the solution we get a plain text response with status 403 (which does not seem to be documented).

this is on an internal system (which is why the widget is called with an app with the domain left blank - appid 394675017)
unfortunately we did not save the original api-key we created, but subsequently created keys should supersede it, right?

our request looks like this

 my $ua = LWP::UserAgent->new; 
 my $req = HTTP::Request->new('POST',
     'https://api.friendlycaptcha.com/api/v1/siteverify');
 $req->header('Accept' => 'application/json');
 $req->content_type('application/json');

 $req->content(encode_json({
          solution => $solution,
          secret   => $FRC_API_KEY,
     }));
 my $res = $ua->request($req);

what are we doing wrong here?

This would make the captcha way more flexible. At the moment I have to do something like this to make it work with Symfony forms (in Twig):

<div class="frc-captcha" data-name="{{ full_name }}" data-sitekey="{{ siteKey }}" data-callback="onCaptcha"></div>
    <script>
        function onCaptcha(s) {
            var input = s.e.querySelector('input');
            input.setAttribute('name', s.e.dataset.name);
        };
    </script>

Also optionally setting the required attributed based on some config would be nice.

According to the documentation, the response looks like this:

{
  "success": true|false,
  "errorCodes": [...] // optional
}

But in fact I get something like this:

{
  "success": false,
  "details": "puzzle expired",
  "errors": [
    "solution_timeout_or_duplicate"
  ]
}

Could you please clarify and update the documentation?

Request by André Bonna:

When I click in the button to verify my website the friendly challange code requests:

Request URL: https://api.friendlycaptcha.com/api/v1/puzzle?sitekey=FCMSH93UHD61PBUB
Request Method: OPTIONS
Status Code: 403
Remote Address: 172.67.219.80:443
Referrer Policy: strict-origin-when-cross-origin

The response headers are:

alt-svc: h3-27=":443"; ma=86400, h3-28=":443"; ma=86400, h3-29=":443"; ma=86400, h3=":443"; ma=86400
cache-control: private, max-age=0, no-store, no-cache, must-revalidate, post-check=0, pre-check=0
cf-chl-bypass: 1
cf-ray: 6668476ddc044d1b-GRU
cf-request-id: 0af50af8ab00004d1b6a881000000001
content-encoding: br
content-type: text/html; charset=UTF-8
date: Mon, 28 Jun 2021 16:26:49 GMT
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
expires: Thu, 01 Jan 1970 00:00:01 GMT
nel: {"report_to":"cf-nel","max_age":604800}
permissions-policy: accelerometer=(),autoplay=(),camera=(),clipboard-read=(),clipboard-write=(),fullscreen=(),geolocation=(),gyroscope=(),hid=(),interest-cohort=(),magnetometer=(),microphone=(),payment=(),publickey-credentials-get=(),screen-wake-lock=(),serial=(),sync-xhr=(),usb=()
report-to: {"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v2?s=z6w8KxnYysI5HUy7W27Bve%2BW6XXYZsW2BOrnlEDM6QSYZT59YxBbF69cYerIG%2FdhheX7J6Oi%2F%2FrsBHxjQ1OqNhK1O2lGWC%2FVX%2FxaZtr6Jf6kuZH23YZLUR%2FsQ5nkMGXRs0bXjAo%3D"}],"group":"cf-nel","max_age":604800}
server: cloudflare
vary: Accept-Encoding
x-frame-options: SAMEORIGIN

The installation page of the docs.friendlycaptcha.com says:
"It is recommended that you include the async and defer attributes like in the examples above, they make sure that the browser does not wait to load these scripts to show your website."

Regarding the defer attribute please read this page:
https://hacks.mozilla.org/2009/06/defer/
Or just quickly see this answer:
https://stackoverflow.com/questions/8638551/script-defer-and-document-ready/8638597#8638597
that says this:
"Defer is another such inconsistency that should be avoided for well written pages."

It turned out that following your defer recommendation caused difficult-to-find problems on our website, because at the time the friendlycaptcha script was executed by the browser, the .frc-captcha div did not exist yet, despite the defer attribute. So indeed, the defer cannot be relied upon.

Here is something simple that worked in our case, adding the following lines to the end of widget.js, basically wrapping the last few lines into this:

document.addEventListener("DOMContentLoaded", (event) => {
var fc = window.friendlyChallenge;
// and a few more lines...

});

It is better if you use this (or similar) method in the next version of your script, and remove the defer recommendation from the documentation.
You can also see "What is the ultimate way of detecting if document is ready in JavaScript?" at the end of this page:
https://codetonics.com/javascript/detect-document-ready/

Thanks and best wishes!

I am using the latest NPM version of 7.3.0 of friendly-challenge. Continue to fail on importing via the following method.

import { WidgetInstance } from "friendly-challenge";

Error message:
SyntaxError: Unexpected token 'export'
Source //

external%20%22friendly-challenge%22 (1:0) @ Object.friendly-challenge

1 | module.exports = require("friendly-challenge");

Uncaught at (file://D:\app\node_modules\friendly-challenge\index.js:534)

Hello, could you please make the restart button visible/available if the solution already exists? For the case one need to restart captcha manually.

Regards, Gena

// Catalan
const LANG_CA: Localization = {
text_init: "Inicialitzant...",

text_ready: "Verificació Anti-Robot",
button_start: "Fes clic per començar la verificació",

text_fetching: "Carregant repte",

text_solving: "Verificant que ets humà..",
text_completed: "Soc humà",

text_expired: "La verificació Anti-Robot ha expirat",
button_restart: "Reiniciar",

text_error: "Ha fallat la verificació",
button_retry: "Tornar a provar",
text_fetch_error: "Error connectant a",
};

I am using the latest NPM version of 7.3.0 of friendly-challenge. Continue to fail on importing via the following method. Im not sure if I am doing something wrong. I am using a react.js/ next.js setup. I'm assuming this is a syntax-related error from pulling es6 syntax pull into this node.js environment, just not sure how to resolve this.

import { WidgetInstance } from "friendly-challenge";

Error message:
SyntaxError: Unexpected token 'export'
Source //

external%20%22friendly-challenge%22 (1:0) @ Object.friendly-challenge

1 | module.exports = require("friendly-challenge");

Uncaught at (file://D:\app\node_modules\friendly-challenge\index.js:534)

Hi, after doing a bit of research, I've realized that FriendlyCaptcha isn't entirely open source.

Alternatively, do it yourself

FriendlyCaptcha is open source allowing you to build out this service yourself.

https://friendlycaptcha.com/

Its front-end and algorithms are open source (MIT), the SaaS wrapper around the hosted version is not [yet, I set it as a sponsorship goal], I hope that’s ok.

https://codeberg.org/swiso/website/issues/133

I will appreciate if the website makes it clear that some bits are proprietary.

Hey @gzuidhof! Is it already released #38? because 0.8.6 still have older file

Como puedo eliminar mi cuenta de Friendly Capcha?

Hello,

Thanks for this refreshing anti-robot solution.

Looking at the code, it seems that the widget is english-only.
Do you plan, someday, to make it available in several languages?

When fetching the captcha on my local development server (localhost:3000) I receive the following error response:

Status 403 Forbidden
Response Body: {"errors":["endpoint_not_enabled"]}

The documentation doesn't state anything. so.. help please?!

The project is a next.js project, Widget is embedded in a react component and loaded dynamically to circumvent the SSR issues due to ES6.

Suggestion from a Friendly Captcha user:

For your part, I think you're already doing everything an external accessibility library should do. They ensure that those elements that are generated by your library are barrier-free - at least for screen readers.

Personally, I would advise site operators who integrate your library to use startedCallback and doneCallback for messages to screen readers - something like this:

<form>

<div class = “frc-captcha“ id = ”captcha-challenge”> </div>

<input type = ”submit” value = ”Submit” id = ”submitButton2 disabled />

</form>

<div class = 2sr-only ”id =” alertDiv ”aria-live =” polite ”> </div>

<script>

Let el = document.getElementById (“captcha-challenge”);

Let captchaInstance = new friendlyChallenge.WidgetInstance (el, {

Sitekey: "...",

startedCallback: function () {

document.getElementById (“alertDiv”). innerHtml = “Solving CAPtCHA…”;

},

doneCallback: function (solution) {

document.getElementById (2submitButton ”). removeAttribute (2disabled”);

document.getElementById (“alertDiv”). innerHtml = “CAPTCHA solved! You may submit the form now. ”;

}

});

</script>

For a blind person it is like this: He / she navigates to the form and begins to enter data. As a rule, the CAPTCHA solution then begins. Until the blind person reaches the CAPTCHA field (and thus notices it at all) this is long completed. But now we're used to having to do something with CAPTCHAs.

Accordingly, the blind person will probably first see if there is anything left to do. In my opinion, the text “I am human” does not really indicate that the CAPTCHA has already been completed - at your demo I expected a checkbox not marked as such in addition to “I am human”, in the style of “I am not a robot “at Google ReCAPTCHA.

(This confusion is mainly due to the fact that we are used to having to make an effort with CAPTCHAs.)

The notifications described above would help here; Live regions are something that (in my opinion) should never be implemented by an external library, but always by the site operator himself; they can become annoying very quickly if there are too many live regions.

If you would still like to tackle the "problem" from your side, I recommend the following procedure:

<span class = “sr-only“> CAPTCHA solved! </span> I am human

An example of a .sr-only class would be:

.sr-only {

position: absolute;

width: 1px;

height: 1px;

padding: 0;

margin: -1px;

overflow: hidden;

clip: rect (0,0,0,0);

border: 0;

}

More on this here: https://stackoverflow.com/questions/34175774/what-is-the-use-of-sr-only-focusable-class-in-bootstrap

This ensures that additional info text for screen readers is recognized by them (unlike display: none), but it is visually hidden and thus irritates those who cannot see.

However, as I said, these are more adjustments in the area of ​​user-friendliness than in the area of ​​accessibility.

Hi,

is there a way to set FriendlyCaptcha up for test mode? I would like to write testcafe tests for some pages that are secured with FriendlyCaptcha. Recaptcha for example, has a special siteKey and secretKey that you can use so that it will always let you through.

// Spanish
const LANG_ES: Localization = {
text_init: "Inicializando..",

text_ready: "Verificación Anti-Robot",
button_start: "Haga clic para iniciar la verificación",

text_fetching: "Cargando desafío",

text_solving: "Verificando que eres humano..",
text_completed: "Soy humano",

text_expired: "Verificación Anti-Robot expirada",
button_restart: "Reiniciar",

text_error: "Ha fallado la verificación",
button_retry: "Intentar de nuevo",
text_fetch_error: "Error al conectarse a",
};

IE 11 fails to load FriendlyCaptcha with provided minified widget javascript at all.

Dev Tools Console shows an Exception, but no clue how to fix that. It happens with and without polyfills.

You refer to support IE11 out of the box - this is not working for us.
https://docs.friendlycaptcha.com/#/browser_support?id=internet-explorer

The license is empty (https://github.com/gzuidhof/friendly-challenge/blob/master/LICENSE.md), so I assume it's open source, and not free and open source?

Please provide links or directions in the docs to implement content security policy.

Examples:

https://stripe.com/docs/security/guide#content-security-policy

https://docs.hcaptcha.com/#content-security-policy-settings

Hi,

the problem description:
"At this moment a single friendlycaptcha is displayed on a certain page. So the first captcha on the open abstracts page is visible, but not the other ones.
The reason is that the friendlycaptcha javascript assumes that there will only be a single captcha:
function findCaptchaElement() {
var el = document.querySelector(".frc-captcha");
The querySelector() method only returns the first element that matches the specified selectors.
If a page has multiple DIV.frc-captcha, as it is on the open abstracts page, then only the first is processed by the javascript, the other DIVs remain empty and invisible."

Could you solve this please?
Thanks!

// Swedish
const LANG_SV: Localization = {
text_init: "Laddar...",

text_ready: "Anti-robot-verifiering",
button_start: "Klicka för att starta verifieringen",

text_fetching: "Hämtar utmaning",

text_solving: "Verifierar att du är en människa...",
text_completed: "Jag är en människa",

text_expired: "Anti-robot-verifieringen har löpt ut",
button_restart: "Börja om",

text_error: "Verifieringen misslyckades",
button_retry: "Försök igen",
text_fetch_error: "Lyckades inte ansluta till",
};

We are trying to add FriendlyCaptcha to our website, but our CSP blocks the execution of the script with the following error message: "Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source".
Is there a precompiled version of the script available that doesn't need the 'unsafe-eval' option?
Add this option to the CSP is not an option.
Thank you for your help.

We’ve migrated from GA to Matomo with end of May and are experiencing issues with the archiving of the “yearly” period for our two largest sites.

PHP has been configured to not apply memory limits. After processing daily, weekly and monthly periods, the archiving process starts with the yearly period and quickly - in a matter of seconds - eats up all the RAM of the processing host. In our case that is currently 15GB. Before we increase the RAM of the host, we’d like to understand the root cause (and if e.g. doubling it would actually help with the problem).

The issue has been discussed already via https://forum.matomo.org/t/memory-usage-issues-with-archiving-high-traffic-ecommerce-site/42334/13 but it looks like this is a dead end for us for now. Our archiving process is still regularly failing unfortunately.

It looks like the tracking of things like SKU data (and product name) per product page impression (see arrow towards the hover popup) seems to be a size issue as we have hundreds of thousands of those in a comparatively short amount of time of those.

https://forum.matomo.org/uploads/db1181/original/2X/5/5cd51893f2e864279473210c5c03ff6cfe2d8a50.jpeg

Data attribute data-start="none" does not work.
I set:
<div class="frc-captcha" data-sitekey="KEY" data-start="none"></div>
And solver starting as soon as I focus on form.

I think this line should be modified, because it doesn't matter what I set to data-start because this.opts.startMode ist set to 'focus' by default:
https://github.com/gzuidhof/friendly-challenge/blob/bb333579fd2e814ab96d14a6a94c24718fe4f559/src/captcha.ts#L71

Hello and thank you for the i18n feature

In angular the data-lang seems to be translated to lang and doesn't have any effect. The configuration via widget looks good. Could you please check the problem and eventually support both: data-lang and lang, if the problem is reproducible?

Angular
<div #captcha class="frc-captcha" data-sitekey="xyz" data-lang="de"></div>

Resulting HTML
<div _ngcontent-mpr-c69="" data-sitekey="xyz" class="frc-captcha" lang="de">

Regards, Gena

like @jookia , last 2 days I check some devices. From the group of friends of my girlfriend and mine in Switzerland, I found more mobiles like this: Samsung A3, iPhone SE (5), Moto E LTE, Xperia Z5 comp., than the last modern from the major brands (I count 6 of about 50 from the last 10 months). All (without the 6 new!) of this need more than 30 sec., my one, a Galaxy S5 mini with a performance and battery life optimized Android 9 configuration (3-4d alive) needs 46 sec. with Anthony Restaino's Lightning Browser and consumed 1% of battery capacity! 😱
I think you should do some performance improvement work, to serve this users as a good experience too. 😇

Include the "pt" language to be used with HTML data-lang attribute.

Hi, I am trying to integrate the Friendly Captcha widget in my React web app. I tried to follow the tutorial https://docs.friendlycaptcha.com/#/installation, and have a few questions:

• The doc states "If you are making a single page application (using e.g. React) you will probably want to use the API instead. See the API documentation page." Do I need to use the API if I use React? I'm using React together with Next.js and am creating a multi page application.
• I included this in my code <div class="frc-captcha" data-sitekey="<your sitekey>"></div> and I can see an empty div appear on my website, but no widget is being rendered. How do I actually show the FriendlyCaptcha on my website?

I'm grateful for any kind of advice you can give me. I also think the documentation would be better with a small working example in React. I would be willing to make a PR for it, if I manage to make it work.

I've been trying to make our captcha work in IE11 - it works perfectly in Firefox, Edge and Chrome.

With both the regular build and the compat build I get this error in IE11:

SCRIPT1014: Invalid character

I tried to compare the outputs that webpack is giving me, when using either regular or compat build - and the output are the same. And it contains template literals in the output (which I think is the issue).

Do you have any ideas if this is a issue with your build, or my setup? :)

Hello Friendly Captcha team,
First of all, thank you ! I have been searching for an european captcha solution for a long time... so happy to have found you !

A little question about the installation of FriendlyCaptcha ;
I'm using it with Webflow. I followed 2 steps : generating a sitekey and add the widget to my form.
For the third step, i'm not sure I'm able to do it with webflow. I haven't got access to the server.
I'm not a developer so it is a bit obscure for me.
Tell me if I'm wrong. Maybe I don't even need to acheive this third step with Webflow ?
Anyway, thank you again,
Waiting for your light !

Have a good day,
Steffi

See comment here, the captcha widget does not automatically start solving in some browsers (Safari).

I send a POST-request with the following JSON body to the verification API:

{
    "solution":"...",
    "secret":"name of API key",
    "sitekey":"...",
}

As response, I receive status code 401, success = false, errors = secret_invalid. I'm a bit at a loss, though, because I did create an API key. In the table, API keys are listed with name and date of creation, no further key provided, so I assume one has to use the name of the API key as the secret?

I'm using the widget on a Next.js powered website. And I noticed that the widget re-creates a worker each time the page containing the form is visited. It would be nice to be able to clean up or delete the widget instance whenever the page is destroyed. Something like;

import { useEffect, useRef } from "react"
import { WidgetInstance } from 'friendly-challenge'

const FriendlyCaptcha = ({ className, puzzleEndpoint, startMode = 'focus', ...rest }) => {
  const container = useRef()
  const widget = useRef()

  useEffect(() => {
    if (!widget.current && container.current) {
      widget.current = new WidgetInstance(container.current, { puzzleEndpoint, startMode })
    }

    return () => {
      // Destroy the widget as the component is unmounting...
	  widget.current.destroy()
      widget.current = null
    }
  }, [container])

  return <div ref={container} className="frc-captcha" {...rest} />
}

export default FriendlyCaptcha

Hey there,
I wanted to try this package out, but it's impossible with nuxt.js (a vue.js framework).

I installed it regularly with npm install --save friendly-challenge.

Here is my code

<template>
  <form>
    ...
    <div class="frc-captcha" data-sitekey="<my-sitekey-is-here>"></div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
  import 'friendly-challenge/widget'

  ...
</script>

The error message

As you can see in the image, it's coming from node_modules\friendly-challenge\widget.js in line 295.

I am unable to use this package, is there any solution for it?

I'm a JP localize Manager for website builder Jimdo. Recently we added FriendlyCaptcha for our form but Japanese is not supported yet. Here is the Japanese translations.

// Tip: keep the messages short, there isn't a lot of space in the widget
export interface Localization {
  // While the widget is starting: usually not visible as it initializes instantly.
  text_init: "開始しています...";

  // Before the widget is started
  text_ready: "アンチロボット認証";
  button_start: "クリックして認証を開始";

  // While the widget is downloading a puzzle (usually only takes a split second)
  // If this is hard to translate, you could put something simple like "Loading.."
  text_fetching: "ロードしています";

  // While the widget is solving
  text_solving: "認証中...";

  // Completed
  text_completed: "私はロボットではありません";

  // Expired (the puzzle was solved, but then waited say a day without submitting)
  text_expired: "認証の期限が切れています";
  button_restart: "再度認証を行う";

  // Error
  text_error: "認証にエラーが発生しました";
  button_retry: "再度認証を行う";
  // This error message is followed by the URL, a space is added.
  text_fetch_error: "接続ができませんでした";
}

When I use friendly captcha in Internet Explorer 11 I get the following errors:

Request header was not present in the Access-Control-Allow-Headers list
XMLHttpRequest: Network
network error 0x80070005 acces denied
[FriendlyCaptcha]: TypeError: Network request failed

I use the current version of friendly-challenge: 0.8.12 (npm)

Since I can't use a real build system such as webpack, I can't use commonjs/es imports either. I manually add the source code of /node_modules/friendly-challenge/widget.js to my page. In Chrome and Firefox this works fine. However, in Internet Explorer, I get the errors mentioned above. I also tried to import widget.polyfilled.min.js, but the errors remained the same.

Delete issue - posted in wrong repository.

Hello,

when I launch the puzzle.jstest.ts generatePuzzleBuffer in friendly-pow with the following parameters:

accountId: 0,
appId: 0,
numberOfPuzzles: 1,
puzzleExpiry: 100,
puzzleDifficulty: 30,
eightByteNonce: new Uint8Array(8),
nowInSeconds: 1610102754

the puzzleFixture value is Uint8Array [ 95, 248, 55, 226, 0, 0, 0, 0, 0, 0, 0, 0, 1, 100, 1, 30, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]. The generated solution stored in solutionsFixture is Uint8Array [ 0, 0, 0, 0, 10, 0, 0, 0 ], which is correct when checked with checkSolution; But when I use the widget to solve this puzzle, it returns Uint8Array(8) [ 0, 0, 0, 0, 2, 0, 0, 0 ] as solution. Is there anything I'm not getting? Shouldn't these be the same?

Hey again @gzuidhof! I have a question: In the dev documentation there is EU endpoint description. I wonder how you folks use IP addresses and how is that complaint with GDPR.

Does the IP only sent on wire when the user is unable to identify as human or that would always be passed between friendly captcha and user-agent? What other sensitive info is passed around if any?

It seems that no types are available when using the compat build like this:

import { WidgetInstance } from 'friendly-challenge/compat';

It works beautifully when using the regular build.