Bookmarklet to support html5 drag/drop image/file password generation

readme.txt

1. Click bookmarklet on any page with a password field.
2. Drag and drop a file from your computer into the password field
    2b. Alternatively drag an image from a website into the password field - Note: this is much less reliable unless you are in control of the page you are dragging from since this only hashes the url of the image due to security restrictions.

Requirements:
Any HTML5 capable browsers with file drag/drop. If it works you will see the password field highlight green when dragging a file/image into it.

How it works:
This will use the SHA256 hash function to hash either the content of the file being dragged from your computer or the src attribute of the image element from a website. After that it will capitalize the first 8 characters and prepend a !. This should pass through most of the password restrictions on the web - assuming of course they use maxlength appropriately.

bookmarklet.html

<a href="javascript:(function(){var head=document.getElementsByTagName('head')[0];var e=document.createElement('script');e.src='//crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/sha256.js';head.appendChild(e);e=document.createElement('style');e.innerHTML='.picpass-active {background:#aaffaa !important;z-index:10000}';head.appendChild(e);e=document.createElement('script');e.src='//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js';head.appendChild(e);var inter=setInterval(check,100);var runs=0;function check(){if(typeof jQuery!='undefined'){run();clearInterval(inter);}if(++runs>60){clearInterval(inter);}}function run(){var dropzone=$('input[type=password]');dropzone.css({'zIndex':10000});var dropped=null;var content=null;$('body').on('dragstart',function(e){if(e.srcElement.src){content=e.srcElement.src;}});dropzone.on('dragover',function(e){e.preventDefault();$(this).addClass('picpass-active');});dropzone.on('dragleave',function(e){e.preventDefault();$(this).removeClass('picpass-active');});dropzone.on('drop',function(e){dropped=$(this);e.stopPropagation();e.preventDefault();dropped.removeClass('picpass-active');processFiles(e.originalEvent.dataTransfer.files);});function processFiles(files){if(files&&typeof FileReader!=="undefined"&&files.length){readFile(files[0]);}else if(content){setValue(content);}}function setValue(v){var hash=CryptoJS.SHA256(v).toString();hash='!'+hash.substring(0,8).toUpperCase()+hash.substring(8);dropped.val(hash);}function readFile(file){var reader=new FileReader();reader.onload=function(e){setValue(e.target.result)};reader.readAsDataURL(file);}}})()">PicPass</a>

gistfile1.js

javascript:(function(){var head=document.getElementsByTagName('head')[0];var e=document.createElement('script');e.src='//crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/sha256.js';head.appendChild(e);e=document.createElement('style');e.innerHTML='.picpass-active {background:#aaffaa !important;z-index:10000}';head.appendChild(e);e=document.createElement('script');e.src='//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js';head.appendChild(e);var inter=setInterval(check,100);var runs=0;function check(){if(typeof jQuery!='undefined'){run();clearInterval(inter);}if(++runs>60){clearInterval(inter);}}function run(){var dropzone=$('input[type=password]');dropzone.css({'zIndex':10000});var dropped=null;var content=null;$('body').on('dragstart',function(e){if(e.srcElement.src){content=e.srcElement.src;}});dropzone.on('dragover',function(e){e.preventDefault();$(this).addClass('picpass-active');});dropzone.on('dragleave',function(e){e.preventDefault();$(this).removeClass('picpass-active');});dropzone.on('drop',function(e){dropped=$(this);e.stopPropagation();e.preventDefault();dropped.removeClass('picpass-active');processFiles(e.originalEvent.dataTransfer.files);});function processFiles(files){if(files&&typeof FileReader!=="undefined"&&files.length){readFile(files[0]);}else if(content){setValue(content);}}function setValue(v){var hash=CryptoJS.SHA256(v).toString();hash='!'+hash.substring(0,8).toUpperCase()+hash.substring(8);dropped.val(hash);}function readFile(file){var reader=new FileReader();reader.onload=function(e){setValue(e.target.result)};reader.readAsDataURL(file);}}})()

picpass.js

javascript:
(function(){
  var head=document.getElementsByTagName('head')[0];
  var e=document.createElement('script');
  e.src='//crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/sha256.js';
  head.appendChild(e);
  e=document.createElement('style');
  e.innerHTML='.picpass-active {background:#aaffaa !important;z-index:10000}';
  head.appendChild(e);
  e=document.createElement('script');
  e.src='//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js';
  head.appendChild(e);
  var inter=setInterval(check,100);
  var runs=0;
  function check(){
    if(typeof jQuery!='undefined'){
      run();
      clearInterval(inter);
    }
    if(++runs>60){
      clearInterval(inter);
    }
  }
  function run(){
    var dropzone=$('input[type=password]');
    dropzone.css({'zIndex':10000});
    var dropped=null;
    var content=null;
    $('body').on('dragstart',function(e){if(e.srcElement.src){content=e.srcElement.src;}});
    dropzone.on('dragover',function(e){e.preventDefault();$(this).addClass('picpass-active');});
    dropzone.on('dragleave',function(e){e.preventDefault();$(this).removeClass('picpass-active');});
    dropzone.on('drop',function(e){dropped=$(this);e.stopPropagation();e.preventDefault();dropped.removeClass('picpass-active');processFiles(e.originalEvent.dataTransfer.files);});
    function processFiles(files){
      if(files&&typeof FileReader!=="undefined"&&files.length){
        readFile(files[0]);
      }
      else
        if(content){
          setValue(content);
        }
    }
    function setValue(v){
      var hash=CryptoJS.SHA256(v).toString();
      hash='!'+hash.substring(0,8).toUpperCase()+hash.substring(8);
      dropped.val(hash);
    }
    function readFile(file){
      var reader=new FileReader();
      reader.onload=function(e){
        setValue(e.target.result)            
      }
      ;
      reader.readAsDataURL(file);
    }
  }
}
)()