WEB ontwikkeling & design BLOG

WEB ontwikkeling & design BLOG

Waarom ?

Deze blog biedt een platform om informatie te delen over HTML & CSS, JavaScript, PHP, (My)SQL, ... .
Niet alleen voor de cursisten en lesgevers uit de afdeling WEB ontwikkeling & design van het SCVO-ENCORA, Grote Steenweg 226 te Berchem - Antwerpen, maar met en door iedereen die geïnteresseerd is in de ontwikkeling van het internet

Sha256 in de problemen

AlgemeenGeplaatst door Micky 05 mei, 2017 09:09:23

Om een login systeem te coderen maken we gewoonlijk gebruik van een of ander “hashing” algoritme.

Vroeger gebruikten we hiervoor de defacto webstandaard md5, maar omdat deze “corrupted/collieded” is zijn we massaal overgeschakeld naar andere hashing algorithme zoals “sha256”.

Maar ook deze algorithmen zijn “gekraakt”. Kijk maar eens op de volgende sites en je verliest alle vertrouwen in encryption op basis van hashing.

- https://md5hashing.net/hash/sha256

- https://crackstation.net/

Als we echter verder kijken, is de schade niet onherstelbaar. De engines achter deze sites gaan de hash vergelijken met een enorme database (15 miljard entries) om het paswoord dat bij de hash hoort te zoeken. Maar dit systeem werkt enkel voor een “unsalted” hash.

Door het gebruik van het “salting” principe en combinaties van verschillende hashing algoritmes blijf je (voorlopig) beveiligd.

Hoe gaan we tewerk

function encrypt($_input,$_salt)

{

$_firstHash = “md5”;

$_secondHash = “sha256”;

// eerste hashing

$_encryptedInput = hash($_firstHash,$_input);

$_encryptedSalt = hash($_firstHash,$_salt);

// tweede "salted" hashing

$_intermediateHash = hash($_secondHash,( $_encryptedInput.
$_encryptedSalt);

$_output = hash($_secondHash,( $_encryptedSalt. $_encryption);

return ($_output);

}


We gebruiken 2 verschillende hashing algorithmen
- eentje voor de eerste hash (input en salt)
- eentje voor de uiteindelijke hash (intermediait encryption en output)

we salten 2 maal
- een maal encryptedInput met encrypted salt en intermediatHash
- een maal encryptedSalt met intermediatHash en output

Ook al kent de “hacker” deze manier van werken, het blijft (voorlopig) onmogelijk om deze encryptie op te kraken, gebruik je per project andere (niet gecommuniceerde) combinaties voor first en second hashing, dan is het nog moeilijker.

Veel succes









  • Reacties(0)//www.webontwikkeling.info/#post31

Project handleiding

AlgemeenGeplaatst door Micky 24 apr, 2017 19:43:40
Hoe begin je nu in hemelsnaam aan een project ?

Op doc.webontwikkeling.info staat een projecthandleiding waar je meer informatie vind over hoe je een project efficiënt benadert, waar moet je op letten, hoe communiceer je met je klant, ... .

Dit document werd initieel gemaakt als leidraad bij de module "project" in de opleiding webontwikkelaar aan het SCVO-ENCORA maar is geschikt voor eender welk web-ontwikkeling project.

Vandaag (einde april 2017) is het document aan zijn eerste editie, maar naarmate cursisten en andere geïnteresseerden commentaar leveren zijn verdere edities niet uitgesloten



  • Reacties(0)//www.webontwikkeling.info/#post30

Work Heatmap

BracketsGeplaatst door Micky 06 feb, 2017 09:52:20
Veranderingen aangebracht aan de code en er doet zich een fout(je) voor.

Soms vergeet je wat je laatst veranderde in die code, en dan moet je de fout herstellen via "cmd z" of "cntrl z" om terug naar de oorspronkelijke versie te gaan.

Op deze manier is de fout weg, maar ook de aanpassing.

De Brackets extensie "Work Heatmap" kan je hierbij helpen.
Deze extensie markeert de veranderde lijnen met een kleurcode (bolletje) aan de linker kant en streepje in de scrollbar aan de rechter kant.

Groen is laatst aangepast, geel daarvoor.

veel succes







  • Reacties(0)//www.webontwikkeling.info/#post29

Encoding - Encryption - Hashing - Obfuscation-

AlgemeenGeplaatst door Micky 01 feb, 2017 19:20:22
Beveiliging van software en data is omgeven door heel wat "geheimen".
Laten we eerst maar eens beginnen om de "grote" principes eenduidig te benoemen voor we deze toepassen in onze applicaties



ENCODING

Wordt gebruikt voor data transmissie en kan omgekeerd worden (decodering) met het zelfde algoritme; er wordt geen sleutel gebruikt die meegestuurd moet worden met de data.
Dit principe kunnen we gebruiken om de inhoud van 'hidden' parameters in onze formulieren te beveiligen zonder variabele sleutel.



ENCRYPTION

Wordt gebruikt om data confidentieel te houden. Om de encryptie om te keren moeten we gebruik maken van een sleutel die ofwel door beide partijen gekend moet zijn ofwel meegestuurd wordt.
Dit principe kunnen we gebruiken om de inhoud van 'hidden' parameters in onze formulieren te beveiligen met een variabele sleutel die we in een "session variable" opslagen (vb. $_SESSION['encKey'])



HASHING

Wordt o.a. gebruikt voor validatie van data of voor het bewaren van de integriteit van een paswoord. Eenzelfde set characters (vb. paswoord) zal met hetzelfde hashing algoritme steeds hetzelfde resultaat geven.
We zullen paswoorden steeds onder een hashed formaat wegschrijven in onze database en dit resultaat vergelijken met de hashing van een nieuwe input



OBFUSCATION

Wordt gebruikt om de betekenis van een set data (tekst, script, …) zo te veranderen dat een machine deze zondermeer kan lezen, maar dat het voor een persoon zeer moeilijk wordt. Deze techniek wordt gebruikt om een script zo te veranderen dat deze zo goed als onleesbaar wordt en zodoende hergebruik door anderen te verhinderen.
Deze techniek is ethisch niet echt verdedigbaar; HTML CSS, JavaScript, PHP, ... zijn open-source talen waarvan de resultaten (scripts) ook open-source zouden moeten zijn.



  • Reacties(1)//www.webontwikkeling.info/#post28

Form formating

HTML & CSSGeplaatst door Micky 30 jan, 2017 16:19:11
Formulieren zijn lastig om netjes te formatteren. Niet alle velden zijn even lang en/of hoog.
Een oplossing zou kunnen zijn om de lengte van de verschillende velden even groot te houden zonder het aantal characters te beperken. De gebruiker ziet enkel een "window" van zijn input, maar ons formulier ziet er wel netjes uit.
Deze oplossing is niet echt aanvaardwaar, UX, is en blijft een van de belangrijkste factoren waar we rekening mee houden als we onze user-interface ontwerpen.

We moeten dus naar andere oplossingen kijken, CSS transformaties bijvoorbeeld.
de code achter deze link geeft een voorbeeld van een mogelijke elegante oplossing voor ongelijke input-velden.
Laat eens weten wat jullie hiervan vinden

  • Reacties(1)//www.webontwikkeling.info/#post27

SMARTY

PHPGeplaatst door Micky 30 jan, 2017 16:04:44

SMARTY is zondermeer een van de beste “template”-systemen die we gebruiken samen met PHP. Eenvoudig in gebruik en met een vlakke leercurve.


Tot nu toe, tot PHP7, was er geen enkel probleem. Geen enkele update van PHP of SMARTY maakte het noodzakelijk om de SMARTY strategy/templates aan te passen.


Tot nu, de vorige versies van SMARTY zijn niet meer compatibel met PHP7 en de laatste SMARTY versie , alhoewel volledig object georiënteerd, is niet compatibel meer met de “__autoload” strategie.

SMARTY heeft er voor gekozen om compatibel te zijn met PHP7, maar gebruikt een nieuwe file en folder structuur.


Ons resten er dus 2 mogelijke oplossingen:


1 --> SMARTY aanpassen

Deze strategie is de meest complexe en gaat volledig in tegen het “encapsulatie” principe.

2 --> Scripts aanpassen

Deze strategie blijkt de meest eenvoudige, maar betekent wel dat we geen gebruik meer kunnen maken van de “__autoload” functie.

In de opleiding Web-ontwikkelaar bij ENCORA kiezen we voor oplossing 2.

We verwijderen de “__autoload” functie en vervangen deze door includes/requires voor elke gebruikte klasse.

We includen een nieuw stukje code (mySmarty.inc.php) waar we het $_smarty object instantiëren en de verschillende folders (templates, compile, cache, config) linken.

Verder gebruiken we een nieuwe folder “smarty” waar alles samengebracht wordt.

Je kan de “nieuwe” basis structuur via deze link in een zipped file downloaden

meer informatie over de file en folder structuur vind je in de figuren hieronder.








  • Reacties(0)//www.webontwikkeling.info/#post26

SOLO LEARN

Boeken & CursussenGeplaatst door Micky 19 dec, 2016 19:59:27
Heb je wat vrije tijd hebt en weet je niet wat te doen dan kan je i.p.v. spelletjes te spelen ook wat javascript, HTML of een andere taal leren.

Klinkt het wat "belerend" ? Natuurlijk heb je geen echte vrije-tijd, en natuurlijk zijn spelletjes zo veel leuker dan leren, maar voor diegene die wel tijd heeft en geen "gamer" in heb ik een leuk voorstel.

SOLO learn biedt verschillende gratis apps (iOS en android) aan die je in staat stellen om moeiteloos enkele computertalen te leren of te herhalen.

Elke app bestaat uit een aantal hoofdstukken die op hun beurt uit eenaantal voorbeelden en oefeningen bestaan. Soms een beetje simpel en kort, maar steeds doenbaar.
Alle bij elkaar een leuke herhaling van wat we in de klas leren en nog wat extra's.

Via de App Store of andere manieren kan je de verschillende solo learn apps downloaden.
- SQL
- PHP
- JavaScript
- HTML
...

Leuk, kort en GRATIS

p.s. er bestaan ook normale wegversies van deze apps. https://www.sololearn.com







  • Reacties(0)//www.webontwikkeling.info/#post25

Het internet in 1973

AlgemeenGeplaatst door Micky 19 dec, 2016 18:22:04


onderstaand artikel verscheen op www.deredactie.be op maandag 19 december 2013
leuk om te lezen.



In Pittsburgh is een kaart uit 1973 opgedoken met daarop een schematische weergave van het volledige internet zoals het toen bestond.

42 zogenoemde computerhosts en 36 nodes of aangesloten apparaten: zo groot was het internet in mei 1973. Dat moet blijken uit een schematische kaart die David Newbury van het Carnegie Museum of Art recent tussen een hoop oude papieren van zijn vader heeft gevonden.

Die laatste werkte in de jaren 70 voor de Carnegie Mellon School of Computer Science in Pittsburgh op een moment dat het internet nog in zijn kinderschoenen stond. Op dat moment heette het nog het ARPANET en was het een louter Amerikaanse aangelegenheid.

Op de kaart is te zien hoe toen al enkele grote spelers als de universiteiten van Harvard, Stanford en Los Angeles op het ARPANET waren aangesloten. Via een satellietverbinding was ook Hawaii bij het project betrokken.

Een jaar later ging het ARPANET internationaal met satellietverbindingen met gebruikers in Noorwegen en Londen. Toch was het tot 1990 wachten vooraleer het internet zoals we het vandaag kennen uit de startblokken schoot. Dat gebeurde toen de Vlaming Robert Cailliau en de Brit Tim Berners-Lee een formeel voorstel tot de creatie van een "World Wide Web" bij het CERN in Zwitserland indienden.



  • Reacties(0)//www.webontwikkeling.info/#post24

e-mail cloacking

JavaScriptGeplaatst door Micky 09 dec, 2016 15:32:54

Wanneer je jouw e-mail-adres op een (niet beschermde) site plaatst ga je al heel snel een hele hoop spam mails krijgen.
Spam-robots hebben jouw e-mail opgepikt.

je kan dit op een eenvoudige manier verhelpen.
Op deze codepen vind je een oplossing

  • Reacties(1)//www.webontwikkeling.info/#post23

You Don't Know JS: ES6 & Beyond

Boeken & CursussenGeplaatst door Micky 01 dec, 2016 19:26:24
Op zoek naar een goed boek over ECMA SCRIPT 6 (ES6), dan is het boek "You Don't Know JS: ES6 and Beyond" van Kyle Simpson misschien wel een goed idee.
Niet echt voor beginners, maar wel een goed boek voor de ontwikkelaars die reeds wat JavaScript ervaring hebben en up-to-date willen blijven.



Inhoud

Titel : You Don' Know JS: ES6 and Beyond
Auteur: Kyle Simpson
ISBN: 978-1-4919-0424-4
ISBN 10: 1-4919-0424-0
Aantal blz: 278



  • Reacties(1)//www.webontwikkeling.info/#post22
Volgende »