CSS3-Reflektionen erstellen und neue PHP-Sicherheitslücke stopfen
Unser neuer Ratgeber verrät Ihnen, wie Sie mit CSS3 crossplattformfähige Reflektionen umsetzen und wie Sie eine neue PHP-Sicherheitslücke stopfen können.
Wir haben einen neuen Ratgeber zu CSS3 und PHP für Sie zusammengestellt. Wir zeigen Ihnen einerseits, wie Sie mit CSS3 crossplattformfähige Reflektionen umsetzen. Andererseits verraten wir Ihnen, wie Sie eine neu aufgedeckte PHP-Sicherheitslücke stopfen.Ratgeber: CSS3 und PHP - crossp...
Wir haben einen neuen Ratgeber zu CSS3 und PHP für Sie zusammengestellt. Wir zeigen Ihnen einerseits, wie Sie mit CSS3 crossplattformfähige Reflektionen umsetzen. Andererseits verraten wir Ihnen, wie Sie eine neu aufgedeckte PHP-Sicherheitslücke stopfen.
Ratgeber: CSS3 und PHP - crossplattformfähige Reflektionen
Wenn es gilt, Reflektionen und ähnliche Effekte ohne den Einsatz von Bildern umzusetzen, schlagen viele Webdesigner vorzugsweise den einfachsten Weg ein und dieser besteht im Einsatz proprietärer Eigenschaften wie -webkit-box-reflect: und -webkit-mask-image: für Webkit-Browser. Doch dieses Konzept hat den klaren Nachteil, dass es den Einsatz von Google Chrome oder Apple Safari erzwingt und damit Browser mit einer anderen Rendering-Engine außen vor lässt. Völlig unnötig, denn es geht auch anders. Wer Altbrowser aus der IE-Familie unterstützen möchte, kann sie durch den Einsatz bedingter Kommentare von modernen Browsern unterscheiden:
<!--[if lt IE 9 ]><body class="altlasten"><![endif]--><!--[if IE 9 ]><body class="ie9"><![endif]--><!--[if (gt IE 9)|!(IE)]><!--><body class="modern"><!--<![endif]-->
Zum Simulieren von Spiegeleffekten in Bezug auf einen Text in CSS3 sind jeweils zwei identische Textabschnitte vonnöten:
<div id="flaeche"><span id="ansicht1">Internet Magazin<span id="spiegelung">Internet Magazin</span></span></div>
Die zugehörigen Stilisierungsregeln (im Beispiel in der Stylesheet-Datei style.css) könnten beispielsweise wie folgt aussehen:
#flaeche { padding-top: 5%; left: 0; top: 10%; width: 100%; bottom: 0; position: absolute; overflow: hidden; }
Das Element verfügt noch über keinen Hintergrund, denn dieser soll ja die Spiegelung beinhalten. Die Eigenschaft overflow wird genutzt, um den oberen Bereich in schwarzer Farbe zu belassen und somit die Reflektion besser zur Geltung kommen zu lassen. Mit dem folgenden Quelltext entsteht sowohl ein reflektierendes Element als auch die Reflektion selbst:
#ansicht1, #spiegelung { color: #666; font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 50px; background-color: #FFE; font-weight: bold; padding: 30px; display: inline-block; border-radius: 30px; box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px; border-radius: 10px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
Auf diese Weise sind erst einmal zwei übereinander liegende große Schaltflächen entstanden. Die zweite Schaltfläche gilt es nun aber entlang der vertikalen Achse (also quer über die horizontale Achse) zu spiegeln:
#spiegelung { position: absolute; z-index: -1; top: 100%; left: 0; -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); -o-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1); -webkit-filter: blur(2px); /* nur Webkit */ /* filter: url(filter.svg#blur); */ /* Firefox, Opera und IE10 */ -webkit-box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px; -moz-box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px; box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px; }
Als Sahnehäubchen kommt ein Weichzeichnungsfilter zum Einsatz. Leider ist der blur-Filter von Webkit nicht crossbrowserfähig und so gilt es, zur Umsetzung eines Weichzeichners tiefer in die Trickkiste zu greifen. Der leichteste Weg, den Effekt der Weichzeichnung in Firefox, Opera und Internet Explorer 10 zu implementieren, bestünde im Einsatz einer Weichzeichnungsfiltermaske (im Beispiel filter.svg), und zwar wie folgt:
<?xml version="1.0" standalone="no"?><svg width="1" height="1" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><defs><filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="2 3" /></filter></defs></svg>
In dem Regelsatz für den Selektor #spiegelung lassen sich nun von der Filterregel für Firefox, Opera und IE 10 die Kommentarzeichen entfernen:
filter: url(filter.svg#blur); /* Firefox, Opera und IE10 */
Im nächsten Schritt gilt es, die Reflektion durch den Einsatz von Transparenz noch glaubwürdiger erscheinen zu lassen und das Problem der Browserkompatibilität zu lösen. Diese beiden Aufgaben erledigt zum Beispiel der folgende Code:
.modern #spiegelung { opacity: .25; } .ie9 #spiegelung { margin-top: 20px; margin-left: -10px; -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');" } .altlasten #spiegelung { margin-top: -20px; margin-left: -7px; filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99000000, endColorstr=#00000000) progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false'); }
Ratgeber: CSS3 und PHP - Neue Sicherheitslücke in PHP stopfen
Eine seit acht Jahren bestehende und erst vor kurzem entdeckte Verwundbarkeit des PHP-Interpreters könnte die Sicherheit Ihres Webservers gefährden. Durch das Anhängen der Zeichenfolge ?-s an eine gültige URL-Adresse kann nämlich ein Angreifer in älteren Versionen des PHP-Interpreters den Code der eingesetzten Skripte ausspionieren. Um zu ermitteln, ob Ihre Website einer Attacke dieser Art zum Opfer fallen könnte, rufen Sie die URL der betreffenden Website in einem Browser auf und hängen Sie daran die zuvor erwähnte Zeichenkette an, zum Beispiel so:
https://www.internet-magazin.de?-s
Wenn beim Aufruf einer so abgeänderten URL der Browser ungestört die Seite rendert, sind Sie gegen diese Attacke immun. Falls Sie jedoch beim Aufruf einer so abgeänderten URL einen Einblick in den Quellcode erhalten, ist die betroffene Website verwundbar. In diesem Falle sei Ihnen geraten, den PHP-Interpreter schleunigst auf den aktuellen Stand zu bringen, um den Server vor einem Angriff zu schützen.
