torsdagen den 23:e augusti 2012

Att bygga sitt egna PHP ramverk: Användarhantering och inloggning - Del 2

Detta är andra delen i bloggserien "Att bygga sitt egna PHP ramverk" - Första delen hittar ni här!

Något som de flesta sidor har, på ett eller annat sätt är någon form av användarhantering. Det kan vara allt från administratörer till kundregister. För dessa ändamål har jag i mitt ramverk skapat speciella klasser.

I grunden hittar vi klassen Person, som hanterar vanliga uppgifter så som för- och efternamn, födelsedatum, kön och så vidare. Detta är en väldigt enkel klass, men som kan ha många användningsområde.

En utbyggnad av denna klassen är User som hanterar användare. I klassen finns tillägg för bland annat lösenordshantering. Alla lösenord som hanteras envägskrypteras med en sträng unik för sidan i en SHA512-algoritm. Därtill läggs ännu ett lager med för användaren unik data in i krypteringen. För varje User genereras även en säkerhetsnyckel baserad på bland annat data om användaren, så som ip och webbläsare, som exempelvis kan synkroniseras med databasen för ett extra säkerhetslager. Detta för att exempelvis dubbelkolla så att användaren verkligen är samma som loggade in. Detta ska förhoppningsvis försvåra sessionsstölder, men samtidigt öppna upp för enklare och säker kommunikation mellan olika tjänster.

Båda dessa klasser implementerar ett interface som jag valt att kalla SessionsSycnable. Detta interface beskriver att det är möjligt att spara och hämta den aktiva användare från en server session. Detta för att underlätta överföring av information mellan sidladdningar och för att hålla reda på inloggning och dylikt.
Tanken är att allt som kan synkroniseras med session ska implementera SessionsSyncable.

Självklart finns det inga databas kopplingar från någon av dessa klasser då klasserna och objekten av dem ska vara helt oberoende av övrig struktur i systemet. Ett User-objekt är bara ramen och behållaren för information som sedan kan sparas och hämtas från exempelvis en MySQL-databas. Men själva databaslogiken sker uteslutande i Model-klassen och kan vara unik för varje projekt. Men det är ett sätt att försöka standardisera "användaren" och hanteringen av dessa oberoende av projekt.

Låt oss gå in på lite "nörd"-nivå och kolla på lite närmare på funktioner och källkod.

För att säkerställa användarens lösenord så använder vi oss av SHA512-krypering som är en en vägs kryptering. Dessutom slänger vi in två typer av "salt" för att försvåra eventuellt försök till lösa krypteringen med exempelvis en Rainbow-tabell.

Salt i sammanhanget är alltså en unik sträng som läggs ihop med lösenordet som sedan krypteras.

Exempel: 
Om vi enbart krypterar ordet "lösenord" så får vi följande SHA512 hash; 4f4674b2f6d25aecb2192cc5351fbf1f79d53582b9b940ef8db87a77b6d1560995525bfd33b516834efee7805f71e46e61447705ba5862b6aa9923b6344d93f3

Denna hash-sträng är alltid samma för ordet "lösenord", vilket betyder att om man med en tabell av kända hash-strängar kan ta reda på själva lösenordet. Inte så bra.

Lägger man dock till "salt", en slumpmässig sträng tillsammans med lösenordet, så får vi ett unik lösenord. Dessutom blir två lösenord som egentligen är samma unika.

Exempel:
Om vi tar ordet "lösenord" och sedan lägger till "sja893haksm3" som salt; alltså "lösenordsja893haksm3" så får vi SHA512-hashen:
6203a2c0fe705aa70737d65622b874a150b66a1a5bba4bfd8de3bed109c9feb3178e65b6e9a88d11ce690270608e62dfc65397740d5867e079eba75eaa1f4888

Detta är såklart betydligt svårare att försöka lösa. Jag har dessutom valt att använda två "salt"-strängar. En helt unik och slumpmässig sträng för användaren och en för systemet. Användarens unika sträng sparas tillsammans med hans övriga uppgifter i databasen och systemets sparas i en konfigurations-fil.
För att göra det ännu svårare kan man även lägga till ytterligare information, allt för att göra det svårare för att "hacka".

Studerar man diverse "decrypters" som finns tillgängliga, som ganska effektivt kan lösa enklare lösenord så får man också en uppfattning om vad man behöver lösa.

De flesta hash avkrypterare fungerar på så vis att de arbetar mot en tabell av vanliga lösenord i kombination med vanligt förekommande salt-strängar. De testar olika kombinationer av salt + lösenord.

Exempel:
md5($pass.$salt)

md5($salt.$pass)
md5(md5($pass).$salt)
md5(md5($salt).$pass)
md5($salt.md5($pass))
md5($salt.$pass.$salt)

En annan metod är att programmet har en tabell med redan lösta hash-strängar (det finns stora databaser med detta) som den sedan jämför mot för att hitta lösenordet.
Sedan finns det såklart den mest tidsödande metoden, att programmet helt enkelt slumpar fram strängar som den sedan försöker jämföra med din hash-sträng. Denna metod är egentligen enbart effektiv mot korta lösenord, då det för varje tecken i ett lösenord ökar antalet kombinationer att prova. Skillnaden mellan att lösa ett lösenord på fem och åtta tecken för en snabb dator är enorm. Ett lösenord på fem tecken har 931151402 kombinationer och går att lösa inom två timmar. Medan ett lösenord på åtta tecken har hela 221919451578090 kombinationer och tar lite drygt 40 år för en dator som kan prova ca 170 000 tecken per sekund.

Så två salt-strängar kombinerat med ett lösenord gör att även korta lösenord blir mycket svåra att lösa. :)

Att bygga sitt egna PHP ramverk:


Mer läsning:
Wikipedia om SHA-2 (elektroniskt) <http://en.wikipedia.org/wiki/SHA-2>
Testa ditt lösenord på Open Security Research (elektroniskt) <http://calc.opensecurityresearch.com/>
PHP manual om hash-funktionen (elektroniskt) <http://php.net/manual/en/function.hash.php>
Password Hashing, James McGlinn (elektroniskt) <http://phpsec.org/articles/2005/password-hashing.html>

Dynamiskt anpassningsbara DIV-block med unik ram



Det finns ett problem som är ständigt återkommande för oss som jobbar med webbdesign; Hur ska jag skapa DIV-block som är dynamiskt anpassningsbara till storlek och har en unik ram?
Vi talar alltså om "custom border" till DIV-taggar.

Det är ett problem som verkar ha en lösning inom en nära framtid. Det finns redan lösningar i CSS3, med box-shadow, border-image och border-radius. Men CSS3 har är tyvärr inte ännu 100% kompatibel med alla webbläsare, det har inte 100% "cross-browser support". Dessutom lever vi inte i den bästa av världar och många, framför allt de som sitter på gamla operativsystem, sitter på gamla webbläsare. Suck! Host, host Windows och Explorer!

Jag har i alla fall en lösning jag ständigt återkommer och återanvänder i väntan på en standardiserad webb. Låt oss först kolla på min lösnings för och nackdelar.

Fördelar:
  • Anpassar sig dynamiskt till olika stora DIV-block.
  • Använder egen grafik.
  • Fungerar i alla webbläsare och versioner. Hej IE 6!
  • Ganska snabbt och enkelt att implementera.
  • Helt fri från JavaScript, 100% HTML och CSS.

Nackdelar:
  • Kräver 8 bilder.
  • Kräver 8 extra DIV-block utan innehåll.
  • Ser inte jättevackert ut i källkoden.
Så, det avklarat och utrett, här kommer källkod till lösningen. Förklaring hittas också längre ner.

HTML:
<div class="box">
    <h1>Header 1</h1>

    Vivamus tincidun...

    <div class="border_t"></div>
    <div class="border_b"></div>
    <div class="border_l"></div>
    <div class="border_r"></div>
    <div class="border_br"></div>
    <div class="border_bl"></div>
    <div class="border_tr"></div>
    <div class="border_tl"></div>
</div>

CSS:
<style type="text/css">
<!--
.box{
    background:#FFFFFF;
    margin:10px;
    float:left;
    padding:10px;
    width:250px;
    position:relative;
}
.border_t {
    background:url(border_t.png) repeat-x;
    position:absolute;
    top:-2px; left:0;
    width:100%;
    height:2px;
}
.border_b {
    background:url(border_b.png) repeat-x;
    position:absolute;
    bottom:-6px; left:0;
    width:100%;
    height:6px;
}
.border_l {
    background:url(border_l.png) repeat-y;
    position:absolute;
    top:0; left:-3px;
    width:3px;
    height:100%;
}
.border_r {
    background:url(border_r.png) repeat-y;
    position:absolute;
    top:0; right:-6px;
    width:6px;
    height:100%;
}
.border_br {
    background:url(border_br.png);
    position:absolute;
    bottom:-6px; right:-6px;
    width:6px;
    height:6px;
}
.border_bl {
    background:url(border_bl.png);
    position:absolute;
    bottom:-6px; left:-3px;
    width:3px;
    height:6px;
}
.border_tr {
    background:url(border_tr.png);
    position:absolute;
    top:-2px; right:-5px;
    width:5px;
    height:2px;
}
.border_tl {
    background:url(border_tl.png);
    position:absolute;
    top:-2px; left:-2px;
    width:2px;
    height:2px;
}
-->
</style>


Förklaring:
Som ni säkert förstår bygger lösningen på åtta bilder. En bild för varje hörn och en för varje kant. De är små bilder på bara några pixlar som går snabbt att ladda.


Tar vi exempelvis underkantens bild så behöver den inte vara mer än 1 pixel bred och 5 pixlar hög för att täcka skuggan som är vår ram. Hörnet är 5 x 5 pixlar. Med CSS kan vi sedan sy ihop dessa bilder till en helhet.

Men som sagt, snart kan vi förhoppningsvis använda CSS3 och allt detta meck är ett minne blott! :)

fredagen den 3:e augusti 2012

Design för en t-shirt: #8


Silent Lovemaking

Inspiration: Hade en kund som jobbade med projekt för döva. Det var mycket teckenspråk. Fick mig att tänka på Svenssonsex, eller kanske fördomar om det. Det blev dock inget med kundprojektet men denna t-tröjan föddes.



Missade ni det inledande inlägget i t-shirtserien, läs det här: 

Ps. Önskemål är välkomna. Jag lovar inget, men sannolikheten är stor.

tisdagen den 3:e juli 2012

Design för en t-shirt: #7


Duck Duck Pixel

Inspiration: Duck Hunt till Nintendo 8-bit. Antagligen det enda spelet någonsin där det faktiskt fungerat att spela med något annat än en standard kontroll. Finns det överhuvudtaget roliga spel för plastpistols-kontroller längre?



Missade ni det inledande inlägget i t-shirtserien, läs det här: 

Ps. Önskemål är välkomna. Jag lovar inget, men sannolikheten är stor.

Design för en t-shirt: #6

So Intense

Inspiration: Yosemitebear Mountain Giant Double Rainbow 1-8-10 av Hungrybear9562 på YouTube. Även en av de första t-tröjan jag skapade och tryckte upp.



Missade ni det inledande inlägget i t-shirtserien, läs det här: 

Ps. Önskemål är välkomna. Jag lovar inget, men sannolikheten är stor.

måndagen den 25:e juni 2012

PROJEKT: ATT GÖRA EN ARTIST - Del 1

Har ännu ett nytt projekt på gång. Ska hjälpa till att lansera en musiker på nätet. Musikern är ingen annan än en god vän, Rikard Ekberg. Han har talangen och materialet för att lyckas som artist, men inte en publik. Målet är att lansera honom på nätet och bygga upp hans varumärke i sociala medier.


Vi har startat en blogg, rikardekberg.blogspot.se, där Rikard skriver om sitt dagliga liv och delar med sig av musiken i alla dess skede. Vi vill ge publiken känsla av att komma närma. Därför delar vi ut ofärdiga låtar så att man kan följa deras utveckling och kanske komma med idéer.

Utöver bloggen har, jag har tvingat, Rikard skapat ett konto både på Twitter och Googe+. Två ställen sakta men säkert växer på honom. Han verkar trivas ganska bra. Självklart har han även en Facebook sedan tidigare.

Strategin just nu är att fortsätta bygga på de sociala och skapa kontakter och följare. Via Soundcloud delar vi färdiga och ofärdiga låtar till bloggen, som sedan sprids via Twitter, Google+ och Facebook.

Färdiga låtar kommer lanseras främst via YouTube för att skapa ytterligare en plattform för exponering.

Självklart kommer det upp en hemsida snart också. Men vi vill vänta lite och först bygga på det sociala, och även låta den sociala sfären vara med i utvecklingen. Känna att de är med när det byggs upp en ny artist.

Utkast på en första hemsida.

Självklart är inte strategin att "spamma" diverse sociala plattformar. Snarare att bygga upp en närvaro. Rikard är sig själv överallt och jag är enbart där som stöd och för att hålla kurs. Han är en kul kille, även utan musiken. Följ honom eller om du bor i Stockholmstrakten, varför inte bjuda på en lunch! ;-)

Vad tror ni? Vad tycker ni?
Tips och idéer?

Lyssna på två ljudspår som redan finns ute:





Statistik just nu:

Soundcloud - 2 följare / 127 lyssningar
Twitter - 117 följare
Google+ - 107 följare
Facebook - 395 vänner

Transparens! ;-)

torsdagen den 14:e juni 2012

Design för en t-shirt: #5

Jag dog i din famn i natt

Inspiration: Tror jag nyss sett filmen Driver, den med han Gössling eller vad han heter. Dagen därpå hörde jag Alexis Weak framföra låten, det lät väldigt mycket som en kväll på en skabbig karaokebar. Det blev en t-shirt.



Missade ni det inledande inlägget i t-shirtserien, läs det här: 

Ps. Önskemål är välkomna. Jag lovar inget, men sannolikheten är stor.