Izdelava spletnih strani, optimizacija

Seznami znanih ranljivosti spletnih aplikacij

Dodano: Petek, 9. Maj 2008

Kdaj ste nazadnje preverili, ali imate nameščeno najnovejšo različico vašega CMSja, bloga, foruma,… ?

Se zavedate možnosti varnostnih pomanjkljivosti v spletni aplikaciji, ki jo uporabljate?

Velik delež uporabnikov zanemarja varnostni vidik upravljanja s spletnimi aplikacijami. Te aplikacije so se razvile do take meje, da uporabnik ne potrebuje znanja iz programiranja, pogosto mu niti ni treba obvladati HTML-ja, da lahko CMS sistem namesti in z njim upravlja.

Pogosto se torej zgodi, da uporabnik namesti aplikacijo in je nikoli ne posodobi na novejšo različico, niti ne namesti varnostnih popravkov (ker ponavadi tega niti ne zna). S takim početjem tvega, da bo kdo prek znanih varnostnih pomanjkljivosti poskušal vdreti v njegov sistem.

Varnostnim pomanjkljivostim smo lahko izpostavljeni tudi če imamo vedno nameščeno zadnjo različico aplikacije. Slabo spisani in nepreverjeni vtičniki, komponente in ostali gradniki CMS sistemov so pogosto tarča napadalcev.

Obstaja nekaj zelo dobrih spletnih strani, kjer si lahko ogledamo javno znane varnostne pomanjkljivosti. Pred nameščanjem prosto dostopnih dodatkov za spletne aplikacije lahko preverimo njihove varnostne pomanjkljivosti.

Povezave

Na tak način lahko preprosto preverimo varnostne pomanjkljivosti bloga Wordpress, ali pa varnostne pomanjkljivosti CMS sistema Joomla! .

Definiranje pisave v CSS

Dodano: Četrtek, 8. Maj 2008

Danes bi omenil par stvari glede definiranja pisave (fontov) v CSS predlogah.

Ločimo 5 družin pisav, ki jih lahko uporabimo v CSS:

  1. Serif (Times New Roman, Times, Georgia)
  2. Sans-Serif (Arial, Tahoma, Verdana, Helvetica, Geneva)
  3. Monospace (Courier New)
  4. Script (Corsiva)
  5. Fantasy (Comic Sans)

V oklepajih so primeri pisav, ki spadajo v posamezno družino.

Pisavo definiramo tako, da v CSS določimo lastnost font-family za posamezno značko.

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

Tukaj smo določili, da brskalnik za privzeto pisavo uporabi Verdana. Če pisave Verdana ni na voljo, bo uporabil Arial, sicer pa bo uporabil katerokoli pisavo iz družine Sans-serif. Taka definicija je potrebna zaradi raznolikosti brskalnikov, operacijskih sistemov in predvsem različnih tipov pisav, ki jih le-ti uporabljajo.

Definiranje pisav, ki imajo imena sestavljena iz več besed:

body {
 font-family: “Times New Roman”, Times, serif;
}

Pri pisavah, ki imajo ime sestavljeno iz več besed, moramo uporabiti narekovaje ” ” (glej primer zgoraj).

Katero pisavo torej uporabiti?

- za uporabo na zaslonu so priporočjive pisave iz družine Sans-Serif
- družino pisav Serif naj bi se uporabljalo za tiskanje
- Monospace pisave so pogosto uporabljane za prikaz izvorne kode in skript
- pisave iz družin Fantasy in Script so najredkeje uporabljane, največkrat le za estetske dodatke

Kompatibilnost

Uporabniki PC računalnikov pogosto pozabijo na pristaše MAC-ov (in obratno). Prilagam kratek seznam pisav, ki se uporabljajo na obeh sistemih. Imejte ga v mislih, kadar definirate pisave. Tabela je informativne narave, nekateri oblikovalci predlagajo drugačne zamenjave.

PC Font - Mac font (družina pisave)
Arial - Helvetica (Sans-Serif)
Georgia - Georgia (Serif)
Lucida Console - Monaco (Monospace)
Palatino Linotype - Book Antiqua (Script)
Tahoma - Geneva (Sans-Serif)
Times New Roman - Times (Serif)
Trebuchet MS - Helvetica (Sans-Serif)
Verdana - Geneva (Sans-Serif)

Vredno ogleda:
Typetester - pregled različnih pisav
Ampsoft - direktna primerjava PC in MAC pisav

UTF-8 preko .htaccess

Dodano: Sreda, 7. Maj 2008

Ena izmed prvih stvari, ki jih naredim pri postavitvi nove spletne strani, je določitev nabora znakov UTF-8 v .htaccess datoteki. S tem se izognem težavam pri uporabi diakritičnih znakov in obiskovalcu vsilim uporabo UTF-8, ne glede na nastavitve njegovega brskalnika.

Seveda pa vseeno določim nabor v datoteki, preko meta značke.

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

Težave (zopet) povzroča IE7. V kolikor ima obiskovalec nastavljeno “Encoding > auto select”, bo IE7 poskušal uganiti nabor znakov na spletni strani.

Problem pogosto leži v nastavitvah spletnega strežnika. Nekateri Apache strežniki so nastavljeni tako, da uporabniku pošljejo datoteko v naboru ISO-8859-1 (Latin-1). IE7 v nekaterih primerih privzame to vrednost, namesto vrednosti, ki je z meta podatkom določena v datoteki.

Rešitev:
Poleg definiranja UTF-8 v samem HTML dokumentu definiramo ta nabor tudi v .htaccess datoteki (oz. htaccess.txt na Windows platformi).

# Dodajte spodnji vrstici v .htaccess
AddCharset UTF-8 .html .htm .txt
AddDefaultCharset UTF-8

Za delovanje potrebujete pravice pisanja v .htaccess datoteko in nastavljen AllowOverride v Apache strežniku. Datoteko postavite v mapo, kjer se nahaja spletna stran, in v mapo, kjer se nahaja CMS.

UTF-8

Pametni pišejo (rišejo?) - topologija omrežja

Dodano: Torek, 6. Maj 2008

Predstavljajte si sledeč scenarij: sprejmete pozicijo skrbnika IT infrastrukture v podjetju, kjer so vse IT storitve upravljali zunanji izvajalci. Glede na to, da internega omrežja ne poznate, bi se želeli najprej razgledati po stavbi in ugotoviti stanje IT infrastrukture.

Pred časom sem se sam znašel v taki situaciji. Že takoj sem naletel na veliko težavo - nihče od zaposlenih ni vedel, kdo vse je do mojega prihoda upravljal z IKTjem. Dobil sem mapo z gesli in nekaj kontakti, ter navodila, naj vzpostavim omrežje na čimbolj funkcionalno raven in uredim vso “zmedo”.

V redu, si mislim, in grem pogledat v “serversko sobo”. Ojoj, groza! Žal nimam dejanske fotografije, da bi pokazal, v kakšnem stanju je bila TK omarica, je pa izgledalo zelo podobno tej fotografiji:

Zmešnjava

Še bolj nezadovoljen sem postal, ko sem opazil, da patch-bay sploh ni označen. Obstal sem pred 48 UTP vtikači, ki so vodili po celotni stavbi, meni neznano kam. Prav tako ni nikjer bilo moč dobiti dokumentacije o nameščanju mrežnih povezav. Klic zunanjega izvajalca je le še potrdil, da se nikoli ni nihče trudil s “papirologijo”.

Nič drugače ni bilo z računalniki - skoraj polovica gesel je bila neveljavnih, IP naslovi in omrežja so bila postavljena tako, kot so to naredili zunanji izvajalci, nikjer ni bilo popisa opreme, niti konfiguracij, kaj šele seznama licenc za programsko opremo.

Preden sem uredil celotno omrežje in vzpostavil osnoven nivo urejenosti omrežja je minilo vsaj 2 meseca. Pa je šlo le za okoli 80 računalnikov v 6 različnih podomrežjih. Seveda pa so tu bili še tiskalniški strežniki, AP, web kamere, zgoraj omenjena zmeda kablov, …

Kaj me je najbolj ujezilo?

Tako malo časa si je treba vzeti, da do takih stvari ne pride. Podjetja, ki se jim plača za vzpostavitev določenih storitev, bi lahko bila tako fer, da bi oni uredili vso dokumentacijo del in jo predali naročniku.

Rešitev je precej preprosta in praktično brezplačna. Obstajajo brezplačni programi, s katerimi lahko naredimo diagram omrežja. Glede na moje izkušnje priporočam uporabo brezplačnega programa DIA, s katerim lahko na enostaven način izrišemo celotno topologijo omrežja. Vse, kar je potrebno, je nekaj dobre volje in sprotno zapisovanje povezav, ki jih postavljamo.

Za primere, kako naj tak diagram zgleda, preglejte spletno stran Rate my network diagram.

Na omrežni diagram poleg poteka žičnih povezav, lokacije stikal in usmerjevalniko, lokacije vsakega računalnika napišimo tudi ime naprave (v kolikor ga ima) in IP naslov. V posebno preglednico pa vpišimo osnovno konfiguracijo računalnika, skrbniško geslo, datum nakupa, kontakt prodajalca in datum preteka garancijskega roka. Podobno naredimo za aktivno omrežno opremo. Dobro si je zapisati tudi načine administracije naprav (npr. vrata za oddaljen dostop do naprave ali računalnika).

Tak seznam shranimo nekam na varno, najbolje v sef, kamor ima dostop le pooblaščeno osebje. Naj bo tam shranjeno zaradi “nepredvidenih dogodkov”. Precej tvegano je, da konfiguracija in vzdrževanje celotnega omrežja sloni le na eni osebi, katera edina pozna dostopna gesla in arhitekturo omrežja. Poleg tega pa se tudi spodobi, da imamo urejen pregled nad stanjem IKT opreme v podjetju, če že zanjo skrbimo.

Prilagajanje spletne strani različnim brskalnikom

Dodano: Ponedeljek, 5. Maj 2008

Ena največjih težav, na katere naletimo pri ustvarjanju predloge (template-a) je nedvomno zagotavljanje enotnega izgleda spletne strani v različnih brskalnikih. Pri pisanju CSSja se je ddobro držati nekaterih preprostih načel, ki zagotavljajo enak izgled spletne strani v različnih brskalnikih:

1. Sprotno preverjanje izgleda strani v različnih brskalnikih

je skoraj nujno, v kolikor želimo imeti čimmanj težav z “razhroščevanjem” strani. Tako bomo sproti videli, kateri elementi v predlogi povzročajo težave. Izberimo čimbolj razširjene brskalnike: IE6, IE7 (IE8?), Mozilla Firefox, Safari, Opera.

Srečali se bomo s težavo, kako imeti na računalniku hkrati nameščen IE7 in IE6. Microsoft je na srečo ponudil prednaložene zrcalne slike za uporabo v aplikaciji Virtual PC, ki vsebujejo različne verzije operacijskih sistemov in brskalnika Internet Explorer. Prenos je brezplačen in povsem legalen.

Ostale brskalnike si lahko prosto naložite prek spleta.

V kolikor nočete nalagati brskalnikov in VPCja na računalnik, se lahko poslužite spletne storitve, ki naredi zaslonske slike vaše spletne strani v različnih brskalnikih.

2. Margin in padding

sta lastnosti elementov, ki nam bosta povzročili veliko sivih las. Zavedati se moramo, kako se ti dve lastnosti prikazujeta v različnih brskalnikih. Načeloma naj se nebi uporabljalo lastnosti margin in padding na elementih, ki imajo definirano fiksno širino, ker Internet Explorer drugače razume širino elementov s tema lastnostima, kot to zahteva W3C standard.

Nekateri razvijalci predlagajo uporabo “CSS reset” predloge. To metodo bom preizkusil na katerem od naslednjih projektov, zato je ne morem kaj dosti komentirati. Izgleda uporabna.

3. Preverjanje postavitve DIV plasti in razmejitve med njimi

Pred začetkom postavitve vsebine in oblikovanja le-te, je dobro preveriti, kako se obnašajo DIV plasti, s katerimi pozicioniramo vsebino. V pomoč nam bo uporaba lastnosti border in background-color, saj z njima točno vidimo, kako brskalnik postavi DIV plast. Ta metoda je tudi uporabna za razhroščevanje, ko nam plasti “pobegnejo”, ali se prekrivajo.

4. Uporabite (pravilen) DOCTYPE

Veliko izvedbenih oblikovalcev/razvijalcev spletnih strani pozablja na DOCTYPE. V kolikor to značko izpustite, se zna zgoditi, da bo brskalnik šel v t.i. “quirks mode” in stran izrisal po zastarelih standardih. Ta problem je še posebej viden v IE6, k zahteva značko DOCTYPE takoj na začetku (X)HTML dokumenta.

To bi bilo nekaj osnovnih korakov na poti k spletni strani, ki deluje v vseh brskalnikih.

PS: za tiste, ki boste šli pregledovat izvorno kodo mojega bloga, naj že takoj pojasnim, da je kovačeva kobila spet bosa. Ampak ne bo za dolgo, ker je nov template že skoraj končan.

« NazajNaprej »