iFrame oder Script-Tag in Contao einbinden
- 3.5
- 4.4
- 4.9
- 4.13
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 < 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.

Ü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

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.
Über den Autor

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.
Einen Kommentar schreiben