iFrame oder Script-Tag in Contao einbinden

Zuletzt aktualisiert: 17. November 2025

4.4
4.9
4.13
5.3

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 in der Standardkonfiguration nicht. Contao wandelt das < in die entsprechende HTML-Entität < um und gibt dein Code-Snippet lediglich als Text aus.

Um das Problem zu lösen, gibt es je nach Contao-Version mehrere Möglichkeiten, die wir dir kurz vorstellen möchten.

Variante 1: Inhaltselement individuelles Template

Das Inhaltselement Individuelles Template steht ab Contao 4.13 zur Verfügung und kann für Scripte oder iFrames verwendet werden.

Anpassungen ab Contao 5 (Twig)

Neues Twig-Template erstellen

Lege dir über das Backend das Template content_element/template.html.twig an.

Dieses Template werden wir im Anschluss erweitern.

Das neu angelegte Template befindet sich im Ordner content_element. Du kannst es dort belassen und einfach verwenden, wenn du nur ein Script/iframe einbinden willst.

Für unterschiedliche Scripte bzw. iFrames benötigst du Variantentemplates. Wir empfehlen dir für das Einbinden von Scripten bzw. Iframes wegen der besseren Übersicht immer Variantentemplates zu verwenden. Benenne die Templates so, dass du aus dem Namen des Templates erkennen kannst wozu das Template genutzt wird.

Hinweis

Bitte denke daran, dass du bei der Verwendung von Twig-Templates immer den Symfony-Cache leeren musst, damit die neuen Templates greifen bzw. im Backend zur Auswahl erscheinen.

Twig-Template erweitern für die Verwendung eines iframes

Das so erzeugte Template erweiterst du für die Einbindung eines iFrames (Beispiel-Code für GoogleMaps).

{% extends "@Contao/content_element/template.html.twig" %}
{% block content %}
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d155421.70603678434!2d13.259929787720186!3d52.506938616480106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a84e373f035901%3A0x42120465b5e3b70!2sBerlin!5e0!3m2!1sde!2sde!4v1729802786499!5m2!1sde!2sde" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
{% endblock %}

Twig-Template erweitern für die Verwendung eines Scripts

Das so erzeugte Template erweiterst du für die Einbindung eines Scripts wie folgt:

{% extends "@Contao/content_element/template.html.twig" %}
{% block script %}
    <script>
        {# Hier fügst du dein script (ohne script-Tags) ein #}
    </script>
{% endblock %}

Inhaltselement vom Typ Individuelles Template verwenden

Du kannst jetzt ein neues Inhaltselement anlegen und wählst als Elementtyp individuelles Template aus. Beim Inhaltselement-Template wählst du das von dir gewünschte Template für den iFrame oder das Script aus.

Contao - individuelles Twig-Template auswählen

Anpassungen Contao 4.13

Neues Template erstellen

Lege dir über das Backend das Template ce_template.html5 an.

Dieses Template werden wir im Anschluss anpassen.

Für unterschiedliche Scripte bzw. iFrames benötigst du unterschiedliche Varianten des Templates. Benenne die Templates so, dass du aus dem Namen des Templates erkennen kannst wozu das Template genutzt wird.

Template erweitern für die Verwendung eines iframes

Das vorher erzeugte Template erweiterst du für die Einbindung eines iFrames (Beispiel-Code für GoogleMaps).

<?php $this->extend('block_searchable'); ?>
<?php $this->block('content'); ?>
 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d155421.70603678434!2d13.259929787720186!3d52.506938616480106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a84e373f035901%3A0x42120465b5e3b70!2sBerlin!5e0!3m2!1sde!2sde!4v1729802786499!5m2!1sde!2sde" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<?php $this->endblock(); ?>

Template erweitern für die Verwendung eines Scripts

Das vorher erstellte Template erweiterst du für die Einbindung eines Scripts wie folgt:

<?php $this->extend('block_searchable'); ?>
<?php $this->block('content'); ?>
   <script>
  	<?php //Hier fügst du dein script (ohne script-Tags) ein ?>
   </script>
<?php $this->endblock(); ?>

Inhaltselement vom Typ Individuelles Template erstellen

Contao - individuelles Template auswählen

Variante 2: Inhaltselement Ungefiltertes HTML

Seit Contao 5 steht das Inhaltselement Ungefiltertes HTML zur Verfügung. In diesem Inhaltselement wird der eingegebene Code (Beispiel-Code für GoogleMaps) nicht verändert.

Contao - Inhaltselement Ungefiltertes HTML

Variante 3: Contao-Einstellungen anpassen

3.1 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 (eingeführt in Contao 4.11.7, 4.9.18 und 4.4.56) 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.

3.2 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 4: Externe Datei per Insert-Tag einbinden

4.1 Neue Datei erstellen

Neben den vorher genannten Möglichkeiten kannst du auch eine eigene Template-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.

4.2 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}}.

Empfehlung

Wie so oft gibt es mehrere Wege, die ans Ziel führen. Wenn du bereits Contao 5 verwendest, dann empfehle ich die Variante 2 und das Inhaltselement "Ungefiltertes HTML" zu nutzen. Da es am schnellsten und einfachsten geht.

Wenn du Contao 4.13 verwendest, dann empfehle ich Variante 1 und das Inhaltselement "Individuelles Template" zu nutzen. Auch das geht zügig und zuverlässig.

Wenn du noch eine ältere Contao-Version nutzt, dann sieht dir Variante 3 und 4 noch mal genauer an. Beachte bitte, dass die erlaubten HTML-Tags von Variante 3 systemweit für alle Benutzer gelten, was unter Umständen nicht gewünscht ist.

Möchtest du über neue Artikel informiert werden?

Dann trage hier deine E-Mailadresse ein und klicke auf „Abonnieren". Du erhältst regelmäßig aktuelle Infos über Contao und die Contao-Academy.

Über den Autor

Christian Feneberg ist der Initiator und Dozent der Contao Academy. Er bringt über 15 Jahre Praxiswissen in der professionellen Umsetzung von Contao-Websites mit. Zudem ist er Teil des Teams von trakked.io. Er liebt es, sich neues Wissen anzueignen und es weiterzugeben. Abseits des Bildschirms verbringt er am liebsten Zeit mit seiner Familie und in der Natur.

Folge Christian jetzt bei LinkedIn.