iFrame oder Script-Tag in Contao einbinden

  • 3.5
  • 4.4
  • 4.9
  • 4.13

In dieser Anleitung erfährst du, wie du ein Script-Tag oder iFrame in Contao verwenden kannst.

Contao verbietet iFrame oder Script-Tag aus Sicherheitsgründen

Wenn du versuchst in Contao ein iFrame (z.B. Google Maps) oder Script-Tags einzusetzen, dann funktioniert das nicht. Contao wandelt das < in die entsprechende HTML-Entität &lt; um. Dein Code funktioniert damit nicht.

Um das Problem zu lösen, kannst du die erlaubten HTML-Tags anpassen oder alternativ den entsprechenden Codebereich in eine eigene HTML-Datei schreiben und per Insert-Tag einbinden. Beide Möglichkeiten möchten wir dir kurz vorstellen.

Variante 1: Contao-Einstellungen anpassen

Erlaubte HTML-Tags anpassen

Aus Sicherheitsgründen lässt Contao nur bestimmte HTML-Tags zur Verwendung zu. Die Liste der erlaubten HTML-Tags kannst du nach Bedarf anpassen. Gehe dazu als Administrator im Backend unter System > Einstellungen und suche den Bereich Sicherheitseinstellungen.

Im Feld Erlaubte HTML-Tags sind alle HTML-Tags in alphabetischer Reihenfolge aufgeführt, die du standardmäßig in Contao verwenden kannst.

Füge den benötigten <script> bzw. <iframe> Eintrag hinzu.

In den aktuellen Versionen von Contao 4 reicht aufgrund erhöhter Sicherheitsanforderungen die Erweiterung der Liste mit den erlaubten HTML-Tags nicht mehr aus. Du musst zusätzlich die erlaubten Attribute für iFrame und Script-Tag anpassen.

Erlaubte Attribute anpassen

Nachdem du die Liste der erlaubten HTML-Tags angepasst hast, musst du jetzt noch die erlaubten Attribute für die hinzugefügten HTML-Tags anpassen. Gehe dazu im Backend unter System > Einstellungen > Sicherheitseinstellungen. Hier findest du einen Bereich für den Eintrag der erlaubten HTML-Attribute. Für jedes erlaubte HTML-Tag (Schlüssel) sind hier die erlaubten Attribute (Wert) eingetragen.

Contao - Sicherheitseinstellungen - erlaubte HTML-Attribute

Über das + Zeichen kannst du zusätzlich benötigte Attribute für iFrame und Script-Tag hinzufügen. In unserem Beispiel wollen wir Attribute für GoogleMaps hinzufügen. Die nötigen Attribute findest du in deinem iFrame-Snippet.

Beispiel-Code für GoogleMaps:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2658.369065114207!2d11.622566815686435!3d48.21876755348157!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479e7385128a251f%3A0xed4d60428e32c423!2sAllianz%20Arena!5e0!3m2!1sde!2sde!4v1632236962919!5m2!1sde!2sde" width="600" height="450" allowfullscreen="" loading="lazy"></iframe>

In unserm Google-Maps-Beispiel müssen wir die folgenden Attribute berücksichtigen:

  • src
  • width
  • height
  • allowfullscreen
  • loading
Contao - Sicherheitseinstellungen - erlaubte HTML-Attribute mit hinzugefügten Attributen für Iframe

Wichtige Hinweise

Alle Attribute freischalten
Prinzipiell ist es auch möglich für iFrame und Script-Tag jeweils alle Attribute freizugeben. Dazu trägst du statt der einzelnen Attribute nur einen * in die Zeile für den Wert ein. Wir empfehlen das für den produktiven Betrieb jedoch ausdrücklich nicht, weil damit das Sicherheitsniveau von Contao deutlich herabgesetzt wird.

Einstellungen greifen nicht rückwirkend
Es müssen zuerst die erlaubten HTML-Tags und Attribute angepasst werden. Erst dann können iFrame bzw. Script-Tag im Inhaltselement verwendet werden. Solltest du schon deinen Code als Inhaltselement eingefügt haben, musst du den Code erneut einfügen und speichern, damit dieser in der Datenbank korrekt abgelegt wird.

Wenn du alles korrekt angepasst hast, ist es möglich iFrame oder Script-Tag z. B. in einem HTML-Element zu verwenden.

Tipp

Um jederzeit einfach sehen zu können, ob du neue HTML-Tags eingefügt hast, setze alle neuen Einträge an den Anfang der Liste mit den erlaubten-HTML-Tags anstatt diese alphabetisch einzuordnen.

Variante 2: Externe Datei einbinden

Neue Datei erstellen

Alternativ zur Anpassung der erlaubten HTML-Tags kannst du auch eine eigene Datei verwenden und diese per Insert-Tag einbinden.

Lege dazu unter Templates ein neues Template an. In diese Datei kommt dein Code. Das Template kann z. B. googlemap.html5 benannt werden. Am besten legst du die Datei lokal an und nutzt zum Upload ein FTP-Programm. Ohne FTP-Zugang kannst du auch ein ce_html.html5 kopieren, dieses umbenennen und den kompletten Inhalt überschreiben.

Datei per Insert-Tag einfügen

Mit dem Insert-Tag {{file::*}} kannst du diese Datei in Contao verwenden. Den * ersetzt du durch den Namen deiner Templatedatei z.B. {{file::googlemap.html5}}.

Wie so oft gibt es mehrere Wege, die ans Ziel führen. Ob du lieber die erlaubten HTML-Tags anpassen oder alternativ den entsprechenden Codebereich in eine eigene HTML-Datei schreiben und per Insert-Tag einbinden möchtest, hängt auch davon ab, wer sonst noch auf das Backend der Installation Zugriff hat. Die erlaubten HTML-Tags gelten systemweit für alle Benutzer.

Hat dir dieser Artikel gefallen?

Willst du in Zukunft keinen Artikel verpassen?
Dann trage hier deine E-Mailadresse ein und klicke auf "Abonnieren". Du erhältst regelmäßig aktuelle Infos über Contao und die Contao-Academy.

Wir geben deine Daten niemals an Dritte weiter. Du kannst deine E-Mail-Adresse jederzeit mit nur einem Mausklick aus unserem System löschen. Der Newsletter Versand sowie die individuelle Messung, Speicherung und Auswertung von Öffnungsraten und der Klickraten in Empfängerprofilen erfolgen durch KlickTipp. Ausführliche Hinweise erhältst du in unserer Datenschutzerklärung.

Über den Autor
Christian Feneberg (Gründer Fenepedia)

Christian Feneberg ist der Gründer der Contao-Academy und erstellt seit 2010 Websites mit Contao. Außerdem ist er im Team von trakked.io. und regelmäßig auf YouTube in der Contao Show zu sehen. Neben Contao begeistert er sich für Online-Marketing, Unternehmertum und Persönlichkeitsentwicklung.

Folge Christian jetzt auf Twitter, Xing und LinkedIn.

Einen Kommentar schreiben

Bitte addieren Sie 6 und 2.