TinyMCE - Code parsen

Hallo!
Ich nutze auf meiner Seite den "TinyMCE" (WYSIWYG-Editor). Der Editor selbst funktioniert zu meiner vollsten Zufriedenheit.

Allerdings gibt es nun 2 Dinge die mich doch etwas stören:
1. Ein etwas erfahrener Besucher kann spätestens durch das klicken des HTML-Tags beliebige Klassen/Id's zu den Tags hinzufügen und sogar Stylesheets und Javacscript-Dateien einbinden. Das möchte ich allerdings verhindern. So sollen Stylesheets, Javascript und bestimmte Klassen/Id's verboten sein, außerdem sollen die Style-Angaben bei Tags gefiltert werden und nur bestimmte erlaubt sein. Der Code den ich gemacht habe funktioniert aber leider nicht so ganz wie erwünscht, deswegen bin ich seit längeren auf der Suche nach einem Parser o.ä. der HTML-Code parsen und nach gegebenen Regeln filtern kann.

2. Wenn ein Besucher kein JS hat gibts auch kein TinyMCE, heißt er kann wirklich JEDEN Code in die Textarea schreiben. Gerade hier ist das filtern von großer Bedeutung. Wie aber damit umgehen ? Ich kann ja via PHP schlecht erkennen ob eine Person JS (de-)aktiviert hat. Gerade hier ist ein Parser ja extrem wichtig.

Kennt ihr dazu evtl. eine Lösung ? Nutzt ihr den TinyMCE und wie schützt ihr euch vor solchen HTML-"Hacks" (kann ja immerhin das Layout erheblich zerstören und durch JS geht ja noch viiiel mehr)

Zitat von Dodo

http://php.net/manual/de/function.str-replace.php

Das ist mir schon klar, ich habe auch bereits einen Code, allerdings funktioniert der nicht so ganz wie gewünscht, weswegen ich wissen wollte, ob es schon etwas "fertiges" gibt bzw. wie das z.B. hier oder bei anderen großen Communitys mit WYSIWYG-Editoren gemacht wird.

Probleme habe ich z.B. dabei, dass nur gewissen Klassen/ID's erlaubt sind. Mein bisheriger Ansatz war folgender:

$string = preg_replace('/<(.*?)(id|class).*?=.*?".*?(beispiel|klasse|oder|id).*?".*?>(.*?)<\/.*?>/i', '<$1 $2="$3">$4</$1>', $string);

Leider wird bei diesem Code dann mein kompletter abgesendeter Code zerstört. Vielleicht hab ich aber auch das mit den Regulären Ausdrücken noch nicht ganz "gerafft" ?

Zitat von jojo87

veruch mal HTMLTidy, wenn du in php nicht ganz unbewandert bist.
IMO die beste Bibliothek, um sauberes html zu erzeugen

Ich bin zwar durchaus etwas in PHP bewandert, allerdings liegt das Problem eher darin, dass ich nur Webspace und habe und keinen Server. Dadurch wird die Verwendung von HTMLTidy etwas schwierig.

Ich werde mich dann aber mal ransetzen und den Parser selbst zusammenbasteln.

Zitat von Tobse

Öhm, wenn du kein PHP hast, wie willst du das eingegebene HTML verarbeiten?!? Versteh mich nicht falsch, aber hast du jetzt Webspace mit PHP under Webspace ohne PHP?
Und man KANN mit PHP herausfinden, ob der benutzer HTML hat.
http://de2.php.net/get_browser

Ich hab Webspace mit PHP, allerdings eben keinen Server wo ich HTMLTidy installieren könnte (für mich klingt es auf der Seite nämlich so, als ob man sich das ganze erst auf dem Server installieren muss um es nutzen zu können)

Und ob der Benutzer HTML hat setze ich einfach mal vorraus, da ansonsten mein ganzes Unterfangen ja sinnlos wäre, denn was sollte ich dann großartig verarbeiten ?
Es geht ja eher darum, ob der Nutzer JS hat bzw. aktiviert hat. Dazu ist mir allerdings schon ein Weg eingefallen. Ich lasse einfach zu der Textarea noch einen hidden-Input mit JS erstellen. Existiert der hidden-input läuft Javascript, d.h. der Code muss detailliert durchgelaufen werden, gibt es den Input nicht wird der Code "hart" behandelt, also alles mehr oder weniger "gnadenlos" entfernt.

Zitat von Tobse

Aber sich auf das Feld zu verlassen ist sowieso n bills unsicher, ich kann die Seite ja aufrufen, des Feld wird erstellt und dann JS ausmachen. Dann kann ich in die Textarea auch schreiben wass ich will.

Dann wird ja aber ALLES mehr oder weniger entfernt (strip_tags). Dadurch sind letztendlich nur p-Tags übrig (ohne Style/Class/Id). Dadurch ist es ja nicht mehr unsicher. Oder irre ich mich da jetzt ?

Ich habe mal den "HTML Purifier" getestet. Scheint das zu sein, was ich gesucht habe. Muss mich nur noch etwas mit der Konfiguration rumschlagen, die gerade noch nicht so zu funktionieren scheint.
Kennt sich jemand damit aus ?

Zitat von jojo87

ich habs noch nicht produktiv eingesetzt. Aber weisste was, ich hab Bock

Das lass ich mir nicht zweimal sagen

Eine Eingabe die per $_POST reinkommen könnte wäre z.B.:

<p style='width:2000px;'>Beliebiger Text. <span style='color:red'>Wichtig in Farbe</span></p>

Nun sollen die Tags "p" und "span" erlaubt sein. Das Style-Tag darf auch vorkommen, allerdings darf eben kein "width" drin vorkommen. Der Code am Ende sollte also folgender sein:

<p>Beliebiger Text. <span  style='color:red'>Wichtig in Farbe</span></p>

Ich habe auch schon einen Ansatz, allerdings scheint sich da irgendein Fehler zu befinden, der mir immer folgenden Code liefert:

<p>Beliebiger Text. <span>Wichtig in Farbe</span></p>

Mein PHP-Code sieht so aus:

$allowedTags = array('p', 'span');
$config = HTMLPurifier_Config::createDefault();
$config->set('HTML.Allowed', implode(',', $allowedTags));
$config->set('CSS.AllowedProperties', array('text-align', 'color', 'background-color'));
$config->set('AutoFormat.RemoveSpansWithoutAttributes', true);
$config->set('AutoFormat.RemoveEmpty.RemoveNbsp', true);
$purifier = new HTMLPurifier($config);
echo $purifier->purify($string);

Ich muss auch sagen, dass ich die Dokumentation von Purifier irgendwie nicht so ganz verstehe (Was heißt "Lookup array (or null)" ganz genau ? Ich mein Array klar, aber ist "Lookup" was besonderes ?^^). Scheint wohl so als hätte ich bei "CSS.AllowedProperties" einen Fehler reingebaut. Weil "HTML.Allowed" und die beiden "AutoFormat" funktionieren auch.
Das ganze ist natürlich erst der Anfang und ich möchte es noch ausbauen aber wie gesagt stecke ich eben schon hier fest.

Zitat von jojo87

Dein Fehler liegt in HTML.Allowed
Hier musst du explizit angeben, welche Attribute im Tag erlaubt sind, derart

PHP

$allowedTags = array('p[style]', 'span[style]');

Ich habe das mal so reingemacht, allerdings ändert sich am Ergebnis nichts. Ich habe im Internet dazu 2 Ergebnisse gefunden, die etwas mit magic_quotes zu tun hatten. Dort wurde gemeint, man sollte vorher den String noch durch stripslashes() laufen lassen(, hat am Ergebnis aber leider auch nichts geändert.) Hat am Ergebnis sehr wohl etwas geändert, jetzt funktioniert es. Keine Ahnung was ich da beim letzten mal falsch gemacht habe weil ichs schonmal so probiert habe.

Zitat von jojo87

Prinzipiell kannst du dich an dieses "white-list"-Verfahren schon mal gewöhnen
HTMLPurifier arbeitet nur damit...

Das ist mir gerade recht, so wird einem nämlich viel Arbeit abgenommen.

Ich habe mal damit etwas rumgespielt und bin jetzt eigentlich fertig. Krass. Da bekommt man einfach innerhalb kürzester Zeit nen echt guten Parser!

Hier ist mal der Code, vielleicht gibts ja noch irgendwas zu verbessern ?

$string = stripslashes($string);
$string = preg_replace("/<br.*?\/>\s*<br.*?\/>/i", '</p><p>', $string);
$allowedTags = array('span[style]','p[style]', 'strong', 'em', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'address', 'ul', 'ol', 'li', 'a[href|target|title]', 'img[style|src|alt]', 'sub', 'sup', 'td[colspan|rowspan]', 'table', 'tr', 'tfoot', 'thead', 'tbody');
$config = HTMLPurifier_Config::createDefault();
$config->set('HTML.Allowed', implode(',', $allowedTags));
$config->set('CSS.AllowedProperties', array('text-align', 'color', 'background-color', 'text-decoration', 'float'));
$config->set('AutoFormat.RemoveSpansWithoutAttributes', true);
$config->set('AutoFormat.RemoveEmpty.RemoveNbsp', true);
$config->set('AutoFormat.RemoveEmpty', true);
$purifier = new HTMLPurifier($config);
echo $purifier->purify($string);

Als Testcode habe ich mal den eingegeben (durch Tiny):

<table border="0">
<tbody>
<tr>
<td>Tabelle mit Spalten</td>
<td>Spalte</td>
</tr>
<tr>
<td>andere Spalte</td>
<td>n&auml;chste Spalte</td>
</tr>
</tbody>
</table>
<p><strong>Fetter Text</strong><em>, kursiv</em> <span style="text-decoration: line-through;">und durchgestrichen</span></p>
<blockquote>
<p>Zitat mit blockquote</p>
</blockquote>
<p style="text-align: left;">Textformatierung (left)</p>
<p style="text-align: right;">Textformatierung (right)</p>
<p style="text-align: center;">Textformatierung (center)</p>
<p>Textformatierung (block)</p>
<h2>&Uuml;berschriften 1</h2>
<h4>wegseherh 4</h4>
<address>Address-Tag</address> 
<ul>
<li>Liste</li>
<li>Ein Punkt</li>
<li>Zweiter Punkt</li>
</ul>
<ol>
<li>Nummerierte Liste</li>
<li>Ein Punkt</li>
<li>Zweiter Punkt</li>
</ol>
<p><a title="Titel zum Link" href="http://irgendeine.domain" target="_blank">Link</a></p>
<p>&nbsp;</p>
<p style="text-align: center;"><img src="http://www.forum-hilfe.de/images/misc/fh_logo.gif" alt="Alternativtext" width="236" height="93" /></p>
<p style="text-align: left;">Verschiedene Style-Sachen: <span style="color: #ff0000;">Textfarbe</span><span style="background-color: #008000;">, Hintergrundfarbe</span>,<sub> tiefgestellt</sub>, <sup>hochgestellt</sup></p>
<script type='text/javascript'>Schadcode hier rein</script>

Das ganze scheint soweit zu funktionieren, Ergebnis ist folgendes:

<table><tbody><tr><td>Tabelle mit  Spalten</td> <td>Spalte</td> </tr><tr><td>andere Spalte</td> <td>nächste Spalte</td> </tr></tbody></table>
<p><strong>Fetter  Text</strong><em>, kursiv</em> <span  style="text-decoration:line-through;">und  durchgestrichen</span></p> 
<blockquote> <p>Zitat mit blockquote</p> </blockquote>
<p style="text-align:left;">Textformatierung (left)</p>
<p style="text-align:right;">Textformatierung (right)</p>
<p style="text-align:center;">Textformatierung (center)</p> 
<p>Textformatierung (block)</p>
<h2>Überschriften 1</h2>
<h4>wegseherh 4</h4>
<address>Address-Tag</address>
<ul><li>Liste</li> <li>Ein Punkt</li> <li>Zweiter Punkt</li> </ul>
<ol><li>Nummerierte Liste</li> <li>Ein Punkt</li> <li>Zweiter Punkt</li> </ol>
<p><a title="Titel zum Link"  href="http://irgendeine.domain">Link</a></p>  
<p style="text-align:center;"><img  src="http://www.forum-hilfe.de/images/misc/fh_logo.gif"  alt="Alternativtext" /></p>
<p style="text-align:left;">Verschiedene Style-Sachen: <span  style="color:#ff0000;">Textfarbe</span><span  style="background-color:#008000;">,  Hintergrundfarbe</span>,<sub> tiefgestellt</sub>,  <sup>hochgestellt</sup></p>

Jetzt muss ich durch preg_replace (oder ne ähnliche Funktion) nur noch

<span style='text-decoration:line-through;'></span>

durch

<strike></strike>

ersetzen und das "text-align:center|left|right|block;" durch ne jeweilige Klasse.

Zitat von Tobse

Das mit den RegExp sollte ja nicht das problem sein. Oder wie ist das zu verstehen?

Nein, ich hoffe nicht
Solche Ersetzungen sind mit dem HTMLPurifier aber nicht direkt möglich oder ? Also irgendwie Style-Attribut -> Klasse. Hab dafür zumindest nichts in der Doku gefunden ... Und wäre ja auch zu schön

Ich wollte mit meinem Post im Prinzip auch nur eine Lösung zeigen wie man es machen könnte falls irgendjemand so wie ich auch mal in Google nach ner Lösung sucht (vorausgesetzt er kommt auf diesen Thread :D)

Zitat von Afrael

Öhm... ich dachte, man solle das gerade so rum nicht machen? <strike> ist doch deprecated?

Äh ja das stimmt, grade nochmal nachgeschaut, in HTML 4.01 deprecated und in HTML5 garnichtmehr enthalten.
Ich hab in meinem Script schon als Kommentar "<del>" reingeschrieben, was ich auch eigentlich statt <strike> verwenden wollte, hab nur beim reinschreiben hier nicht drangedacht.