Implement asset cache busting and password strength checking with zxcvbn.

This commit is contained in:
Buster Silver 2017-06-22 23:54:50 -05:00
parent d39efcc6fa
commit 19553016a0
22 changed files with 697 additions and 55 deletions

View File

@ -229,6 +229,7 @@ return function (\Slim\Container $di, \App\Config $config) {
$view->addData([
'di' => $di,
'assets' => $di['assets'],
'auth' => $di['auth'],
'acl' => $di['acl'],
'url' => $di['url'],
@ -240,6 +241,34 @@ return function (\Slim\Container $di, \App\Config $config) {
return $view;
});
$di['assets'] = function ($di) {
return new class($di['url']) {
/** @var \App\Url */
protected $url;
/** @var array */
protected $assets;
public function __construct(\App\Url $url) {
$this->url = $url;
$assets = [];
$assets_file = APP_INCLUDE_STATIC.'/assets.json';
if (file_exists($assets_file)) {
$assets = json_decode(file_get_contents($assets_file), true);
}
$this->assets = $assets;
}
public function getPath($asset) {
return $this->url->content($this->assets[$asset] ?? $asset);
}
};
};
// Set up application and routing.
$di['app'] = function ($di) {

View File

@ -2,7 +2,7 @@
<?php $this->start('custom_js') ?>
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/store-js/store.min.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('js/radio.js') ?>"></script>
<script type="text/javascript" src="<?=$assets->getPath('js/radio.js') ?>"></script>
<?php $this->stop('custom_js') ?>
<ul class="actions pull-right">

View File

@ -4,7 +4,7 @@
<script type="text/javascript" src="<?=$url->content('vendors/bootgrid/jquery.bootgrid.updated.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/store-js/store.min.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('js/radio.js') ?>"></script>
<script type="text/javascript" src="<?=$assets->getPath('js/radio.js') ?>"></script>
<?php $this->stop('custom_js') ?>
<?php $this->start('custom_css') ?>

View File

@ -1,5 +1,9 @@
<?php $this->layout('minimal', ['title' => 'Set Up', 'page_class' => 'login-content']) ?>
<?php $this->start('custom_js') ?>
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/zxcvbn/dist/zxcvbn.js') ?>"></script>
<?php $this->stop('custom_js') ?>
<!-- Login -->
<div class="lc-block toggled" id="l-login">
<div class="lcb-form">

View File

@ -2,7 +2,7 @@
<?php $this->start('custom_js') ?>
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/store-js/store.min.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('js/radio.js') ?>"></script>
<script type="text/javascript" src="<?=$assets->getPath('js/radio.js') ?>"></script>
<?php $this->stop('custom_js') ?>
<div class="row">

View File

@ -38,7 +38,7 @@ if (APP_APPLICATION_ENV != "production")
<?=$this->section('custom_css') ?>
<link rel="stylesheet" type="text/css" href="<?=$url->content('css/'.$customization->getTheme().'.css') ?>">
<link rel="stylesheet" type="text/css" href="<?=$assets->getPath('css/'.$customization->getTheme().'.css') ?>">
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/jquery/dist/jquery.min.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
@ -162,13 +162,14 @@ var APP_ContentPath = '<?=$url->content('') ?>';
<?=$this->section('custom_js') ?>
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/zxcvbn/dist/zxcvbn.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('vendors/bootstrap-growl/bootstrap-growl.min.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/bootstrap-sweetalert/lib/sweet-alert.min.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('vendors/bower_components/autosize/dist/autosize.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('vendors/bootgrid/jquery.bootgrid.updated.js') ?>"></script>
<script type="text/javascript" src="<?=$url->content('js/app.min.js') ?>"></script>
<script type="text/javascript" src="<?=$assets->getPath('js/app.min.js') ?>"></script>
<?php if ($flash->hasMessages()): ?>
<script type="text/javascript">

View File

@ -47,46 +47,4 @@ $inner_form = $form->getForm();
<?php endforeach; ?>
<?=$inner_form->closeForm() ?>
<script type="text/javascript">
$(function() {
$('form.form').each(function() {
var $form = $(this);
$form.addClass('fa-form-engine fa-form');
$form.find('.form-group > label').addClass('control-label');
$form.find('input:not(input[type=button],input[type=submit],input[type=reset],input[type=radio],input[type=checkbox]),textarea,select').addClass('form-control');
$form.find('select').wrap('<div class="select" />');
autosize($form.find('textarea'));
$form.find('input[type=radio]').each(function() {
$(this).closest('.form-field').addClass('radio-group');
$(this).next('label').addBack().wrapAll('<div class="radio m-b-15" />');
});
$form.find('input[type=checkbox]').each(function() {
$(this).closest('.form-field').addClass('checkbox-group');
$(this).next('label').addBack().wrapAll('<div class="checkbox m-b-15" />');
});
$form.find('input[type=checkbox],input[type=radio]').after('<i class="input-helper"></i>');
$form.find('input[type=checkbox].inline').removeClass('inline').closest('div.checkbox').addClass('checkbox-inline');
$form.find('input[type=radio].inline').removeClass('inline').closest('div.radio').addClass('radio-inline');
$form.find('div.checkbox:not(.checkbox-inline)').addClass('m-b-15');
$form.find('div.radio:not(.radio-inline)').addClass('m-b-15');
$form.find('.help-block.form-error').parent().addClass('has-error');
$form.find('.help-block.form-success').parent().addClass('has-success');
$form.find('.help-block.form-warning').parent().addClass('has-warning');
$form.find('input[type=button],input[type=submit],input[type=reset]').addClass('btn m-t-10');
});
});
</script>
<?=$inner_form->closeForm() ?>

View File

@ -7,6 +7,7 @@ cd /data
ln -s /var/azuracast/www/web/static/gruntfile.js /data/gruntfile.js
ln -s /var/azuracast/www/web/static/package.json /data/package.json
ln -s /var/azuracast/www/web/static/assets.json /data/assets.json
ln -s /var/azuracast/www/web/static/css /data/css
ln -s /var/azuracast/www/web/static/js /data/js
ln -s /var/azuracast/www/web/static/less /data/less

1
web/static/assets.json Normal file
View File

@ -0,0 +1 @@
{"js/radio.js":"js/radio.js?32ce55fcbb575b80","js/app.min.js":"js/app.min.js?2aadfa83f30d0703","js/app.js":"js/app.js?271489a90129cb75","css/light.css":"css/light.css?5eb77e59bac195af","css/dark.css":"css/dark.css?d76a38e41049bf09"}

View File

@ -61,6 +61,17 @@ module.exports = function(grunt) {
files: ['js/inc/**/*.js'], // which files to watch
tasks: ['concat', 'uglify']
}
},
cacheBust: {
core: {
options: {
assets: ['js/*.js', 'css/*.css'],
queryString: true,
jsonOutput: true,
jsonOutputFilename: 'assets.json'
},
src: ['index.html']
}
}
});
@ -70,9 +81,10 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-cache-bust');
// Default task(s).
grunt.registerTask('default', ['less', 'concat', 'uglify']);
grunt.registerTask('default', ['less', 'concat', 'uglify', 'cacheBust']);
grunt.registerTask('js', ['concat', 'uglify']);
};

View File

@ -270,6 +270,45 @@ $(function() {
});
$(function() {
$('form.form').each(function() {
var $form = $(this);
$form.addClass('fa-form-engine fa-form');
$form.find('.form-group > label').addClass('control-label');
$form.find('input:not(input[type=button],input[type=submit],input[type=reset],input[type=radio],input[type=checkbox]),textarea,select').addClass('form-control');
$form.find('select').wrap('<div class="select" />');
autosize($form.find('textarea'));
$form.find('input[type=radio]').each(function() {
$(this).closest('.form-field').addClass('radio-group');
$(this).next('label').addBack().wrapAll('<div class="radio m-b-15" />');
});
$form.find('input[type=checkbox]').each(function() {
$(this).closest('.form-field').addClass('checkbox-group');
$(this).next('label').addBack().wrapAll('<div class="checkbox m-b-15" />');
});
$form.find('input[type=checkbox],input[type=radio]').after('<i class="input-helper"></i>');
$form.find('input[type=checkbox].inline').removeClass('inline').closest('div.checkbox').addClass('checkbox-inline');
$form.find('input[type=radio].inline').removeClass('inline').closest('div.radio').addClass('radio-inline');
$form.find('div.checkbox:not(.checkbox-inline)').addClass('m-b-15');
$form.find('div.radio:not(.radio-inline)').addClass('m-b-15');
$form.find('.help-block.form-error').parent().addClass('has-error');
$form.find('.help-block.form-success').parent().addClass('has-success');
$form.find('.help-block.form-warning').parent().addClass('has-warning');
$form.find('input[type=button],input[type=submit],input[type=reset]').addClass('btn m-t-10');
});
});
/*----------------------------------------------------------
Detect Mobile Browser
-----------------------------------------------------------*/
@ -607,4 +646,63 @@ function notify(message, type, minimal_layout) {
}
$.growl({ message: message }, growlSettings);
}
}
$(document).ready(function () {
// Show password strength meter.
if (typeof zxcvbn === 'function') {
$('input[type=password]').on('keyup', function(e) {
var result = zxcvbn($(this).val()),
score = result.score;
var group = $(this).closest('.form-group');
if (!group.length) {
group = $(this).closest('div');
}
var explanation = group.find('.help-block.password-explanation');
if (!explanation.length) {
explanation = $('<small class="help-block password-explanation" />');
var label = group.find('label');
if (label.length) {
label.after(explanation);
} else {
$(this).after(explanation);
}
explanation = group.find('.help-block.password-explanation');
}
if (result.feedback.warning) {
explanation.text(result.feedback.warning).show();
} else {
explanation.hide();
}
group.removeClass('has-success has-warning has-error');
switch (score) {
case 0:
case 1:
group.addClass('has-error');
break;
case 2:
case 3:
group.addClass('has-warning');
break;
case 4:
group.addClass('has-success');
break;
}
});
}
});

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,39 @@
$(function() {
$('form.form').each(function() {
var $form = $(this);
$form.addClass('fa-form-engine fa-form');
$form.find('.form-group > label').addClass('control-label');
$form.find('input:not(input[type=button],input[type=submit],input[type=reset],input[type=radio],input[type=checkbox]),textarea,select').addClass('form-control');
$form.find('select').wrap('<div class="select" />');
autosize($form.find('textarea'));
$form.find('input[type=radio]').each(function() {
$(this).closest('.form-field').addClass('radio-group');
$(this).next('label').addBack().wrapAll('<div class="radio m-b-15" />');
});
$form.find('input[type=checkbox]').each(function() {
$(this).closest('.form-field').addClass('checkbox-group');
$(this).next('label').addBack().wrapAll('<div class="checkbox m-b-15" />');
});
$form.find('input[type=checkbox],input[type=radio]').after('<i class="input-helper"></i>');
$form.find('input[type=checkbox].inline').removeClass('inline').closest('div.checkbox').addClass('checkbox-inline');
$form.find('input[type=radio].inline').removeClass('inline').closest('div.radio').addClass('radio-inline');
$form.find('div.checkbox:not(.checkbox-inline)').addClass('m-b-15');
$form.find('div.radio:not(.radio-inline)').addClass('m-b-15');
$form.find('.help-block.form-error').parent().addClass('has-error');
$form.find('.help-block.form-success').parent().addClass('has-success');
$form.find('.help-block.form-warning').parent().addClass('has-warning');
$form.find('input[type=button],input[type=submit],input[type=reset]').addClass('btn m-t-10');
});
});

View File

@ -0,0 +1,59 @@
$(document).ready(function () {
// Show password strength meter.
if (typeof zxcvbn === 'function') {
$('input[type=password]').on('keyup', function(e) {
var result = zxcvbn($(this).val()),
score = result.score;
var group = $(this).closest('.form-group');
if (!group.length) {
group = $(this).closest('div');
}
var explanation = group.find('.help-block.password-explanation');
if (!explanation.length) {
explanation = $('<small class="help-block password-explanation" />');
var label = group.find('label');
if (label.length) {
label.after(explanation);
} else {
$(this).after(explanation);
}
explanation = group.find('.help-block.password-explanation');
}
if (result.feedback.warning) {
explanation.text(result.feedback.warning).show();
} else {
explanation.hide();
}
group.removeClass('has-success has-warning has-error');
switch (score) {
case 0:
case 1:
group.addClass('has-error');
break;
case 2:
case 3:
group.addClass('has-warning');
break;
case 4:
group.addClass('has-success');
break;
}
});
}
});

View File

@ -3,9 +3,10 @@
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-less": "~1.3.0",
"grunt-cache-bust": "^1.5.1",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-less": "~1.3.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "^0.8.0",
"grunt-contrib-watch": "^0.6.1",

View File

@ -49,7 +49,6 @@
"commit": "eac2b0af71a7ca06cc19e28d15ba60f6db2dfd29"
},
"_source": "https://github.com/malihu/malihu-custom-scrollbar-plugin.git",
"_target": "^3.1.5",
"_originalSource": "malihu-custom-scrollbar-plugin",
"_direct": true
"_target": "~3.1.0",
"_originalSource": "malihu-custom-scrollbar-plugin"
}

View File

@ -0,0 +1,45 @@
{
"name": "zxcvbn",
"description": "realistic password strength estimation",
"main": "dist/zxcvbn.js",
"keywords": [
"password",
"passphrase",
"strength",
"quality",
"estimation",
"estimate",
"meter",
"pattern",
"matcher",
"security",
"authentication",
"cracking",
"scoring",
"entropy",
"bruteforce"
],
"ignore": [
"/.*",
"*.json",
"node_modules",
"data",
"data-scripts",
"demo",
"lib",
"src",
"test"
],
"homepage": "https://github.com/dropbox/zxcvbn",
"version": "4.4.2",
"_release": "4.4.2",
"_resolution": {
"type": "version",
"tag": "v4.4.2",
"commit": "0b7f691c370d922399fe60927433338c062dde23"
},
"_source": "https://github.com/dropbox/zxcvbn.git",
"_target": "^4.4.2",
"_originalSource": "zxcvbn",
"_direct": true
}

View File

@ -0,0 +1,20 @@
Copyright (c) 2012-2016 Dan Wheeler and Dropbox, Inc.
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -0,0 +1,287 @@
```
_________________________________________________/\/\___________________
_/\/\/\/\/\__/\/\__/\/\____/\/\/\/\__/\/\__/\/\__/\/\________/\/\/\/\___
_____/\/\______/\/\/\____/\/\________/\/\__/\/\__/\/\/\/\____/\/\__/\/\_
___/\/\________/\/\/\____/\/\__________/\/\/\____/\/\__/\/\__/\/\__/\/\_
_/\/\/\/\/\__/\/\__/\/\____/\/\/\/\______/\______/\/\/\/\____/\/\__/\/\_
________________________________________________________________________
```
[![Build Status](https://travis-ci.org/dropbox/zxcvbn.svg?branch=master)](https://travis-ci.org/dropbox/zxcvbn)
[![Sauce Test Status](https://saucelabs.com/browser-matrix/dropbox-zxcvbn.svg)](https://saucelabs.com/u/dropbox-zxcvbn)
`zxcvbn` is a password strength estimator inspired by password crackers. Through pattern matching and conservative estimation, it recognizes and weighs 30k common passwords, common names and surnames according to US census data, popular English words from Wikipedia and US television and movies, and other common patterns like dates, repeats (`aaa`), sequences (`abcd`), keyboard patterns (`qwertyuiop`), and l33t speak.
Consider using zxcvbn as an algorithmic alternative to password composition policy — it is more secure, flexible, and usable when sites require a minimal complexity score in place of annoying rules like "passwords must contain three of {lower, upper, numbers, symbols}".
* __More secure__: policies often fail both ways, allowing weak passwords (`P@ssword1`) and disallowing strong passwords.
* __More flexible__: zxcvbn allows many password styles to flourish so long as it detects sufficient complexity — passphrases are rated highly given enough uncommon words, keyboard patterns are ranked based on length and number of turns, and capitalization adds more complexity when it's unpredictaBle.
* __More usable__: zxcvbn is designed to power simple, rule-free interfaces that give instant feedback. In addition to strength estimation, zxcvbn includes minimal, targeted verbal feedback that can help guide users towards less guessable passwords.
For further detail and motivation, please refer to the USENIX Security '16 [paper and presentation](https://www.usenix.org/conference/usenixsecurity16/technical-sessions/presentation/wheeler).
At Dropbox we use zxcvbn ([Release notes](https://github.com/dropbox/zxcvbn/releases)) on our web, desktop, iOS and Android clients. If JavaScript doesn't work for you, others have graciously ported the library to these languages:
* [`zxcvbn-python`](https://github.com/dwolfhub/zxcvbn-python) (Python)
* [`zxcvbn-cpp`](https://github.com/rianhunter/zxcvbn-cpp) (C/C++/Python/JS)
* [`zxcvbn-c`](https://github.com/tsyrogit/zxcvbn-c) (C/C++)
* [`zxcvbn-rs`](https://github.com/shssoichiro/zxcvbn-rs) (Rust)
* [`zxcvbn-go`](https://github.com/nbutton23/zxcvbn-go) (Go)
* [`zxcvbn4j`](https://github.com/nulab/zxcvbn4j) (Java)
* [`nbvcxz`](https://github.com/GoSimpleLLC/nbvcxz) (Java)
* [`zxcvbn-ruby`](https://github.com/envato/zxcvbn-ruby) (Ruby)
* [`zxcvbn-js`](https://github.com/bitzesty/zxcvbn-js) (Ruby [via ExecJS])
* [`zxcvbn-ios`](https://github.com/dropbox/zxcvbn-ios) (Objective-C)
* [`zxcvbn-cs`](https://github.com/mickford/zxcvbn-cs) (C#/.NET)
* [`szxcvbn`](https://github.com/tekul/szxcvbn) (Scala)
* [`zxcvbn-php`](https://github.com/bjeavons/zxcvbn-php) (PHP)
* [`zxcvbn-api`](https://github.com/wcjr/zxcvbn-api) (REST)
Integrations with other frameworks:
* [`angular-zxcvbn`](https://github.com/ghostbar/angular-zxcvbn) (AngularJS)
# Installation
zxcvbn detects and supports CommonJS (node, browserify) and AMD (RequireJS). In the absence of those, it adds a single function `zxcvbn()` to the global namespace.
## Bower
Install [`node`](https://nodejs.org/download/) and [`bower`](http://bower.io/) if you haven't already.
Get `zxcvbn`:
``` shell
cd /path/to/project/root
bower install zxcvbn
```
Add this script to your `index.html`:
``` html
<script src="bower_components/zxcvbn/dist/zxcvbn.js">
</script>
```
To make sure it loaded properly, open in a browser and type `zxcvbn('Tr0ub4dour&3')` into the console.
To pull in updates and bug fixes:
``` shell
bower update zxcvbn
```
## Node / npm / MeteorJS
zxcvbn works identically on the server.
``` shell
$ npm install zxcvbn
$ node
> var zxcvbn = require('zxcvbn');
> zxcvbn('Tr0ub4dour&3');
```
## RequireJS
Add [`zxcvbn.js`](https://raw.githubusercontent.com/dropbox/zxcvbn/master/dist/zxcvbn.js) to your project (using bower, npm or direct download) and import as usual:
``` javascript
requirejs(["relpath/to/zxcvbn"], function (zxcvbn) {
console.log(zxcvbn('Tr0ub4dour&3'));
});
```
## Browserify / Webpack
If you're using `npm` and have `require('zxcvbn')` somewhere in your code, browserify and webpack should just work.
``` shell
$ npm install zxcvbn
$ echo "console.log(require('zxcvbn'))" > mymodule.js
$ browserify mymodule.js > browserify_bundle.js
$ webpack mymodule.js webpack_bundle.js
```
But we recommend against bundling zxcvbn via tools like browserify and webpack, for three reasons:
* Minified and gzipped, zxcvbn is still several hundred kilobytes. (Significantly grows bundle size.)
* Most sites will only need zxcvbn on a few pages (registration, password reset).
* Most sites won't need `zxcvbn()` immediately upon page load; since `zxcvbn()` is typically called in response to user events like filling in a password, there's ample time to fetch `zxcvbn.js` after initial html/css/js loads and renders.
See the [performance](#perf) section below for tips on loading zxcvbn stand-alone.
Tangentially, if you want to build your own standalone, consider tweaking the browserify pipeline used to generate `dist/zxcvbn.js`:
``` shell
$ browserify --debug --standalone zxcvbn \
-t coffeeify --extension='.coffee' \
-t uglifyify \
src/main.coffee | exorcist dist/zxcvbn.js.map >| dist/zxcvbn.js
```
* `--debug` adds an inline source map to the bundle. `exorcist` pulls it out into `dist/zxcvbn.js.map`.
* `--standalone zxcvbn` exports a global `zxcvbn` when CommonJS/AMD isn't detected.
* `-t coffeeify --extension='.coffee'` compiles `.coffee` to `.js` before bundling. This is convenient as it allows `.js` modules to import from `.coffee` modules and vice-versa. Instead of this transform, one could also compile everything to `.js` first (`npm run prepublish`) and point `browserify` to `lib` instead of `src`.
* `-t uglifyify` minifies the bundle through UglifyJS, maintaining proper source mapping.
## Manual installation
Download [zxcvbn.js](https://raw.githubusercontent.com/dropbox/zxcvbn/master/dist/zxcvbn.js).
Add to your .html:
``` html
<script type="text/javascript" src="path/to/zxcvbn.js"></script>
```
# Usage
[try zxcvbn interactively](https://dl.dropboxusercontent.com/u/209/zxcvbn/test/index.html) to see these docs in action.
``` javascript
zxcvbn(password, user_inputs=[])
```
`zxcvbn()` takes one required argument, a password, and returns a result object with several properties:
``` coffee
result.guesses # estimated guesses needed to crack password
result.guesses_log10 # order of magnitude of result.guesses
result.crack_times_seconds # dictionary of back-of-the-envelope crack time
# estimations, in seconds, based on a few scenarios:
{
# online attack on a service that ratelimits password auth attempts.
online_throttling_100_per_hour
# online attack on a service that doesn't ratelimit,
# or where an attacker has outsmarted ratelimiting.
online_no_throttling_10_per_second
# offline attack. assumes multiple attackers,
# proper user-unique salting, and a slow hash function
# w/ moderate work factor, such as bcrypt, scrypt, PBKDF2.
offline_slow_hashing_1e4_per_second
# offline attack with user-unique salting but a fast hash
# function like SHA-1, SHA-256 or MD5. A wide range of
# reasonable numbers anywhere from one billion - one trillion
# guesses per second, depending on number of cores and machines.
# ballparking at 10B/sec.
offline_fast_hashing_1e10_per_second
}
result.crack_times_display # same keys as result.crack_times_seconds,
# with friendlier display string values:
# "less than a second", "3 hours", "centuries", etc.
result.score # Integer from 0-4 (useful for implementing a strength bar)
0 # too guessable: risky password. (guesses < 10^3)
1 # very guessable: protection from throttled online attacks. (guesses < 10^6)
2 # somewhat guessable: protection from unthrottled online attacks. (guesses < 10^8)
3 # safely unguessable: moderate protection from offline slow-hash scenario. (guesses < 10^10)
4 # very unguessable: strong protection from offline slow-hash scenario. (guesses >= 10^10)
result.feedback # verbal feedback to help choose better passwords. set when score <= 2.
result.feedback.warning # explains what's wrong, eg. 'this is a top-10 common password'.
# not always set -- sometimes an empty string
result.feedback.suggestions # a possibly-empty list of suggestions to help choose a less
# guessable password. eg. 'Add another word or two'
result.sequence # the list of patterns that zxcvbn based the
# guess calculation on.
result.calc_time # how long it took zxcvbn to calculate an answer,
# in milliseconds.
````
The optional `user_inputs` argument is an array of strings that zxcvbn will treat as an extra dictionary. This can be whatever list of strings you like, but is meant for user inputs from other fields of the form, like name and email. That way a password that includes a user's personal information can be heavily penalized. This list is also good for site-specific vocabulary — Acme Brick Co. might want to include ['acme', 'brick', 'acmebrick', etc].
# <a name="perf"></a>Performance
## runtime latency
zxcvbn operates below human perception of delay for most input: ~5-20ms for ~25 char passwords on modern browsers/CPUs, ~100ms for passwords around 100 characters. To bound runtime latency for really long passwords, consider sending `zxcvbn()` only the first 100 characters or so of user input.
## script load latency
`zxcvbn.js` bundled and minified is about 400kB gzipped or 820kB uncompressed, most of which is dictionaries. Consider these tips if you're noticing page load latency on your site.
* Make sure your server is configured to compress static assets for browsers that support it. ([nginx tutorial](https://rtcamp.com/tutorials/nginx/enable-gzip/), [Apache/IIS tutorial](http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/).)
Then try one of these alternatives:
1. Put your `<script src="zxcvbn.js">` tag at the end of your html, just before the closing `</body>` tag. This insures your page loads and renders before the browser fetches and loads `zxcvbn.js`. The downside with this approach is `zxcvbn()` becomes available later than had it been included in `<head>` — not an issue on most signup pages where users are filling out other fields first.
2. If you're using RequireJS, try loading `zxcvbn.js` separately from your main bundle. Something to watch out for: if `zxcvbn.js` is required inside a keyboard handler waiting for user input, the entire script might be loaded only after the user presses their first key, creating nasty latency. Avoid this by calling your handler once upon page load, independent of user input, such that the `requirejs()` call runs earlier.
3. Use the HTML5 [`async`](http://www.w3schools.com/tags/att_script_async.asp) script attribute. Downside: [doesn't work](http://caniuse.com/#feat=script-async) in IE7-9 or Opera Mini.
4. Include an inline `<script>` in `<head>` that asynchronously loads `zxcvbn.js` in the background. Advantage over (3): it works in older browsers.
``` javascript
// cross-browser asynchronous script loading for zxcvbn.
// adapted from http://friendlybit.com/js/lazy-loading-asyncronous-javascript/
(function() {
var ZXCVBN_SRC = 'path/to/zxcvbn.js';
var async_load = function() {
var first, s;
s = document.createElement('script');
s.src = ZXCVBN_SRC;
s.type = 'text/javascript';
s.async = true;
first = document.getElementsByTagName('script')[0];
return first.parentNode.insertBefore(s, first);
};
if (window.attachEvent != null) {
window.attachEvent('onload', async_load);
} else {
window.addEventListener('load', async_load, false);
}
}).call(this);
```
# Development
Bug reports and pull requests welcome!
``` shell
git clone https://github.com/dropbox/zxcvbn.git
```
zxcvbn is built with CoffeeScript, browserify, and uglify-js. CoffeeScript source lives in `src`, which gets compiled, bundled and minified into `dist/zxcvbn.js`.
``` shell
npm run build # builds dist/zxcvbn.js
npm run watch # same, but quickly rebuilds as changes are made in src.
```
For debugging, both `build` and `watch` output an external source map `dist/zxcvbn.js.map` that points back to the original CoffeeScript code.
Two source files, `adjacency_graphs.coffee` and `frequency_lists.coffee`, are generated by python scripts in `data-scripts` that read raw data from the `data` directory.
For node developers, in addition to `dist`, the zxcvbn `npm` module includes a `lib` directory (hidden from git) that includes one compiled `.js` and `.js.map` file for every `.coffee` in `src`. See `prepublish` in `package.json` to learn more.
# Acknowledgments
[Dropbox](https://dropbox.com) for supporting open source!
Mark Burnett for releasing his 10M password corpus and for his 2005 book, [Perfect Passwords: Selection, Protection, Authentication](http://www.amazon.com/Perfect-Passwords-Selection-Protection-Authentication/dp/1597490415).
Wiktionary contributors for building a [frequency list of English words](http://en.wiktionary.org/wiki/Wiktionary:Frequency_lists) as used in television and movies.
Researchers at Concordia University for [studying password estimation rigorously](http://www.concordia.ca/cunews/main/stories/2015/03/25/does-your-password-pass-muster.html) and recommending zxcvbn.
And [xkcd](https://xkcd.com/936/) for the inspiration :+1::horse::battery::heart:

View File

@ -0,0 +1,33 @@
{
"name": "zxcvbn",
"description": "realistic password strength estimation",
"main": "dist/zxcvbn.js",
"keywords": [
"password",
"passphrase",
"strength",
"quality",
"estimation",
"estimate",
"meter",
"pattern",
"matcher",
"security",
"authentication",
"cracking",
"scoring",
"entropy",
"bruteforce"
],
"ignore": [
"/.*",
"*.json",
"node_modules",
"data",
"data-scripts",
"demo",
"lib",
"src",
"test"
]
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long