This guide walks through how to implement dark web lookups on a registration or password reset form that already has a built in password complexity policy in place.

If your web app is already checking for password complexity requirements, Cymatic can assist by adding dark web lookups to the checks being performed. It is possible, and quite common, for a password to password current complexity checks, however still be found on the dark web. These passwords can then be leveraged in credential stuffing attacks which can ultimately lead to an account takeover(ATO).
This guide is meant to be used as a template for deployment to an existing web application with an existing password policy in place. As with all templates, some modification may be required to fit your needs.
To complete the steps below, you will need access to modify the HTML of the web application pages you would like to deploy Cymatic on.
Add the snippet

Log in to the Cymatic web app. Once authenticated, from the sites page click on the site you want to deploy protection to. Navigate to settings > installation > SDK snippet. Copy the snippet section to your clipboard.

When copying the snippet, the last line '<script>CymaticXid.v2.init({});</script>' is not needed for this type of deployment. Please do not include this line when pasting the snippet.
In the HTML code of the web app you would like to protect, add the SDK snippet. This code needs to be added to the <head> section. Please note that the following is a sample and will not work on your web app.

Add dark web help text

A typical password help text display may look something like the following:

In your app, add a line similar to the following to get the help text to appear for the dark web lookup:
<p id="darkweb" class="invalid">Not on the dark web</p>
If using the js code provided below, there are two key elements in this step that need to be in place. The first is the id of darkweb and the second is the class of invalid. The readable text itself can be modified to whatever verbiage you would like to use.
Once complete, the help text display will look like this:

Add the js file

The js file contains the code for how the darkweb lookup works. It also contains the initialization script for the Cymatic SDK. The following code can be used as a template to paste into a file on the web app:
(function(){

return {

$password : document.querySelector("#psw"),

init(){
try {
CymaticXid.v2.init( (sdkError, sdk) => {
if (sdkError){ return console.error(sdkError); }

this.inputPassword = new sdk.PasswordField({ src : this.$password });

// when the password gets cleared
this.inputPassword.on('empty', this.resetFormValidation.bind(this));

// when the user starts typing a password
this.inputPassword.on('data', this.inputPasswordHandler.bind(this));

});
} catch (error){
console.error(error);
}
},

/**
* Append the criteria elements to the DOM by cross-referencing
* the criteria rules set for the password against the typed password
* (e.g. 'At least 1 uppercase', 'At least 8 characters', ...)
*
* @param { Object } data - The data returned by the sdk
*/

inputPasswordHandler: function(data){
$("#darkweb").toggleClass("invalid",!!data.detail.specs.darkweb)
$("#darkweb").toggleClass("valid",!data.detail.specs.darkweb)
},

/**
* Resets the form validation elements to its original state
* (submit disabled, validation messages hidden)
*/

resetFormValidation: function(){
$("#darkweb").addClass("invalid").removeClass("valid")
}

}

}()).init();

At minimum, the third line of code will need to be modified to work with your form. This line is responsible for the initialization process of the Cymatic SDK and needs to be able to find the password field on the form. To find the correct selector for the password field on your form, right click in the password field and choose 'inspect.' In the console, right click on the highlighted line and choose copy > copy selector. For more information on how to find selectors, please refer to step 4 in the deployment for login forms guide.

The js file you pasted the code into needs to be called upon by the form page. This can be performed using the following sample:
<script src="cymjs/cymatic.js></script>
Depending on the web app, it may be necessary to call the js file after the form is declared on the page.
Configure credential defense

Log in to the Cymatic platform. Once you select the site you are working with, navigate to settings > Cymatic > credential defense. Click on the toggle switch to enable credential defense. Once enabled, click in the credential defense text field to expand the configuration options. Click on the toggle switch to enable password darkweb.
The contents of the message box is not a concern when deploying the dark web lookup in this manner. The help text you entered above is what will be displayed to the user.
Test

Once the above steps are complete, it is recommended to test the deployment. To do this, simply navigate to the registration or password reset form on your site that you deployed the Cymatic dark web lookup on with your favorite browser. Once the page loads, enter the password of '_password_' into the login form. The dark web check should still show red if using the templates provided in this article. Delete the password and then enter '_Password1876_'. Now the dark web help text should show that the criteria has been met.

If the help text is not updating as expected, please try the following:

Clear the cache in your browser and try to access the page you deployed Cymatic on again.
In the browser tab that is on the page you deployed Cymatic on, right click the page and select "view page source." When the new tab opens up, search for "Cymatic" to confirm the snippet is present.
Confirm that the URL you typed in the browser to access your web application matches the URL entered in the Cymatic app for the site.
Confirm that the selector you entered in the initialization script matches the selector on the registration or password reset form and there are no mistypes.

If further assistance is needed, please contact us.
Was this article helpful?
Cancel
Thank you!