Code:

Open the SandPass code in a new tab or inspect it directly here on the webpage:

show
/*---------------------------------------------------------------------------*
 *                               PwdMeter                                    *
 *                                                                           *
 * SandPass even comes with some inline comments. Isn't that great?          *
 *                                                                           *
 * Thanks to: Mike West for writing a great article about sandboxed iFrames  *
 *     http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/    *
 *---------------------------------------------------------------------------*/
 
var mModules = new Array();

window.addEventListener('message', function (e) {
    // check if message comes from one of the iframes
    if (e.origin === "null") {
      for (var i = 0; i < mModules.length; i++) {
        if (e.source === mModules[i].module.contentWindow) {
          // execute the resultHandler for the matching iFrame
          mModules[i].resultHandler(e.data);
        }
      }
    }
  });

/*
 * Fetches the scripts from the web for inclusion in the framework
 * [script]      - list of scripts to include
 * resultHandler - function for processing the module return value
 * mainFunction  - string identifier of the module's main function
 */
function include() {
  var numScripts = arguments.length-2;
  if (arguments.length >= 3) {
    var resultHandler = arguments[arguments.length-2];
    var mainFunction  = arguments[arguments.length-1];
    var modNr = createIFrame(arguments, numScripts, resultHandler, mainFunction);

    if (document && document.body) {
      document.body.appendChild(mModules[modNr].module);
    } else if (window.addEventListener) { // W3C standard
      window.addEventListener('load', function() { document.body.appendChild(mModules[modNr].module); }, false); // NB **not** 'onload'
    } else if (window.attachEvent) { // Microsoft
      window.attachEvent('onload', function() { document.body.appendChild(mModules[modNr].module); } );
    } 
  }
}

function runSandPass(password) {
  for (var i=0; i < mModules.length; i++) {
   var mod = mModules[i].module;
     if (mod != undefined && mod != null) {
       var data = { password: password, run: mModules[i].mainFunction };
       // we must use the start because of the unique origin of the module
       mod.contentWindow.postMessage(data, '*');
   }
  }
}

/*
 * Create an uncomplete module (completed after fetching all scripts in onReceiveScript)
 * numScripts    - total number of scripts included in module
 * resultHandler - function for processing the module return value
 * mainFunction  - string identifier of the module's main function
 */
function createIFrame(args, numScripts, resultHandler, mainFunction) {
  var msgListener =
"       window.addEventListener('message', function (e) { "+
"        var result = null; "+
"        if (e.data.run == undefined  || e.data.run == null) { "+
"          result = check(e.data.password); "+
"        } else { "+
"          result = window[e.data.run].call(undefined, e.data.password); "+
"        } "+
"        e.source.postMessage(result, e.origin); "+
"       });";
  
  var script_src = "script-src 'unsafe-eval' 'unsafe-inline' data:";
  if (!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) {
    // for some reason Safari doesn't like the hashes :-/
    script_src += " 'sha256-/xAf+xO1HORuk4xfx8ahF6sfwIMs62JFn8AMx6gPNS8'";
  }
  var script_elems = "    <script type=\"text/javascript\" >"+msgListener+"</script>\n";
  for (var i = 0; i < numScripts; i++) {
    script_elems += "    <script type=\"text/javascript\" src=\""+args[i]+"\"></script>\n";
    var url_array = args[i].split("/");
    script_src += " "+url_array[0]+"//"+url_array[2];
  }
  var html = "<html><head>" +
"     <meta HTTP-EQUIV=\"Content-Security-Policy\" content=\"default-src 'none'; "+script_src+"\">\n";
  html += "</head><body>"+script_elems+"</body></html>";

  var iframe = document.createElement('iframe');
  iframe.sandbox = "allow-scripts";
  iframe.srcdoc = html;
  iframe.style.display = "none";

  mModules[mModules.length] = { module: iframe, resultHandler: resultHandler, mainFunction: mainFunction };
  return mModules.length-1;
};
        

Toggle the items to see how to use SandPass:

in HTML (show)
<script src="./scripts/sandpass.js"></script>
<button  type="button" onclick="runSandPass('myPassword');">Check!</button>        
Note that we discourage inline scripting, but it keeps the example shorter.
set result handler (show example)
include(
  "https://cf.dropboxstatic.com/static/javascript/external/zxcvbn-vflkO7PKd.js",
  dropboxResultHandler,
  "zxcvbn"
);

function dropboxResultHandler(res) {
  var colour = "#FF0000";
  var score = JSON.stringify(res.score);
  for (var i = 0; i < 5; i++) {
    if (i > score) {
      colour = document.styleSheets[0].cssRules[1].style["background-color"];
    } else {
      // adjust the colour to something greener every time!
      switch (i) {
        case 0: colour="rgb("+255+","+0+",0)"; break;
        case 1: colour="rgb("+255+","+128+",0)"; break;
        case 2: colour="rgb("+255+","+255+",0)"; break;
        case 3: colour="rgb("+128+","+255+",0)"; break;
        case 4: colour="rgb("+0+","+255+",0)"; break;
        default:
          colour = document.styleSheets[0].cssRules[1].style["background-color"]; 
      }
    }
    document.getElementById("dropboxResult"+i).style["background-color"] = colour;
  }
}

function cracklibResultHandler(res) {
  document.getElementById("cracklibResult").textContent = JSON.stringify(res);
}
        

Example:

Test your password:

Dropbox check (zxcvbn.js):

Strength: