Aké silné máte heslo? Ako rýchlo sa dá prelomiť?

how-secure-is-my-passwordNa tomto blogu som už o overovaní sily hesla písal. Išlo o článok, kde som ukázal krátky javascript na overenie sily hesla. V tomto článku chcem odporučiť stránku HOW SECURE IS MY PASSWORD. Ide viacmenej o hračku, na ktorej možno vyskúšať, aké je silné heslo. Javascript vyskúša slovníkový útok a odhadne, ako dlho by trvalo prelomenie hesla.

Stránku som preskúmal a v čase písania tohto článku som nezistil, že by stránka heslá niekam posielala alebo zbierala. Takže, nie je sa čoho báť.

jQuery pluginy #1

jquery_logo_color_onwhiteV tomto článku sa budem venovať pluginom pre JavaScriptový framework jQuery.

jQery plugin: Organic Tabs

Veľmi často sa jQuery používa na vytvorenie takzvaných tabov. Špecialitou tohoto pluginu je, že animuje aj natiahnutie tabu ak je to potrebné.

Demo | Stiahnutie súborov | Zdroj: CSS-Tricks.com

HTML:

<div id="organic-tabs">
<ul id="explore-nav">
<li id="ex-featured"><a class="current" rel="featured" href="#">Featured</a></li>
<li id="ex-core"><a rel="core" href="#">Core</a></li>
<li id="ex-jquery"><a rel="jquerytuts" href="#">jQuery</a></li>
<li id="ex-classics" class="last"><a rel="classics" href="#">Classics</a></li>
</ul>
<div id="all-list-wrap">
<ul id="featured">
<li><a href="#">Full Page Background Images</a></li>
<li><a href="#">Designing for WordPress</a></li>
<!-- More... --></ul>
<ul id="core">
<li><a href="#">The VERY Basics of HTML &amp; CSS</a></li>
<li><a href="#">Classes and IDs</a></li>
<!-- More... --></ul>
<ul id="jquerytuts">
<li><a href="#">Anything Slider jQuery Plugin</a></li>
<li><a href="#">Moving Boxes</a></li>
<!-- More... --></ul>
<ul id="classics">
<li><a href="#">Top Designers CSS Wishlist</a></li>
<li><a href="#">What Beautiful HTML Code Looks Like</a></li>
<!-- More... --></ul>
</div>
<!-- END List Wrap --></div>
<!-- END Organic Tabs -->

CSS

ul { list-style: none; }
ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
ul li a:hover { background: #fe4902; color: white; }
ul li:last-child a { border: none; } #organic-tabs { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; } #explore-nav { overflow: hidden; margin: 0 0 10px 0; }
#explore-nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#explore-nav li.last { margin-right: 0; }
#explore-nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
#explore-nav li a:hover { background-color: #111; } #jquerytuts, #core, #classics { display: none; } #explore-nav li#ex-featured a.current, ul#featured li a:hover { background-color: #0575f4; color: white; }
#explore-nav li#ex-core a.current, ul#core li a:hover { background-color: #d30000; color: white; }
#explore-nav li#ex-jquery a.current, ul#jquerytuts li a:hover { background-color: #8d01b0; color: white; }
#explore-nav li#ex-classics a.current, ul#classics li a:hover { background-color: #FE4902; color: white; }

JavaScript

$(function() { $("#explore-nav li a").click(function() { // Figure out current list via CSS class var curList = $("#explore-nav li a.current").attr("rel"); // List moving to var $newList = $(this); // Set outer wrapper height to height of current inner list var curListHeight = $("#all-list-wrap").height(); $("#all-list-wrap").height(curListHeight); // Remove highlighting - Add to just-clicked tab $("#explore-nav li a").removeClass("current"); $newList.addClass("current"); // Figure out ID of new list var listID = $newList.attr("rel"); if (listID != curList) { // Fade out current list $("#"+curList).fadeOut(300, function() { // Fade in new list on callback $("#"+listID).fadeIn(); // Adjust outer wrapper to fit new list snuggly var newHeight = $("#"+listID).height(); $("#all-list-wrap").animate({ height: newHeight }); }); } // Don't behave like a regular link return false; }); });

jQuery plugin: Table sorter

Tento plugin urobí z hlavičky tabuľky prvok ktorým si viete zvoliť radenie dát v tabuľke.

Demo | Stiahnutie súborov | Zdroj: Tablesorter.com

HTML:

<table id="myTable">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>

JavaScript

// automatický sorter na všechny sloupce
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
// pouze první dva sloupce
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);

jQuery plugin: Shadowbox

Multimediálny prehliadač. použitelný na zobrazenie galérií, videí alebo stránok v popup okne.

Stiahnutie súborov | Zdroj: Shadowbox-js.com

Príklad použitia HTML:

<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// let's skip the automatic setup because we don't have any
// properly configured link elements on the page
skipSetup: true,
// include the html player because we want to display some html content
players: ["html"]
});
window.onload = function(){
// open a welcome message as soon as the window loads
Shadowbox.open({
content: '<div id="welcome-msg">Welcome to my website!</div>',
player: "html",
title: "Welcome",
height: 350,
width: 350
});
};
</script>

JavaScript – Overenie sily hesla

Dnes som mal za úlohu vyriešiť zobrazenie sily hesla. Po tom, ako užívateľ zadá svoje heslo do formulárového pola, malo by sa mu pomocou JavaScriptu zobraziť nakoľko je silné.

Silu hesla môžeme posudzovať podla rôznych parametrov. Volil som nasledovné:

  • minimálna dĺžka hesla by mala byť aspoň 8 znakov
  • heslo by malo obsahovať veľké aj malé písmená
  • heslo obsahuje číselný znak
  • heslo obsahuje špeciálne znaky ! / | < > @ = # ” $ § % ^ ° ‘ ` ‘ & * ? _ ~ – ( )
  • heslo má viac ako 12 znakov

Každá jedna podmienka pridáva heslu jeden bod. Najnižšie hodnotenie je teda 0, najvyššie 5. Z toho vyplývajú stavy hesla ako krátke, veľmi slabé, slabé, dobré, veľmi dobré, vynikajúce.

Každý zo stavov sa dá pekne graficky znázorniť, aby to bolo užívateľsky príjemné.

JavaScript vyzerá nasledovne:

var desc = new Array();
desc[0] = "krátke";
desc[1] = "veľmi slabé";
desc[2] = "slabé";
desc[3] = "dobré";
desc[4] = "veľmi dobré";
desc[5] = "vynikajúce";

function passwordStrength(password, desc) {
var score = 0;
//ak je heslo väčšie ako 7 znakov, dostane 1 bod
if (password.length > 7) score++;
//ak heslo obsahuje malé aj veľké znaky, dostane 1 bod
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
//ak heslo obsahuje číslicu, dostane 1 bod
if (password.match(/d+/)) score++;
//ak heslo obsahuje špeciálny znak z množiny, dostane 1 bod
if ( password.match(/.[!,/,\,|,< ,>,@,=,#,",$,,§,%,^,°,',`,',&,*,?,_,~,-,(,)]/) ) score++;
//ak je heslo väčšie ako 12 znakov, dostane 1 bod
if (password.length > 12) score++;
//hodnota pre menej ako 6 znakov
if (password.length < 6) score = 0;
//6 alebo 7 malých alebo veľkých písmen v jednom hesle, aby sa zabránilo falošnému hodnoteniu
if ( ( password.length > 5 ) && ( score == 0 ) ) score++;

document.getElementById("passwordDescription").innerHTML = desc[score];
document.getElementById("passwordStrength").className = "strength" + score;
}

Časť v HTML:


<input type="password" name="password" onkeyup="passwordStrength(this.value, desc)" /><br />
<span id="passwordDescription"></span><br/><span id="passwordStrength" class="strength0">&nbsp;</span>

CSS môže vyzerať aj takto:


.strength0,.strength1,.strength2,.strength3,.strength4,.strength5{display:block; height:10px; width:150px;}
.strength0{background-color:#cccccc;}
.strength1{background-color:#ff0000;}
.strength2{background-color:#ffCC00;}
.strength3{background-color:#00dd00;}
.strength4{background-color:#009900;}
.strength5{background-color:#006600;}

Na záver demo:

Keďže Javascript a ja sa poznáme, no netykáme si, tento článok neberte ako článok odborníka. Určite to ide spraviť mnohými inými spôsobmi, no ja som prišiel asi po hodinke štúdia k tomuto riešeniu.