Verwendung der Klasse jquery-oembed-all

13 05 2012

Im Artikel „Medien einbinden mittels oEmbed“ hatte ich beschrieben, wie man mit PHP auf die oEmbed Daten von externen Anbietern zugreift. Nun macht das nur in eher wenigen Fällen Sinn, dies per PHP zu tun. Möchte man dynamisch die Daten beim Laden seiner Seite abgreifen, verzögert sich dies, bis der externe Dienst eine Antwort schickt. Steht dieser gerade nicht zur Verfügung oder hat Performanceprobleme, wirkt sich das konkret auf die Ladegeschwindigkeit der eigenen Seite aus. Nun könnte man die Daten auch einmalig abgreifen und in der eigenen Datenbank speichern. Was aber, wenn der Anbieter seinen Einbettungscode ändert?

Sinnvoller ist es, die eigene Seite zu laden und erst wenn diese angezeigt wird mittels JavaScript die externen Informationen im Nachhinein abzugreifen. Somit erübrigen sich die eben genannten Nachteile. Mit jquery-oembed-all existiert eine gute Klasse für jQuery, mit der sich genau dies bewerkstelligen lässt. Die Klasse ist ein Fork des in jüngster Vergangenheit vom Entwickler etwas stiefmütterlich behandelten  jquery-oembed, die im Gegensatz zum Original nicht auf den offensichtlich eingestellten Dienst oohembed angewiesen ist und, sollte oEmbed nicht zur Verfügung stehen alternative Methoden zur Einbindung nutzt.

Leider mangelt es jquery-oembed-all an einer Dokumentation, weshalb ich hier einen kurzen Überblick über die Funktionen geben möchte. Beginnen wir mit einem einfachen Beispiel. Dieses platziert das einzubindende Objekt in das Div „container“.

<html>
<head>
<!-- jQuery laden -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- die oembed-all Klasse laden -->
<script type="text/javascript" src="jquery.oembed.js"></script>
</head>

<body>
<script type="text/javascript">
// Platziere das Objekt aus .oembed im Element mit der id "container"
 $(document).ready(function() {
    $("#container").oembed("http://vimeo.com/1084537");
});
</script>
<!-- An dieser Position wird das Video angezeigt -->
<div id="container"></div>
</body>
</html>

Ergebnis:

Nun haben wir nicht nur ein Objekt zur Einbindung, sondern möchten neben dem Video noch ein Bild von Flickr anzeigen. Das zweite Beispiel platziert für jeden Link mit der Klasse „oembed“ das entsprechende Objekt.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.oembed.js"></script>
</head>

<body>
<script type="text/javascript">
$(document).ready(function() {
 // Suche in jedem Element a mit der Klasse "oembed"
 $("a.oembed").oembed();
});
</script>
<div><a class="oembed" href="http://www.flickr.com/photos/kl/2423315026/">Flickr Bild</a></div>
<div><a class="oembed" href="http://vimeo.com/1084537">Vimeo Video</a></div>
</body>
</html>

Ergebnis:

Es können verschiedene Optionen angewendet werden.
autoplay (true / false): Soll ein Video automatisch gestartet werden?
maxWidth: Die maximale Breite für das Objekt
maxHeight: Die maximale Höhe für das Objekt
embedMethod: Wie soll das Objekt eingebunden werden?
– + append: Setze das Objekt unter den Link
– + fill: Ersetze den Link durch das Objekt, erhalte aber die Klasse
– + replace: Ersetze den Link und die Klasse durch das Objekt

Zur Veranschaulichung der Optionen folgt unser nächstes Beispiel. Es ist anzumerken, dass globale Optionen gesetzt werden können, die dann für jeden Dienst gelten, aber auch pro Dienst eigene Einstellungen möglich sind.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.oembed.js"></script>
</head>

<body>
<script type="text/javascript">
    $(document).ready(function() {
    $(".oembed").oembed(null, {
        // Globale Optionen
        embedMethod: "append", // Haenge an
        maxWidth: 640, // Maximale Breite: 640 Pixel
        maxHeight: 480, // Maximale Hoehe: 480 Pixel
        vimeo: { // Diese Optionen gelten ausschliesslich fuer den Anbieter Vimeo
        	autoplay: true, 
        	maxWidth: 400, 
        	maxHeight: 400
        }
    });
});
</script>
<div><a class="oembed" href="http://www.flickr.com/photos/kl/2423315026/">Flickr Bild</a></div>
<div><a class="oembed" href="http://vimeo.com/1084537">Vimeo Video</a></div>
</body>
</html>

Das Video wurde auf die angegebene Maximalgröße verkleinert. Da die Einbettungsmethode „append“ verwendet wurde, werden die Objekte an die Links angehängt.

Mit der Methode „fill“ wird zwar der Link ersetzt, die Klasse .oembed bleibt allerdings erhalten. Die Klassen sind im Screenshot zur Verdeutlichung angezeigt.

„replace“ letztendlich ersetzt den kompletten Link inklusive seiner Klasse durch das einzubettende Objekt. Dies erkennt man am Besten im Vergleich der Klassen-Namen.

Advertisements




Spamschutz für ein phpBB Board

22 10 2007

Der Untergrundhandel mit Cybercrime-Dienstleistungen floriert und wirft für Hacker und Spammer viel Geld ab. Dabei finden sich wie im Supermarkt um die Ecke ebenso Lockangebote und Discount-Preise, berichten die Sicherheitsexperten von G Data im Vorfeld der ITK-Fachmesse Systems. “Die Professionalisierung der Online-Kriminellen ist nichts Neues. Wir haben es bereits seit Jahren mit einer Industrie zu tun, die im Internet kriminelle Dienstleistungen im großen Rahmen anbietet”, sagt Ralf Benzmüller, Leiter der G Data Security Labs, gegenüber pressetext. […]

Bereits für wenige hundert Euro sind gezielte Angriffe auf Webangebote oder der Versand von Millionen von Spam-E-Mails als Auftragsarbeit möglich. Die Cyber-Kriminellen operieren hierbei in Netzwerken, um möglichst viele Facetten der kriminellen Dienstleistungen aus einer Hand anbieten zu können. Kombinationsangebote auf dem Schwarzmarkt sind keine Seltenheit. Das Spektrum der Dienstleistungen ist dabei breit gefächert. 350 Euro kostet beispielsweise der Versand von 20 Mio. Spam-E-Mails. Für Schnäppchenjäger gibt es ein Starterpaket zum Preis von 140 Euro. Es beinhaltet ein Do-It-Yourself-Tool für den Eigenversand und fünf Mio. E-Mail-Adressen.

Quelle: http://pressetext.at/pte.mc?pte=071022014

In dem Textausschnitt dreht es sich hauptsächlich um die Email-Spammer. Ein in der Öffentlichkeit nicht so beachtetes Problem, aber doch ungemein ärgerlicher für jeden Webmaster einer Seite mit Kommentarmöglichkeiten von Besuchern stellt der Webseiten-Spam dar. Massenhaft werden hier Kommentare zu Blogs, Newsmeldungen und Diskussionsforen mit häufig nicht jugendfreier Werbung zugeschüttet. Besonders eingeschossen haben sich die Spambots auf phpBB Boards, die in großer Anzahl im Netz installiert sind und deren Spamschutz in der Version 2.x als recht schwach zu bezeichnen ist. Ein leicht gefundenes Fressen also für die Kriminellen, dem normalerweise nur mit großem Aufwand von Seiten der Webmaster zu begegnen ist.

Nun habe ich mich schon seit einiger Zeit mit dem Thema Webseitenspamming beschäftigt. Für eine Internetplattforum auf Grundlage des phpBB sollte eine möglichst einfache Lösung her, der Plage Herr zu werden.

Hier habe ich mir die normale Vorgehensweise der Spambots zunutze gemacht. Diese registrieren sich zuerst einen Mitgliedsnamen im Board, um damit anschließend ungehemmt spammen zu können. Diese Registrierung ist zwar durch ein Captcha gegen automatische Vorgänge geschützt, solche Grafiken können aber längst von den Bots gelesen werden. Genau da setze ich nun an. Die Bots versuchen immer, die dargestellte Grafik auf der Registrierungsseite zu entziffern und die Lösung zu übermitteln. Was macht der Bot aber, wenn er eben diese Zeichenfolge nicht eingeben darf? Genau, er scheitert und gibt irgendwann auf.

Deshalb verändere ich die Registrierung dahingehend, dass das Captcha zwar noch ganz normal angezeigt wird, ein erklärender Text aber darauf hinweist, dass genau dieser Code nicht eingegeben werden darf. Da die Bots aber auch nicht unfehlbar sind und evtl. durch die versehentliche Eingabe eines falschen Codes weiter kommen, ändere ich die Länge des einzugebenden Codes. phpBB Captchas sind immer sechs Zeichen lang, Bots geben also immer sechs Zeichen ein. Ich prüfe, ob ein fünfstelliger Code eingegeben wurde und leite die Registrierung nur dann weiter.

In der Datei includes/usercp_register.php suche ich nach der Zeile :

if ($row[‘code’] != $confirm_code)

und ersetze diese durch:

if (strlen($confirm_code) != 5)

Jetzt noch den erklärenden Text entsprechend anpassen. Dazu in der language/lang_german/lang_main.php suchen nach:

$lang[‘Confirm_code_explain’] = ‘Gebe den Code exakt so ein, wie du ihn siehst. Der Code unterscheidet zwischen Groß- und Kleinschreibung, die Null hat im Inneren einen schrägen Strich.’;

und ersetzen durch:

$lang[‘Confirm_code_explain’] = ‘Gebe eine beliebige fünfstellige Zeichenkette ein, aber NICHT die auf der Grafik abgebildeten!’;

Da viele Besucher vermutlich aus reiner Gewohnheit blind die Grafik abtippen, machen wir das Ganze durch eine optische Spielerei noch offensichtlicher. Das Eingabefeld für den Code erhält bei der Eingabe einen roten Hintergrund verpasst. Sobald sich fünf Zeichen im Feld befinden, ändert sich der Hintergrund im Ampelsystem in grün.

Hierfür kommen in den Stylesheets zwei neue Klassen hinzu. Dazu in der templates/subSilver/overall_header.tpl suchen nach:

input.post, textarea.post, select {
	background-color : {T_TD_COLOR2};
}

und ersetzen durch:

input.post, textarea.post, select {
	background-color : {T_TD_COLOR2};
}
input.postrot{
	background-color: #FFCC00;
}
input.postgruen{
	background-color: #00FF00;
}

Ein winziges JavaScript zeichnet zuständig für die Farbänderung je nach Status des Input-Feldes. In der templates/subSilver/profile_add_body.tpl (bei anderen Templates wird das Verzeichnis entsprechend anders lauten) ganz oben einfügen:

function PruefeLaenge(zeichen){
	if (zeichen < 1){
		document.forms[0].confirm_code.className="post";
	} else if (zeichen == 5){
		document.forms[0].confirm_code.className="postgruen";
	} else{
		document.forms[0].confirm_code.className="postrot";
	}
}

JavaScripts gehören zwar eigentlich in den Header einer Seite, aber ich wüsste keine vernünftige Möglichkeit, das mit dem phpBB zu realisieren, ohne den Code in jeder Seite einzubinden. Das wäre unnötiger Overhead, deshalb lebe ich einfach mit dieser Unschönheit.

Anschließend bringe ich dem Input-Feld noch bei, dass es die JavaScript Funktion auch nutzen soll. In der selben Datei suchen nach:

<input type="text" class="post" style="width: 200px;" name="confirm_code" size="6" maxlength="6" value="" />

und ersetzen durch:

<input id="confirm_code" OnKeyUp="PruefeLaenge(this.value.length)" type="text" class="post" style="width: 200px;" name="confirm_code" size="6" maxlength="6" value="" />