Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

reactjs-captcha

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

reactjs-captcha - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

41

dist/captcha-helper.js

@@ -54,4 +54,4 @@ 'use strict';

var url = captchaEndpoint + '?get=html&c=' + captchaStyleName;
this.ajax(url, function (data) {
var captchaHtml = data.replace(/<script.*<\/script>/g, '');;
this.ajax(url, function (captchaHtml) {
captchaHtml = self.changeRelativeToAbsoluteUrls(captchaHtml, captchaEndpoint);
callback(captchaHtml);

@@ -61,2 +61,39 @@ });

// get captcha endpoint handler from configued captchaEndpoint value,
// the result can be "simple-captcha-endpoint.ashx", "botdetectcaptcha",
// or "simple-botdetect.php"
module.exports.getCaptchaEndpointHandler = function (captchaEndpoint) {
var splited = captchaEndpoint.split('/');
return splited[splited.length - 1];
};
// get backend base url from configued captchaEndpoint value
module.exports.getBackendBaseUrl = function (captchaEndpoint, captchaEndpointHandler) {
var lastIndex = captchaEndpoint.lastIndexOf(captchaEndpointHandler);
return captchaEndpoint.substring(0, lastIndex);
};
// change relative to absolute urls in captcha html markup
module.exports.changeRelativeToAbsoluteUrls = function (originCaptchaHtml, captchaEndpoint) {
var captchaEndpointHandler = this.getCaptchaEndpointHandler(captchaEndpoint);
var backendUrl = this.getBackendBaseUrl(captchaEndpoint, captchaEndpointHandler);
originCaptchaHtml = originCaptchaHtml.replace(/<script.*<\/script>/g, '');
var relativeUrls = originCaptchaHtml.match(/(src|href)=\"([^"]+)\"/g);
var relativeUrl,
relativeUrlPrefixPattern,
absoluteUrl,
changedCaptchaHtml = originCaptchaHtml;
for (var i = 0; i < relativeUrls.length; i++) {
relativeUrl = relativeUrls[i].slice(0, -1).replace(/src=\"|href=\"/, '');
relativeUrlPrefixPattern = new RegExp(".*" + captchaEndpointHandler);
absoluteUrl = relativeUrl.replace(relativeUrlPrefixPattern, backendUrl + captchaEndpointHandler);
changedCaptchaHtml = changedCaptchaHtml.replace(relativeUrl, absoluteUrl);
}
return changedCaptchaHtml;
};
module.exports.ajax = function (url, callback) {

@@ -63,0 +100,0 @@ function xhr() {

84

dist/reactjs-captcha.js

@@ -36,3 +36,3 @@ 'use strict';

if (captchaSettings.get().captchaEnabled) {
var captchaStyleName = this.props.styleName || 'defaultCaptcha';
var captchaStyleName = this.getCaptchaStyleName();
this.displayHtml(captchaStyleName);

@@ -42,2 +42,29 @@ }

// get captcha style name.
}, {
key: 'getCaptchaStyleName',
value: function getCaptchaStyleName() {
var styleName = void 0;
// the value can be set in generateCaptchaMarkup method
if (this.state && typeof this.state.captchaStyleName !== 'undefined') {
styleName = this.state.captchaStyleName;
return styleName;
}
styleName = this.props.captchaStyleName;
if (styleName) {
return styleName;
}
// backward compatible
styleName = this.props.styleName;
if (styleName) {
return styleName;
}
throw new Error('The captchaStyleName attribute is not found or its value is not set.');
}
// get BotDetect client-side instance.

@@ -50,3 +77,3 @@

if (typeof window.botdetect !== 'undefined') {
var captchaStyleName = this.state && typeof this.state.styleName !== 'undefined' ? this.state.styleName : this.props.styleName;
var captchaStyleName = this.getCaptchaStyleName();
instance = window.botdetect.getInstanceByStyleName(captchaStyleName);

@@ -65,3 +92,4 @@ }

// the typed captcha code value.
// the user entered captcha code value.
// keep this method for backward compatibility

@@ -74,15 +102,20 @@ }, {

}, {
key: 'getUserEnteredCaptchaCode',
value: function getUserEnteredCaptchaCode() {
return this.getCaptchaCode();
}
}, {
key: 'displayHtml',
value: function displayHtml(styleName) {
value: function displayHtml(captchaStyleName) {
var self = this;
captchaHelper.getHtml(styleName, captchaSettings.get().captchaEndpoint, function (captchaHtml) {
captchaHelper.getHtml(captchaStyleName, captchaSettings.get().captchaEndpoint, function (captchaHtml) {
document.getElementById('BDC_CaptchaComponent').innerHTML = captchaHtml;
self.loadScriptIncludes(styleName);
self.loadScriptIncludes(captchaStyleName);
});
}
// reload a new captcha image.
}, {
key: 'reloadImage',
// reload a new captcha image.
value: function reloadImage() {

@@ -107,5 +140,5 @@ this.getInstance().reloadImage();

key: 'generateCaptchaMarkup',
value: function generateCaptchaMarkup(styleName) {
this.setState({ styleName: styleName });
this.displayHtml(styleName);
value: function generateCaptchaMarkup(captchaStyleName) {
this.setState({ captchaStyleName: captchaStyleName });
this.displayHtml(captchaStyleName);
}

@@ -117,15 +150,18 @@

key: 'loadScriptIncludes',
value: function loadScriptIncludes(styleName) {
value: function loadScriptIncludes(captchaStyleName) {
var self = this;
var captchaId = document.getElementById('BDC_VCID_' + styleName).value;
var scriptIncludeUrl = captchaSettings.get().captchaEndpoint + '?get=script-include&c=' + styleName + '&t=' + captchaId + '&cs=203';
captchaHelper.getScript(scriptIncludeUrl, function () {
// register user input blur validation
var instance = self.getInstance();
if (instance) {
captchaHelper.addValidateEvent(instance);
} else {
console.error('window.botdetect undefined.');
}
});
var captchaIdElement = document.getElementById('BDC_VCID_' + captchaStyleName);
if (captchaIdElement) {
var captchaId = captchaIdElement.value;
var scriptIncludeUrl = captchaSettings.get().captchaEndpoint + '?get=script-include&c=' + captchaStyleName + '&t=' + captchaId + '&cs=203';
captchaHelper.getScript(scriptIncludeUrl, function () {
// register user input blur validation
var instance = self.getInstance();
if (instance) {
captchaHelper.addValidateEvent(instance);
} else {
console.error('window.botdetect undefined.');
}
});
}
}

@@ -132,0 +168,0 @@ }, {

2

package.json
{
"name": "reactjs-captcha",
"version": "1.2.1",
"version": "1.3.0",
"description": "BotDetect Captcha React Component (JavaScript: React 0.13.x/0.14.x/15/16+)",

@@ -5,0 +5,0 @@ "scripts": {

232

README.md

@@ -1,188 +0,190 @@

## BotDetect Captcha React Component (JavaScript: React 0.13.x/0.14.x/15/16+)
## BotDetect CAPTCHA React Component: Simple API integration for React 13/14/15/16+
### Requirements:
BotDetect Captcha React Component requires [BotDetect ASP.NET Captcha](https://captcha.com/asp.net-captcha.html#simple-api), [BotDetect Java Captcha](https://captcha.com/java-captcha.html#simple-api) or [BotDetect PHP Captcha](https://captcha.com/php-captcha.html#simple-api) library to generate Captcha challenges. Simple API support for ASP.NET Core and .NET Core will be released this month -- very likely during the week of 2018/11/19-25. See our [roadmap](https://captcha.com/captcha-roadmap-and-release-notes.html#aspnet-release-notes) for details.
For a comprehensive step-by-step integration guide please see our [React Captcha Component Integration Guide](https://captcha.com/react-captcha.html).
The guide covers the integration with the following backends:
- ASP.NET (Core): web API with MVC6
- ASP.NET (Legacy): Web-API2, MVC1-5, Generic Handler
- Java: Servlet, Spring, Struts
- PHP: the plain PHP
To give you a hint how React Captcha Component works we pasted a few, not necessary up-to-date (and mostly frontend related), excerpts from it bellow.
### Quick guide:
##### 1) Installation:
##### 1) React Captcha Component Installation:
```sh
npm install reactjs-captcha --save
```
##### 2) Importing React Captcha Component into Your Component:
```js
import { Captcha, captchaSettings } from 'reactjs-captcha';
```
##### 3) Setting backend Captcha endpoint:
##### 2) Setting Backend Captcha Endpoint
Endpoint Configuration depends on which technology you use in the backend.
Endpoint configuration depends on which technology you use in the backend.
- ASP.NET-based Captcha endpoint:
- ASP.NET-based captcha endpoint:
```js
class Example extends React.Component {
import { captchaSettings } from 'reactjs-captcha';
constructor(props) {
super(props);
class App extends React.Component {
captchaSettings.set({
captchaEndpoint: 'captcha-endpoint/BotDetectCaptcha.ashx'
});
}
constructor(props) {
super(props);
...
captchaSettings.set({
captchaEndpoint:
'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx'
});
}
...
}
export default App;
```
- Java-based Captcha endpoint:
- Java-based captcha endpoint:
```js
class Example extends React.Component {
import { captchaSettings } from 'reactjs-captcha';
constructor(props) {
super(props);
class App extends React.Component {
captchaSettings.set({
captchaEndpoint: 'captcha-endpoint/botdetectcaptcha'
});
}
constructor(props) {
super(props);
...
captchaSettings.set({
captchaEndpoint:
'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint'
});
}
...
}
export default App;
```
- PHP-based Captcha endpoint:
- PHP-based captcha endpoint:
```js
class Example extends React.Component {
import { captchaSettings } from 'reactjs-captcha';
constructor(props) {
super(props);
class App extends React.Component {
captchaSettings.set({
captchaEndpoint: 'captcha-endpoint/simple-botdetect.php'
});
}
constructor(props) {
super(props);
...
captchaSettings.set({
captchaEndpoint:
'https://your-app-backend-hostname.your-domain.com/botdetect-captcha-lib/simple-botdetect.php'
});
}
...
}
export default App;
```
##### 4) Displaying Captcha In Your View
##### 3) Import React Captcha Component and Display Captcha In Your View
```js
class Example extends React.Component {
import { Captcha } from 'reactjs-captcha';
...
class App extends React.Component {
render() {
return (
<Captcha styleName="exampleCaptcha" ref={(captcha) => {this.captcha = captcha}} />
)
}
...
render() {
return (
<Captcha captchaStyleName="yourFirstCaptchaStyle"
ref={(captcha) => {this.captcha = captcha}} />
<input id="yourFirstCaptchaUserInput" type="text" />
)
}
}
```
##### 5) Client-side Captcha validation
- Using validateUnsafe(callback) method to validate Captcha code on form submit:
##### 4) Captcha Validation: Client-side Code
```js
...
import { Captcha } from 'reactjs-captcha';
// process the yourFormWithCaptcha on submit event
yourFormWithCaptchaOnSubmitHandler(event) {
class Example extends React.Component {
// the user-entered captcha code value to be validated at the backend side
let userEnteredCaptchaCode = this.captcha.getUserEnteredCaptchaCode();
constructor(props) {
super(props);
}
// On form submit.
formSubmit(event) {
this.captcha.validateUnsafe(function(isCaptchaCodeCorrect) {
// the id of a captcha instance that the user tried to solve
let captchaId = this.captcha.getCaptchaId();
if (isCaptchaCodeCorrect) {
// Captcha code is correct
} else {
// Captcha code is incorrect
}
let postData = {
userEnteredCaptchaCode: userEnteredCaptchaCode,
captchaId: captchaId
};
});
let self = this;
event.preventDefault();
}
// post the captcha data to the /your-app-backend-path on your backend.
// make sure you import the axios in this view with: import axios from 'axios';
axios.post(
'https://your-app-backend-hostname.your-domain.com/your-app-backend-path',
postData, {headers: {'Content-Type': 'application/json; charset=utf-8'}})
.then(response => {
if (response.data.success == false) {
// captcha validation failed; reload image
self.captcha.reloadImage();
// TODO: maybe display an error message, too
} else {
// TODO: captcha validation succeeded; proceed with your workflow
}
});
render() {
...
}
event.preventDefault();
}
export default Example;
```
OR
##### 5) Captcha Validation: Server-side Code
- Using data-correct-captcha directive attribute to validate Captcha code on blur event:
```html
<input
type="text"
name="captchaCode"
id="captchaCode"
data-correct-captcha
>
```
The `userEnteredCaptchaCode` and `captchaId` values posted from the frontend are used to validate a captcha challenge on the backend.
```js
document.getElementById('captchaCode').addEventListener('validatecaptcha', function (e) {
let isCorrect = e.detail;
if (isCorrect) {
// UI Captcha validation passed
} else {
// UI Captcha validation failed
}
});
```
The validation is performed by calling the: `Validate(userEnteredCaptchaCode, captchaId)`.
##### 6) Server-side Captcha validation:
These client-side captcha validations are just an usability improvement that you may use or not -- they do not protect your form from spammers at all.
As you are protecting some server-side action you must validate a Captcha at the server-side before executing that protected action.
- Server-side Captcha validation with [ASP.NET Captcha](https://captcha.com/asp.net-captcha.html#simple-api) is performed in the following way:
- Server-side captcha validation with [ASP.NET Captcha](https://captcha.com/asp.net-captcha.html) is performed in the following way:
```csharp
// C#
SimpleCaptcha captcha = new SimpleCaptcha();
bool isHuman = captcha.Validate(captchaCode, captchaId);
SimpleCaptcha yourFirstCaptcha = new SimpleCaptcha();
bool isHuman = yourFirstCaptcha.Validate(captchaCode, captchaId);
```
```vbnet
' VB.NET
Dim captcha As SimpleCaptcha = New SimpleCaptcha()
Dim isHuman As Boolean = captcha.Validate(captchaCode, captchaId)
Dim yourFirstCaptcha As SimpleCaptcha = New SimpleCaptcha()
Dim isHuman As Boolean = yourFirstCaptcha.Validate(captchaCode, captchaId)
```
- Server-side Captcha validation with [Java Captcha](https://captcha.com/java-captcha.html#simple-api) is performed in the following way:
- Server-side captcha validation with [Java Captcha](https://captcha.com/java-captcha.html) is performed in the following way:
```java
SimpleCaptcha captcha = SimpleCaptcha.load(request);
boolean isHuman = captcha.validate(captchaCode, captchaId);
SimpleCaptcha yourFirstCaptcha = SimpleCaptcha.load(request);
boolean isHuman = yourFirstCaptcha.validate(captchaCode, captchaId);
```
- Server-side Captcha validation with [PHP Captcha](https://captcha.com/php-captcha.html#simple-api) is performed in the following way:
- Server-side captcha validation with [PHP Captcha](https://captcha.com/php-captcha.html) is performed in the following way:
```php
$captcha = new SimpleCaptcha();
$isHuman = $captcha->Validate($captchaCode, $captchaId);
$yourFirstCaptcha = new SimpleCaptcha();
$isHuman = $yourFirstCaptcha->Validate($captchaCode, $captchaId);
```
### Docs:
[React CAPTCHA Integration Guide](https://captcha.com/react-captcha.html)
### Documentation:
### Code Examples:
1. [Basic React CAPTCHA Example](https://captcha.com/doc/react/examples/react-basic-captcha-example.html)
1. [React Captcha Component Step-by-step Integration Guide](https://captcha.com/react-captcha.html) -- read this one first
2. [React CAPTCHA Form Example](https://captcha.com/doc/react/examples/react-form-captcha-example.html)
2. [React Captcha Component Basic Example](https://captcha.com/doc/react/examples/react-basic-captcha-example.html) -- partial code walk-through
3. [React Captcha Component Form Example](https://captcha.com/doc/react/examples/react-form-captcha-example.html) -- partial code walk-through
### Dependencies:
Captcha React component uses Captcha library for Captcha image and Captcha sound generation. At the moment challenges are generated in Java backend with [BotDetect Java Captcha library](https://captcha.com/java-captcha.html#simple-api) and PHP backend with [BotDetect PHP Captcha library](https://captcha.com/php-captcha.html#simple-api), but BotDetect ASP.NET is going to work with Captcha React plugin soon as well.
The current version of the React Captcha Component requires one of the following BotDetect CAPTCHA backends:
- [ASP.NET v4.4.1+](https://captcha.com/asp.net-captcha.html)
- [Java v4.0.Beta3.6+](https://captcha.com/java-captcha.html)
- [PHP v4.2.4+](https://captcha.com/php-captcha.html)
### Technical Support:
Through [contact form on captcha.com](https://captcha.com/contact.html).
Through [contact form on captcha.com](https://captcha.com/contact.html).

39

src/captcha-helper.js

@@ -52,4 +52,4 @@ module.exports.spread = function(initArr, addArr) {

var url = captchaEndpoint + '?get=html&c=' + captchaStyleName;
this.ajax(url, function(data) {
var captchaHtml = data.replace(/<script.*<\/script>/g, '');;
this.ajax(url, function(captchaHtml) {
captchaHtml = self.changeRelativeToAbsoluteUrls(captchaHtml, captchaEndpoint);
callback(captchaHtml);

@@ -59,2 +59,37 @@ });

// get captcha endpoint handler from configued captchaEndpoint value,
// the result can be "simple-captcha-endpoint.ashx", "botdetectcaptcha",
// or "simple-botdetect.php"
module.exports.getCaptchaEndpointHandler = function(captchaEndpoint) {
var splited = captchaEndpoint.split('/');
return splited[splited.length - 1];
};
// get backend base url from configued captchaEndpoint value
module.exports.getBackendBaseUrl = function(captchaEndpoint, captchaEndpointHandler) {
var lastIndex = captchaEndpoint.lastIndexOf(captchaEndpointHandler);
return captchaEndpoint.substring(0, lastIndex);
};
// change relative to absolute urls in captcha html markup
module.exports.changeRelativeToAbsoluteUrls = function(originCaptchaHtml, captchaEndpoint) {
var captchaEndpointHandler = this.getCaptchaEndpointHandler(captchaEndpoint);
var backendUrl = this.getBackendBaseUrl(captchaEndpoint, captchaEndpointHandler);
originCaptchaHtml = originCaptchaHtml.replace(/<script.*<\/script>/g, '');
var relativeUrls = originCaptchaHtml.match(/(src|href)=\"([^"]+)\"/g);
var relativeUrl, relativeUrlPrefixPattern, absoluteUrl,
changedCaptchaHtml = originCaptchaHtml;
for (var i = 0; i < relativeUrls.length; i++) {
relativeUrl = relativeUrls[i].slice(0, -1).replace(/src=\"|href=\"/, '');
relativeUrlPrefixPattern = new RegExp(".*" + captchaEndpointHandler);
absoluteUrl = relativeUrl.replace(relativeUrlPrefixPattern, backendUrl + captchaEndpointHandler);
changedCaptchaHtml = changedCaptchaHtml.replace(relativeUrl, absoluteUrl);
}
return changedCaptchaHtml;
};
module.exports.ajax = function(url, callback) {

@@ -61,0 +96,0 @@ function xhr() {

78

src/reactjs-captcha.js

@@ -18,3 +18,3 @@ var React = require('react');

if (captchaSettings.get().captchaEnabled) {
let captchaStyleName = this.props.styleName || 'defaultCaptcha';
let captchaStyleName = this.getCaptchaStyleName();
this.displayHtml(captchaStyleName);

@@ -24,2 +24,26 @@ }

// get captcha style name.
getCaptchaStyleName() {
let styleName;
// the value can be set in generateCaptchaMarkup method
if (this.state && (typeof this.state.captchaStyleName !== 'undefined')) {
styleName = this.state.captchaStyleName;
return styleName;
}
styleName = this.props.captchaStyleName;
if (styleName) {
return styleName;
}
// backward compatible
styleName = this.props.styleName;
if (styleName) {
return styleName;
}
throw new Error('The captchaStyleName attribute is not found or its value is not set.');
}
// get BotDetect client-side instance.

@@ -29,5 +53,3 @@ getInstance() {

if (typeof window.botdetect !== 'undefined') {
const captchaStyleName = (this.state && (typeof this.state.styleName !== 'undefined'))
? this.state.styleName
: this.props.styleName;
const captchaStyleName = this.getCaptchaStyleName();
instance = window.botdetect.getInstanceByStyleName(captchaStyleName);

@@ -43,3 +65,4 @@ }

// the typed captcha code value.
// the user entered captcha code value.
// keep this method for backward compatibility
getCaptchaCode() {

@@ -49,9 +72,13 @@ return this.getInstance().userInput.value;

displayHtml(styleName) {
getUserEnteredCaptchaCode() {
return this.getCaptchaCode();
}
displayHtml(captchaStyleName) {
let self = this;
captchaHelper.getHtml(styleName, captchaSettings.get().captchaEndpoint, function(captchaHtml) {
captchaHelper.getHtml(captchaStyleName, captchaSettings.get().captchaEndpoint, function(captchaHtml) {
document.getElementById('BDC_CaptchaComponent').innerHTML = captchaHtml;
self.loadScriptIncludes(styleName);
self.loadScriptIncludes(captchaStyleName);
});
};
}

@@ -74,21 +101,24 @@ // reload a new captcha image.

// generate captcha markup manually
generateCaptchaMarkup(styleName) {
this.setState({styleName: styleName});
this.displayHtml(styleName);
generateCaptchaMarkup(captchaStyleName) {
this.setState({captchaStyleName: captchaStyleName});
this.displayHtml(captchaStyleName);
}
// load BotDetect scripts.
loadScriptIncludes(styleName) {
loadScriptIncludes(captchaStyleName) {
var self = this;
let captchaId = document.getElementById('BDC_VCID_' + styleName).value;
let scriptIncludeUrl = captchaSettings.get().captchaEndpoint + '?get=script-include&c=' + styleName + '&t=' + captchaId + '&cs=203';
captchaHelper.getScript(scriptIncludeUrl, function() {
// register user input blur validation
let instance = self.getInstance();
if (instance) {
captchaHelper.addValidateEvent(instance);
} else {
console.error('window.botdetect undefined.');
}
});
let captchaIdElement = document.getElementById('BDC_VCID_' + captchaStyleName);
if (captchaIdElement) {
let captchaId = captchaIdElement.value;
let scriptIncludeUrl = captchaSettings.get().captchaEndpoint + '?get=script-include&c=' + captchaStyleName + '&t=' + captchaId + '&cs=203';
captchaHelper.getScript(scriptIncludeUrl, function() {
// register user input blur validation
let instance = self.getInstance();
if (instance) {
captchaHelper.addValidateEvent(instance);
} else {
console.error('window.botdetect undefined.');
}
});
}
}

@@ -95,0 +125,0 @@ 

npmjs_readme.markd

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc