iFrame oder Script-Tag in Contao einbinden

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.

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.

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

• src
• width
• height
• allowfullscreen
• loading

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

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.