Integrating the CDDC JavaScript for modern UI

The CDDC JavaScript file is available in the CDDC JavaScript for modern UI package on the Risk Analytics resource download page. The script is available as an ESM module (cddc.esm.js), as well as an UMD module (cddc.umd.js).

If the solution in which you want to integrate CDDC JavaScript uses the Webpack or RollUp module bundler, use the ESM module.

Example of using cddc.esm.js with the React and Webpack / RollUp module bundler:

  1. //Retrieve raw fingerprint and store it into React state variable
  2. import React,{ Component } from 'react';
  3. //including reference to CDDC JavaScript
  4. import { getJSON } from '../lib/cddc.esm';
  5.  
  6. class Test extends Component {
  7.   constructor(props){
  8.     super(props);
  9.  
  10.     this.state = {
  11.       fingerprint: ''
  12.     };
  13.   }
  14.  
  15.   componentDidMount() {
  16.     //Retrieve browser fingerprint, without viewport information
  17.     const fingerprint = getJSON(false);
  18.     this.setState({
  19.       fingerprint: fingerprint
  20.     });
  21.   }
  22. }
  23. export default Test

If the solution uses older module loaders like AMD, RequireJS, or CommonJS, or does not use any module loader or bundler, use the UMD module.

Example of using the cddc.umd.js script with the RequireJS module loader:

  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html lang='en'>
  4.   <head>
  5.     <meta charset='UTF-8'>
  6.     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <script data-main='index.js' src='node_modules/requirejs/require.js'></script>
  11.   </body>
  12. </html>

 

  1. //index.js
  2. requirejs(['./lib/cddc.umd.js'],function(cddc){
  3.   var fingerprint = cddc.getJSON();
  4.   var fingerprintHash= cddc.getHASH();
  5.   console.log('fingerprint is ' + fingerprint);
  6.   console.log('hashed fingerprint is ' + fingerprintHash);
  7. });

You can also integrate the UMD module in a simple web page:

  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html lang='en'>
  4.   <head>
  5.     <meta charset='UTF-8'>
  6.     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <script src='./lib/cddc.umd.js'></script>
  11.     <script type='text/javascript'>
  12.       var fingerprint = window.cddc.getJSON();
  13.       var fingerprintHash = window.cddc.getHASH();
  14.       console.log('fingerprint is ' + fingerprint);
  15.       console.log('fingerprint hash is ' + fingerprintHash);
  16.     </script>
  17.   </body>
  18. </html>