Welcome to BBRobots – Proof of Concept v0.5.0
This is a POC version of BBRobots, which means that this version implements some aspects that were not in the prototype. Indeed the previous version, being a prototype, was for presentation of the concept, and technical ideas to implement. Moreover, this version is now exposed as a configurable widget for any external site. Demo form →
This POC implements:
- The exposure as a widget (SaaS)
- The mechanics of the 3rd escalation (polygons challenge)
- The possibility to realize this challenge on mobile devices
- The mechanics allowing accessibility (code via SMS)
- The possibility to check on the back-end if the challenge has been completed by the user (and therefore a front-end blocking, and a back-end verification in case of bypass)
NEW: Behaviour analysis
- Check if the user was referred to the form page ot not
- Check the users lingering behaviour on inputs (time spend typing etc)
- Check the users scroll behaviour on the form page
- If the behaviour analysis concludes that no robot was detected, users should be able to submit without any challenge
Possible additional features
- validation via QR Code (2nd escalation) depending on behaviour score
- usage of API keys to better secure the access the captcha api
- more/other behaviour checks (mouse movement, time spend on the page, etc)
- lockout attemtps
How to integrate the BBRobots plugin
-
Step 1
-
Insert this script in the form's page:
<script src="https://bbrobots.technologypartner.io/dist/bbrobots-plugin.min.js"></script>
-
Insert this script in the form's page:
-
Step 2
-
In order to know which form needs to be secured, you need to add this css class on the form itself:
.bbr-challenge-trigger
-
To initialise the script you need to add this line in your main js file:
window.bbrPlugin();
-
The plugin can take an optional options object as parameter to define custom colors.
The default options are defined as such:
{ fillColor: 'skyblue', // color of the movable shape strokeColor: 'gray' // outline/border color of the other shapes }
Pass in another color like the following for example:
window.bbrPlugin({ fillColor: '#7fffd4' });
-
In order to know which form needs to be secured, you need to add this css class on the form itself:
-
Step 3
On the backend of your server application, you should call the api to verify if the current session is allowed to post your form.
public static async Task<SessionState> CheckSession(string sessionId) { const string serverUrl = "https://bbrobots.technologypartner.io/api/session/verify"; if (string.IsNullOrWhiteSpace(sessionId)) return SessionState.MissingSessionId; HttpContent postContent = new StringContent(JsonConvert.SerializeObject(new { sessionId }), Encoding.UTF8, "application/json"); var client = new HttpClient(); var response = await client.PostAsync(serverUrl, postContent); if (response.StatusCode == HttpStatusCode.InternalServerError) return SessionState.HttpError; var result = JsonConvert.DeserializeObject<VerifySessionResult>(await response.Content.ReadAsStringAsync()); return result.IsSessionValid ? SessionState.ValidSession : SessionState.InvalidSession; }
Call the following API to execute the session verification:
- URL
-
https://bbrobots.technologypartner.io/api/session/verify
- Method
- POST
- Payload
-
Content-Type: application/json
{sessionId: string}
The current sessionId is stored inside a cookie named
TP.BBRobots.SessionId
. - Result
-
200 OKJSON
{ sessionId: string, // current sessionId isSessionValid: bool, // if the session is valid and if the form can be posted normally or not challenge: string // name of the challenge if the session is not valid or 'Failed' when a robot was detected }