Wie verhindert man, dass von Benutzern geschriebenes HTML auf einer Website nicht mit den Stylesheets der Website in Konflikt gerät?

Question

Ich habe eine Website, die es einem Benutzer ermöglicht, Blogbeiträge zu erstellen. Einige HTML-Tags sind jedoch auf der schwarzen Liste, aber die meisten standardmäßigen HTML-Tags sind akzeptabel.

Ich habe jedoch Probleme damit, wie die Seiten angezeigt werden.

Ich halte das HTML in seinem eigenen div.

Letztendlich möchte ich das HTML des Benutzers unabhängig von den Hauptstylesheet der Website halten, damit es nicht die Styles erbt und das Layout der Ursprungsseite, auf der das HTML angezeigt wird, durcheinanderbringt.

Also am Ende, gibt es etwas, das ich auf ein div anwenden kann, um sicherzustellen, dass der Inhalt von dem Rest der Website isoliert ist?

Vielen Dank!

Answer 1

Sie könnten ein Reset-Stylesheet verwenden, um die Eigenschaften für dieses bestimmte DIV und dessen Kinder zurückzusetzen. Andererseits benötigen Sie wahrscheinlich einen CSS-Parser, um das Stylesheet des Benutzers für dieses spezielle DIV anzupassen.

Answer 2

Sie können es in einem Frame oder einem iFrame machen. Das hält es in jeder Hinsicht getrennt.

Answer 3

Könnten Sie jedes benutzererstellte Inhalte mit einem div der Klasse 'username' formatieren, zusätzlich zu anderen automatisch hinzugefügten Klassen?

Dann können Sie - ich nehme an 'sie' - nach Belieben formatieren und stylen, alle ihre Styles können wie folgt beginnen: div.username Selector.

Ansonsten könnten Sie iframes verwenden.

Answer 4

Sie könnten ein iframe verwenden, um sie komplett voneinander zu trennen, wenn Sie wirklich extrem sein wollten.

Oder Sie könnten sie darauf beschränken, nur Inline-Styles zu schreiben, damit sie Ihr Seiten Stylesheet nicht beeinflussen können:

1) Entfernen Sie alle Style-Tags im HTML, die der Benutzer erstellt. Auf diese Weise können sie Ihre Styles nicht überschreiben.

2) Validieren Sie ihren Code und beheben oder lehnen Sie Dinge wie nicht geschlossene Tags oder Elemente ab, die nicht innerhalb eines div-Tags sein sollten (wie head- oder body-Tags) und stellen Sie sicher, dass alles ordnungsgemäß geschlossen wird, damit es kein HTML nach dem div beschädigen kann, in dem es enthalten ist.