Auto-Slideshow via jQuery

Heute stelle ich eine kleine JavaScript-Funktion vor. Das Script ist jedoch nicht für den produktiveren Einsatz bereit, da die 3D-CSS-Transformation via “transform-style: preserve-3d;” zwar schick aussieht, jedoch noch keine Unterstützung bei allen Browser hat (wie immer ist der IE die Ausnahme).

 

Demo

 

Das ursprüngliche Script “TILTED CONTENT SLIDESHOW” (Lizenz: MIT | von “Mary Lou“) habe ich hier her. Daraufhin habe ich folgendes ergänzt und das CSS via SASS / Autoprefixer überarbeitet. An dieser Stelle gehe ich jedoch nicht weiter auf das CSS (+ Toolchain) ein, sondern zeige / erkläre die erstellte JavaScript-Funktionalität.

 

  //
  // Im Gegensatz zu anderen Programmiersprachen besitzt JavaScript keine richtigen Klassen, 
  // dafür Objekt-Prototypen und jede Funktion kann als Objekt genutzt werden. 
  //
  // Links:
  // OOP mit JavaScript - Objektliterale: http://www.peterkropff.de/site/javascript/objektliterale.htm
  // Wiedereinführung in JavaScript: https://developer.mozilla.org/de/docs/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript
  // 
  TiltSlider.prototype._autoSlider = function () {

    //
    // Variablen sind in JavaScript meistens global verfügbar, 
    // außer man schreibt "var" vor die Variabel (in einer Funktion) 
    //
    // Links:
    // Variablen-Test: http://jsfiddle.net/voku/mZnh6/1/    
    // JavaScript - Grundlagen - Variablen: http://www.peterkropff.de/site/javascript/variablen.htm
    //
    var wait = 2000;
    var counter = 0;
    //
    // jQuery - Selektoren fungieren meistens wie CSS-Selektoren
    //
    // Links:
    // Crashkurs: jQuery-Selektoren: http://suckup.de/howto/jquery/crashkurs-jquery-selektoren/
    //
    var slideshowNavSpanSelector = $("#slideshow nav span");
    // 
    // Größe vom Array 
    //
    // Links:
    // JS-Array: http://www.w3schools.com/jsref/jsref_obj_array.asp
    //
    var slideshowNavSpanSelectorLength = slideshowNavSpanSelector.length;

    // 
    // Funktion mit Übergabeparameter
    //
    function sliderCheck(counter_tmp) {
      if ($(".navcount" + counter_tmp).hasClass('current')) {
        return true;
      } else {
        return false;
      }
    }
    
    // 
    // Funktion welche die globale "counter"-Variable nutzt
    //
    function autoSlider() {
      if (sliderCheck(counter) === false) {
        $('.navcount' + counter).click();
      }

      if (counter === slideshowNavSpanSelectorLength) {
        counter = 0;
      } else {
        counter++;
      }
    }

    // 
    // Intervall für die "autoSlider"-Funktion
    //
    // Link:
    // http://www.w3schools.com/jsref/met_win_setinterval.asp
    // 
    var timer = setInterval(autoSlider, wait);

    // 
    // Für alle zuvor selektieren "span"-Elemente, wird hier das "MouseEnter"- & "MouseLeave"-Event 
    // von jQuery registriert. Das Event wird im Gegensatz zu "MouseOver" nur ausgelöst, 
    // wenn man in das Element hinein bzw. hinausgeht.
    //
    // Link:
    // https://api.jquery.com/mouseenter/
    //
    slideshowNavSpanSelector.each(function(index) {
      $(this).mouseenter(function() {
        // 
        // Stoppt das zur definierte Intervall
        //
        // Link:
        // http://www.w3schools.com/jsref/met_win_clearinterval.asp
        // 
        clearInterval(timer);

        if (sliderCheck(index) === false) {
          $('.navcount' + index).click();
        }

      }).mouseleave(function () {

        // set counter
        counter = index;

        // ... Intervall wieder starten ...
        timer = setInterval(autoSlider, wait);
      });
    });

  };

 

“CSS -Gradient” + “Background-Image” = Problem in Chrome

Falls jemand in der aktuellen Version von Chrome (v32) auch folgenden Fehler hat, kommt hier die Lösung …

 

Problem:

background: url('../images/sprites.png') right -204px no-repeat, linear-gradient(to bottom,#d3d3d3 0%,#ffffff 100%);

 


See the Pen HcjCo by Lars Moelleken (@voku) on CodePen.
1

 

fixed:

background-image: url('../images/sprites.png'), linear-gradient(to bottom, #ffffff 0%,#d3d3d3 100%); 
background-repeat: no-repeat;
background-position: right -204px, 0 0;

 


See the Pen gDGFl by Lars Moelleken (@voku) on CodePen.
1

 

nginx + google-pagespeed

ngx_pagespeed

Google hat “pagespeed” für nginx veröffentliche, die nginx Äquivalent vom “mod_pagespeed” für Apache. Dieses Modul kann die Performance von Webseiten optimieren, indem z.B. die zugehörigen Assets (CSS, JavaScript, Bilder) verkleiner bzw. kombiniert werden, um die Ladezeiten zu reduzieren. Dieses Tutorial erklärt wie nginx + pagespeed auf Debian kompiliert/installiert werden kann.

 

Bevor wie starten können müssen wir ggf. einige Pakete nachinstallieren und “deb-src” in der “/etc/apt/sources.list” einfügen / auskommentieren.

apt-get update
apt-get install dpkg-dev build-essential zlib1g-dev libpcre3 libpcre3-dev
cd /usr/src/
apt-get source nginx
apt-get build-dep nginx
cd nginx-*/debian/modules/
git clone https://github.com/pagespeed/ngx_pagespeed.git
cd ngx_pagespeed
wget https://dl.google.com/dl/page-speed/psol/1.7.30.1.tar.gz
tar -xzvf 1.7.30.1.tar.gz
cd /usr/src/nginx-*/
vim debian/rules

# und folgende Zeile in der config (config.status.full: config.env.full config.sub config.guess) hinzufügen …

--add-module=$(MODULESDIR)/ngx_pagespeed \

# anschließend können wir uns ein neues “*.dep”-Paket bauen

dpkg-buildpackage -b
dpkg --install ../nginx-full*.dep

# … check …

nginx -V

z.B.:

root@h1687374> nginx -V
nginx version: nginx/1.5.10
TLS SNI support enabled
configure arguments: –prefix=/etc/nginx –conf-path=/etc/nginx/nginx.conf –error-log-path=/var/log/nginx/error.log –http-client-body-temp-path=/var/lib/nginx/body –http-fastcgi-temp-path=/var/lib/nginx/fastcgi –http-log-path=/var/log/nginx/access.log –http-proxy-temp-path=/var/lib/nginx/proxy –http-scgi-temp-path=/var/lib/nginx/scgi –http-uwsgi-temp-path=/var/lib/nginx/uwsgi –lock-path=/var/lock/nginx.lock –pid-path=/var/run/nginx.pid –with-pcre-jit –with-debug –with-http_addition_module –with-http_auth_request_module –with-http_dav_module –with-http_geoip_module –with-http_gzip_static_module –with-http_image_filter_module –with-http_realip_module –with-http_stub_status_module –with-http_ssl_module –with-http_sub_module –with-http_xslt_module –with-http_spdy_module –with-ipv6 –with-mail –with-mail_ssl_module –with-openssl=/usr/src/nginx-1.5.10/debian/openssl-1.0.1f –add-module=/usr/src/nginx-1.5.10/debian/modules/nginx-auth-pam –add-module=/usr/src/nginx-1.5.10/debian/modules/nginx-echo –add-module=/usr/src/nginx-1.5.10/debian/modules/nginx-upstream-fair –add-module=/usr/src/nginx-1.5.10/debian/modules/nginx-dav-ext-module –add-module=/usr/src/nginx-1.5.10/debian/modules/nginx-cache-purge –add-module=/usr/src/nginx-1.5.10/debian/modules/ngx_pagespeed

vim /etc/nginx/nginx.conf

# … und folgende Zeilen über den vHosts einfügen …

pagespeed on;
pagespeed FileCachePath /var/ngx_pagespeed_cache;
mkdir /var/ngx_pagespeed_cache
chown -R www-data:www-data /var/ngx_pagespeed_cache
/etc/init.d/nginx restart
curl -I -p http://localhost | grep X-Page-Speed
apt-get install memcached

# aktiviere memcache  

vim /etc/default/memcached
/etc/init.d/memcached restart

# optional: Fehleranalyse

tail -f /var/log/nginx/error.log  

 

Beispiel-Seite:

http://moelleken.org

 

Beispiel-Konfig:

https://github.com/voku/CONFIG–nginx—php-fpm—mysql

 

Download: (alternativ kann man auch meine bereis kompilierte Version testen)

http://suckup.de/downloads/nginx-full_1.5.10_i386.deb

http://suckup.de/downloads/nginx-common_1.5.10_all.deb

http://suckup.de/downloads/nginx-1.5.10_all.deb

 

Links:

Google-Pagespeed-Doku: https://developers.google.com/speed/pagespeed/module/config_filters

Google_Pagespeed-HowTo: https://developers.google.com/speed/pagespeed/module/build_ngx_pagespeed_from_source

Filter-Übersicht: http://ngxpagespeed.com/ngx_pagespeed_example/

php – die nächsten Mittwoche berechnen

“Mittwoche” klingt irgendwie falsch … ;)

for ($i = 0; $i < = 4; $i++) {
	if ($i == 0) {
		$next_wednesday[$i] = date("Y-m-d", strtotime("next Wednesday"));
	}
	else {
		$next_wednesday[$i] = date("Y-m-d", strtotime("next Wednesday", strtotime($next_wednesday[($i-1)])));
	}
}

// DEBUG
print_r($next_wednesday);

php – Regular Expression Schnipsel – Escaping “/”

Hier ein kleines Beispiel wie man die Lesbarkeit von RegEx durch den Delimiter  “#” verbessern kann … ;)

$zeichenkette = "suckup.de Informationen / test, lall / Linux / lall123";
#$suchmuster = "/^[^\/]*\/[^\/]*\/[^\/]*\/[^\/]/";
$suchmuster = "#^[^/]*/[^/]*/[^/]*/[^/]#";
preg_match($suchmuster, $zeichenkette, $treffer);
print_r($treffer);

 

Ausgabe:

Array ( [0] => suckup.de Informationen / test, lall / Linux / )

UTF-8 Byte Order Mark (BOM) in php-Dateien …

for Linux (shell):

 

BOM aus allen PHP-Dateien entfernen:

find . -type f -iname "*.php" -exec sed -i '1s/^\xEF\xBB\xBF//' {} \;

 

PHP-Dateien mit BOM anzeigen:

find . -type f -iname "*.php" -exec grep -l $'\xEF\xBB\xBF' {} \;

 

mehr Infos:

sed – suckup.de/linux/streameditor-sed

find – suckup.de/linux/find-linux

Byte Order Mark – http://de.wikipedia.org/wiki/Byte_Order_Mark

php – Regular Expression Schnipsel – Links aus -Tags

Habe zu dem Thema (“Reguläre Ausdrücke”) bereits ausführlicher geschrieben -> http://suckup.de/howto/php-howto/php-sicherheit-erhoehen-teil-2/ <- daher folgt hier einfach ein Beispiel, welches man sicherlich noch optimieren kann … :)

<?php
$lall =' lall lall123
<a style="gfsedfd;" href="http://test1.de">test
<a style="gfsedfd;" href="test2.php" target="_blank>test</a> dsadsa
<a style="gfsedfd;" href="http://test3.de" target="_blank>test</a>
dsads
';

$lall = str_ireplace("\r", '', $lall);
$lall = str_ireplace("\n", '', $lall);
$lall = str_ireplace("\t", '', $lall);
preg_match_all('/<a [^>].*href="(.*)".*>/i', $lall, $lall_new);
$allLinks = explode("</a>", $lall_new[0][0]);
foreach ($allLinks as $key => $val) {
  $val = trim($val);
  if ($val != '') {
    $data =preg_replace('/.*<a [^>].*href\s*=\s*(["\'])(.*?)\1.*>.*/i',"$2",$val);
    echo $data . "\n";
  }
}
?>
php testtest.php

http://test1.de
test2.php
http://test3.de

PHP-Sicherheit erhöhen – Teil 2

Kein Programm ist 100% sicher, aber wir wollen es potenziellen Angreifern auch nicht zu leicht machen, daher folgen ein paar Grundlegende Regeln zur Sicherheit von PHP. Ich gehe hier davon aus, dass die installierte PHP-Version auf dem aktuellen Stand ist und somit weniger Angriffsfläche bietet. -> PHP-Sicherheit erhöhen – Teil 1

1.) “register_globals” sollten deaktiviert sein!!!

Falls diese Option aktiv ist, ist das Überschreiben lokaler Variablen via GET / POST möglich z.B.:

test.php:
———

<?php 
if (!isset($test))
{
  $test = 1;
}
echo 'Der Wert von test ist: '.$test;
?>

Browser:
——–
…/test.php?test=2

Ab PHP 4.2 ist diese Option (php.ini -> register_globals = Off) jedoch bereits standardmäßig auf “Off” gesetzt.

 

2.) “Type Casting” verwenden

Casting bedeutet so viel wie Umwandeln einer Variable in einen bestimmten Type z.B. wird aus “123z” -> “123” wenn wir dies zu einer Ganzzahl (int) casten. z.B.

test.php:
———

<?php 
$zahl = (int)$_GET['zahl'];
?>

Browser:
——–
…/test.php?zahl=123z

php.net:
——–
Type Casting -> http://de2.php.net/manual/de/language.types.type-juggling.php

 

3.) Variablen prüfen

Allgemein kann man prüfen, ob die Variablen überhaupt vorhanden/gesetzt sind.

test.php:
———

<?php 
if (empty($_GET['zahl']) { [...]
if (!isset(($_GET['zahl']) { [...]
if (!$_GET['zahl']) { [...] // Warnung ("Notice") falls "error_reporting(E_ALL)" und die Variable nicht definiert wurde

php.net:
——–
empty() -> http://php.net/manual/de/function.empty.php
isset() -> http://php.net/manual/de/function.isset.php

 

4.) Variablen “Type” prüfen

test.php:
———

<?php 
if (gettype($_GET['zahl']) == "integer") { $zahl = $_GET['zahl']; }
else { $zahl = (int) $_GET['zahl']; }
?>

Alternative: if (is_int($_GET[‘zahl’])) { […]

 

5.) “Ctype” Funktionen

Es gibt noch weitere php-Module z.B. “ctype” mit denen sich Variablen überprüfen lassen, ich will jedoch als nächstes einen allgemein gültigen Ansatz via “regulären Ausdrücken” zeigen.

php.net:
——–
http://de2.php.net/manual/de/ref.ctype.php
    
    

6.) Variablen prüfen / zuschneiden via “regulären Ausdrücke”

Reguläre Ausdrücke sind Muster, mit denen Zeichenketten beschrieben werden könnten!

Wer die Syntax noch nicht im Kopf hat sollte sich einmal “The Regex Coach” anschauen -> http://weitz.de/regex-coach/

The Regex Coach
The Regex Coach

 

Zusammenfassung:
—————-

[abc] -> a oder b oder c
[^abc] -> nicht a oder b oder c
[a-z] -> von a bis z -> alle Kleinbuchstaben
[A-Z] -> von A bis Z -> alle Großbuchstaben
[a-zA-Z] -> Buchstaben

[0-9] -> von 0 bis 9 -> Ziffern
\d -> von 0 bis 9 -> Ziffern
\D -> keine Ziffer

[a-zA-Z0-9_] -> Buchstaben, Ziffern, Unterstrich
\w -> Buchstaben, Ziffern, Unterstrich
\W -> keine Buchstaben, Ziffern, Unterstrich

[\r\n\t\f]] -> Wagenrücklauf, New Line, Tabulatur, Seitenwechsel -> Leerzeichen
\s -> Leerzeichen
\S -> keine Leerzeichen

\b -> Wortanfang bzw. Wortende z.B. “/\bWort\b/”
\B -> kein Wortanfang bzw. Wortende z.B. “/\BWort\B/”

. -> ein beliebiges Zeichen (Punkt)

x{m} -> “x” muss genau “m”-Mal vorkommen
x{m,} -> “x” muss min. “m”-Mal vorkommen (Ende offen)
x{,n} -> “x” darf max. “n”-Mal vorkommen (Anfang offen)
x{m,n} -> “x” muss zwischen “m”- und “n”-Mal vorkommen
x? -> “x” kann, muss aber nicht an dieser Stelle vorkommen => x{0,1}
x* -> “x” kann kein, ein oder mehrmals an dieser Stelle vorkommen => x{0,}
x+ -> “x” kann ein oder mehrmals an dieser Stelle vorkommen => x{1,}

^ -> markiert den Beginn einer Zeichenkette
$ -> markiert das Ende einer Zeichenkette

| -> Alternative z.B. “/ae|a/”

\ -> Maskierung (Escape-Zeichen) für z.B. einen Punkt “\.”

[] -> Zusammenfassung von Mustern

() -> Zusammenfassung von Mustern + selektieren und an PHP zurückgeben

 
6.1) ein Beispiel

test.php:
———

<?php 
if((!empty($_GET['Text'])) && (preg_match("/^(T|t)est(ing*){0,1}$/",$_GET['Text'])))
{
    $variable = "OK";
} else {
    $variable = "nicht OK";
}
echo 'Der Wert ist '.$variable;
?>

Browser:
——–
…/test.php?Text=Test -> OK -> (T|t)est
…/test.php?Text=test -> OK -> test(ing){0,1} = test(ing)?
…/test.php?Text=testing -> OK -> test(ing){0,1} = test(ing)?
…/test.php?testinggggg -> OK -> g*

 

6.2) noch ein Beispiel

Hier sind nur Zahlen zugelassen …

test.php:
———

<?php 
if((!empty($_GET['Text'])) && (preg_match("/^\d+([\.,]\d+)?$/",$_GET['Text'])))
{
    $variable = "OK";
} else {
    $variable = "nicht OK";
}
echo 'Der Wert ist '.$variable;
?>

Info:
—–
/^\d+([\.,]\d+)?$/ -> ist gleich -> /^[0-9]{1,}([\.,][0-9]{1,})?$/

Browser:
——–
…/test.php?Text=1 -> OK -> [0-9]{1,}
…/test.php?Text=123456789 -> OK -> [0-9]{1,}
…/test.php?Text=1.9 -> OK -> [0-9][\.,][0-9]
…/test.php?Text=123.789 -> OK -> [0-9]{1,}[\.,][0-9]{1,}
…/test.php?Text=123,789 -> OK -> [0-9]{1,}[\.,][0-9]{1,}

 

6.3) und noch ein Beispiel

Hier schneiden wir einen Teil aus einen String aus und geben diesen aus …

test.php:
———

<?php 
$imagemap = "<map id=\"imgmap201111415460\" name=\"imgmap201111415460\"><area shape=\"rect\" alt=\"\" title=\"\" coords=\"151,58,221,148\" href=\"\" target=\"\" /></map>";

$imagemap_name = preg_replace(‘/^<map(.+)name=\”(.+)\”><area(.+)/i’, “$2”, $imagemap);

echo ‘Imagemap-Name: ‘.$imagemap_name;
?>

Ausgabe => Imagemap-Name: imgmap201111415460

Info:
—–
(.+) -> ist gleich -> (.{1,})

 

php.net:
——–
http://de3.php.net/manual/de/function.preg-replace.php

 

7.) Maskieren von Strings zur Nutzung in Datenbanken

Sobald Daten in einer Datenbank gespeichert werden, sollte man diese via “mysql_real_escape_string” bzw. “mysqli_real_escape_string” maskieren, so dass “SQL Injection Angriffe” verhindert werden.

 

php.net:
——–
http://php.net/manual/de/function.mysql-real-escape-string.php

 

8.) Ein-Weg-Verschlüsselung

Bei der Ein-Weg-Verschlüsselung wird nicht die original Eingabe, sondern ein Hash-Wert davon gespeichert z.B. md5

test.php:
———

<?php $passwort = 'mein_Pwd';
echo md5($passwort); ?>

Ausgabe: b4e28e9d7dbf6d41d6e609b3eb46fac4

Das Problem ist jedoch, dass man diese Verschlüsselung via “Brute-Force-Attacke” erraten bzw. in einer “bösen”-Datenbank ;) mit vielen Kombinationen aus md5-hash und original-Wert auslesen kann.
Daher kann man z.B. auch sha1() anstelle von md5() nutzen, was zwar den Zeitaufwand bei “Brute-Force-Attacke” erhöht, jedoch nicht die Schwachstellen der Ein-Weg-Verschlüsselung behebt.

 

php.net:
——–
http://de.php.net/manual/de/function.md5.php
http://de.php.net/manual/de/function.sha1.php

 

9.) Zwei-Wege-Verschlüsselung

Bei der Zwei-Wege-Verschlüsselung werden Daten über einen Schlüssel verschlüsselt, so dass diese auch wieder entschlüsselt werden können.

test.php:
———

<?php 
function encryptData($value){
$key = "top secret key";
$text = $value;
$iv_size = mcrypt_get_iv_size(MCRYPT_BLOWFISH, MCRYPT_MODE_ECB);
$iv = mcrypt_create_iv($iv_size, MCRYPT_RAND);
$crypttext = mcrypt_encrypt(MCRYPT_BLOWFISH, $key, $text, MCRYPT_MODE_ECB, $iv);
return $crypttext;
}

function decryptData($value){
$key = “top secret key”;
$crypttext = $value;
$iv_size = mcrypt_get_iv_size(MCRYPT_BLOWFISH, MCRYPT_MODE_ECB);
$iv = mcrypt_create_iv($iv_size, MCRYPT_RAND);
$decrypttext = mcrypt_decrypt(MCRYPT_BLOWFISH, $key, $crypttext, MCRYPT_MODE_ECB, $iv);
return trim($decrypttext);
}

$test = encryptData(“Dies ist ein TEST!!!”);

echo $test;
echo “<br><br>”;
echo decryptData($test);
?>

 

Algorithmus:
————
-> MCRYPT_BLOWFISH (blowfish)
-> MCRYPT_TRIPLEDES (tripledes)
-> MCRYPT_RJINDAEL_256 (rjindael-256)
-> MCRYPT_CAST_256 (cast-256)

 

Modus:
——
-> MCRYPT_MODE_ECB (electronic codebook): für kurze Zeichenketten
-> MCRYPT_MODE_CBC (cipher block chaining): zur Dateiverschlüsselung
-> MCRYPT_MODE_CFB (cipher feedback): für Byteströme, mit Verschlüsselung einzelner Bytes
-> […]

 

php.net:
——–
http://php.net/manual/de/function.mcrypt-encrypt.php

 

Unter MySQL ist die “Zwei-Wege-Verschlüsselung” einfacher zu handhaben, es gibt nur zwei Alternativen

– AES (Advanced Encryption Standard)
– DES: TripleDES

z.B.:
AES_DECRYPT(verschluesselt,schluessel)
AES_ENCRYPT(text,schluessel)

 

dev.mysql.com:
————–
http://dev.mysql.com/doc/refman/5.5/en/encryption-functions.html

 

10.) SSL (Secure Socket Layer)

Da das HTTP-Protokoll Daten plain (unverschlüsselt) überträgt, ist eine SSL- bzw. HTTPS-Verschlüsselung immer dann sinnvoll, wenn sensible Daten übertragen werden. So können die Daten beim Transport über das Internet nicht von dritten mitgelesen (Sniffing) werden.

 

11.) Cross-Site-Scripting (XSS)

Es geht darum Code auszuführen, der von einer fremden Webseite, in die aktuelle Webseite eingeschleust wird. Es ist ein Oberbrgriff für unterschiedliche Arten (serverseitiges & clientseitiges Cross-Site-Scripting) von Angriffen.

 

wikipedia.org:
————–
http://de.wikipedia.org/wiki/Cross-Site-Scripting

 

11.1) Serverseitiges Cross-Site-Scripting

Hier wird der “böse” Code direkt auf dem Server der angegriffenen Webseite ausgeführt (z.B.: von PHP) …

… es folgt ein sehr schwerwiegender Programmierfehler, eine include & GET kombination, um serverseitiges XSS zu demonstrieren.

 

test.php:
———

<?php 
inculde($_GET['skript'];
// etc.
...
?>

Info: Clientseitiges Cross-Site-Scripting -> Hier wird der “böse” Code via Browser-Technologien (z.B. via JavaScript, ActiveX …) eingeschleust.

 

11.2) SQL Injection

 

wikipedia.org:
————–
http://de.wikipedia.org/wiki/SQL-Injection

 

Auch dies ist eine Art des serverseitiges Cross-Site-Scriptings und das Ziel des Angreifers ist die Datenbank.

 

test.php:
———

<?php 
[...]
$sql = "SELECT * FROM tabelle WHERE id=" . $id;
[...]
?>

Wenn die Variable die nun per GET, POST oder Cookie überschrieben werden kann, wird eine neue SQL-Query an die Datenbank gesendet. Dabei wird die Tatsache ausgenutzt, dass man mehrere SQL-Befehle mit
Simikolon getrennt, ausführen kann.

Gegenmaßnahmen:

-> Anführungsstriche verwenden

Anführungsstriche werden dazu verwendet um Variablen in SQL-Queries zu benutzen.

 

test.php:
———

[...] SELECT * FROM xyz WHERE id = '$Test' [...]

 

Ein Angreifer, der $Test verändert kann nicht aus den Anführungsstrichen ausbrechen, sloange $Test geparst wurde und alle ‘ mit \’ maskiert sind.
Es gibt jedoch noch weitere Möglichkeiten um sich vor solchen Angriffen zu schützen.

 

-> Keine Strings in numerischen Variablen zulassen

Die Funktion settype wandelt Variablen (var) in einen Integer (int) um:

 

test.php:
———

[...]
settype($Variable, 'integer');
[...]

 

php.net:
——–
settype -> http://www.php.net/manual/de/function.settype.php

 

-> Datenbankverbindungen mit eingeschränkten Rechten

Gehe sparsam mit der Rechtevergabe an die Web (User) um, so dass im Notfall nicht die komplette Datenbank (DROP DATABASE name) betroffen ist. ;)

 

-> Werte maskieren

Mit der Funktion mysql(i)_real_escape_string bietet PHP eine einfache Möglichkeit SQL-Befehle zu maskieren.

Hinweis: Neben dem Semikolon ist auch ein doppelter Bindestrich (Kommentar in MySQL) dazu geeignet SQL-Kommandos nach dem eingeschleusten Code abzubrechen.

 

Zusammenfassung: Wenn man generell Anführungszeichen in den SQL-Kommandos benutzt und Variablen immer maskiert, würde dies zirka wie folgt aussehen…

 

test.php:
———

[...] 
if (!isset($_GET['id'])) { $id = 0; }
else { $id = $_GET['id']; }

if (gettype($id) == “integer”) { $zahl = $id; }
else { $zahl = settype($id, ‘integer’); }

$sql = “SELECT * FROM tabelle
WHERE id='” . mysqli_real_escape_string($zahl) . “‘
AND user=’test’
“;
[…]

Rewrite-Rules: Apache vs Nginx

Bei dem Apache Webserver wird das URL-Handling (Rewrite-Rules) via .htaccess gesteuert, sobald sich eine Datei mit diesem Namen in einem Verzeichnis befindet, werden die darin enthaltenen Befehle vom Apache umgesetzt. Da dieses Verfahren jedoch voraussetzt, dass alle Verzeichnisse zuvor auf eine solche Datei geprüft, diese anschließend eingelesen und verarbeitet werden muss, macht es Sinn wie z.B. beim Nginx Webserver diese in die Konfiguration des Webs aufzunehmen. Leider ist die Syntax und Logik dieser beiden Rewrite-Rules nicht kompatibel, daher folgt eine Einführung in dieses Thema … außerdem habe ich auf github.com/voku/ meine kompletten Konfigurationsdaten für Nginx + PHP + MySQL hochgeladen.

 

Erklärung: einfache Weiterleitung

 

Apa­che:

Redirect /altes_Verzeichnis/alte_Seite.html http://suckup.de/

 

Nginx: 

rewrite /altes_Verzeichnis/alte_Seite.html http://suckup.de/ last;

 

Falls “/altes_Verzeichnis/alte_Seite.html” hinter deiner Domain in der URL steht, wird die Anfrage auf die Domain “meine_domain.de” umgeleitet.

z.B. http://suckup.de/altes_Verzeichnis/alte_Seite.html

 

Erklärung: Domain Weiterleitung

 

Apa­che:

RewriteCond %{HTTP_HOST} ^voku-online.de$ [NC]
RewriteRule ^(.*)$ http://www.suckup.de/$1 [R=301,L]

 

%{HTTP_HOST} -> Hostname

 

Nginx: 

if ($host ~* voku-online.de) {
rewrite ^(.*)$ http://suckup.de$1 permanent;
}

 

Fall der Hostname “voku-online.de” ist, dann wird dieser zu “suckup.de” umgeschrieben und alles was hinter der ursprünglichen Hostnamen stand, wird hinter den neuen gesetzt. 

^ -> Anfang 

.* -> “.” ein beliebiges Zeichen, “*” Wiederholung => alle beliebigen Zeichen

( ) -> erstes Vorkommen der einfachen Klammern wird zur ersten Variable $1 … u.s.w.

$ -> Ende

z.B. http://voku-online.de/altes_Verzeichnis/alte_Seite.html

 

Erklärung: entferne doppelte “/”

 

Apa­che:

RewriteCond %{REQUEST_URI} ^(.*)//(.*)$
RewriteRule . %1/%2 [R=301,L]

 

 %{REQUEST_URI} -> URL ohne Parameter

 ( ) -> erstes Vorkommen der einfachen Klammern in der “RewriteCond”-Bedingung wird zur ersten Variable %1 … u.s.w.

 

Nginx: 
if ($request_uri ~* “\/\/”) {
rewrite ^(.*)$ $scheme://$host$1 permanent;
}

 

\/ -> Escapezeichen “\” vor “/”

$scheme -> http bzw. https

$host -> Hostname

permanent -> gibt den Statuscode 301 zurück

 

Erklärung: statische Dateien (.css/.js/.html) beschleunigen

 

Nginx:

## static files are served directly
location ~* \.(?:js|css|htm?|js\?ver.*|css\?ver.*)$ {
        set $betterForCache  0;

        if ($args ~* ver=(.*)$) {
                set $betterForCache  1;
        }
        if ($request_uri ~* “/wp-admin”) {
                set $betterForCache  0;
        }
        if ($betterForCache = 1) {
                rewrite ^(.*) $scheme://$host$uri? last;
        }

        gzip_static on;

        autoindex off;
        expires 1d;
        add_header Pragma public;
        # We bypass all delays in the post-check and pre-check parameters of Cache-Control. Both set to 0.
        add_header Pragma public;
        add_header Cache-Control “public, must-revalidate, proxy-revalidate, post-check=0, pre-check=0”;
        ## No need to bleed constant updates. Send the all shebang in one
        ## fell swoop.
        tcp_nodelay off;
        ## Set the OS file cache.
        open_file_cache max=3000 inactive=120s;
        open_file_cache_valid 45s;
        open_file_cache_min_uses 2;
        open_file_cache_errors off;
        break;
}

Verschachtelte if-Abfragen kann man einfach via Hilfsvariablen (z.B. $betterForCache) erstellen …

$uri -> URL ohne Parameter

z.B.: http://suckup.de/wp-content/themes/mystique/css/core.css?ver=3.3.2

 

weitere Infos:

– Nginx & HttpRewriteModule:  http://wiki.nginx.org/HttpRewriteModule

– Apache & mod_rewrite: http://httpd.apache.org/docs/current/mod/mod_rewrite.html

– Beispiel-Konfiguration (WordPress Multi: Nginx + PHP-FPM): https://github.com/voku/CONFIG–nginx—php-fpm—mysql

Scrollen via jQuery

Hier ein kurzes Beispiel, wie man via jQuery die Position eines Elements herausfindet und automatisch an diese Stelle scrollen kann. Wer sich noch nicht so gut mit jQuery- / CSS-Selektoren auskennt, sollte sich einmal folgenden Beitrag durchlesen. -> http://suckup.de/howto/jquery/crashkurs-jquery-selektoren/

 

.scrollTop() -> gibt die Scrollbar Position eines bestimmten Elements zurück 

.scroll() -> wird ausgeführt, wenn gescrollt wird (event handler)

.animate() -> erzeugt animations Effekte via numerischer CSS-Einstellungen

.offset() -> gibt die Koordinaten (x,y) eines Elements zurück 

.height() -> gibt die Höhe eines Elements zurück

 

Beispiel: jQuery_scroll.html

 

onClick=”$(‘#box’).show(); $(‘html,body’).stop(true,true); var target = $(‘#box’); var bottom = target.offset().top+target.height()-250; $(‘html,body’).animate({scrollTop: bottom}, 500); return false;”

 

-> bei “Klick” [onClick] 

    -> zeige das Element mit der ID “box” [#box] an

        -> halte alle Animationen an [stop(true,true)]

          -> die Höhe des Elements auf den x-Koordinate daraufrechnen [offset().top+target.height()]

            -> zu der neuen Koordinate des Elements scrollen [animate({scrollTop: bottom}, 500)]