Eigentlich kam die Aufgabe ganz unscheinbar daher: Integriere doch bitte ein Widget für den Kurskalender eines Sportvereins - da reichte es früher, den vom Anbieter zur Verfügung gestellten Code per Copy&Paste in ein HTML-Element zu packen. Meistens war es das schon. In Contao 4.9 ff kann das jedoch etwas komplexer ausfallen. Ursache können veränderte Sicherheitsanforderungen sein.
Ich bekam vor der Kundin zwei dieser Schnipsel: Einmal einen Script-Code, der mittels <script src="https://www.foobar.com/js/widgets.js"></script> eine Komponente zum Nachladen eines Widgets zur Verfügung stellen sollte, zum anderen den Code für ein HTML-<div>, in dem das Widget dann angezeigt werden sollte und das mit einem Attribut genauer spezifizierte, welche Daten geladen werden sollten: <div class="foobar-schedule" attr-gym="12345"></div>. Kein Hexenwerk.
Mit den sinnvollen und immer strikter werdenden Browservoreinstellungen ist das jedoch etwas komplexer geworden. Pasted man das Widget einfach so in einen Artikel, dann wird man nämlich erst einmal mit einem so gennanten CORS-Fehler belohnt. Der Browser meldet, dass er aufgrund eines fehlenden Access-Control-Allow-Origin-Headers erst einmal nichts laden und anzeigen darf. Also bleibt der Platz auf der Seite erst einmal leer.
Früher hätte man jetzt mit ein paar beherzten Anweisungen in der Datei .htaccess für Ruhe gesorgt, aber erstens unterbinden zunehmend Webhoster diese etwas hemdsärmelige Vorgehensweise und zweitens integriert Contao 4 ja inzwischen die Sicherheitstools, die mit Symfony eben zur Verfügung stehen. Das entsprechende Paket ist NelmioSecurity bzw. das Submodul NelmioCors. Das stellt nämlich Einstellungen zur Verfügung, mit denen bestimmt werden kann, welcher externe Content wo und mit welchen Rechten ausgeführt werden darf. Da die sinnvolle Standardeinstellung 'gar nicht' ist muss das also konfiguriert werden
Klasse ist dabei, dass diese Konfiguration nicht irgendwo, sondern in der config.yml stattfindet. Klar und strukturiert, und nicht in historisch gewachsenen php.ini oder .htaccess-Direktiven, die einem gerne auch mal beim Transfer vom Staging- auf's Livesystem auf die Füsse fallen. Diese Einstellungen sind immer gleich, es gibt keine unterschiedliche Syntax, ich muss nicht wissen, ob ich auf einem Apache- oder einem Nginx-Server unterwegs bin.
Die Basiseinstellung ist vergleichsweise schlicht.
nelmio_cors:
defaults:
allow_origin: '*'
allow_headers: '*'
allow_methods: [‘POST', 'PUT', 'GET', 'DELETE']
So wird in diesem Fall erst einmal alles erlaubt - Laden von wo-auch-immer, egal, was im Header steht und mit den Methoden POST, PUT, GET und DELETE. Das sollte man sinnvoll einschränken - in meinem Fall auf die Domain foobar.com und auf ein simples GET, weil unser Script nichts schreiben, übertragen oder gar löschen muss. Ein paar der Optionen gibt es auf https://github.com/nelmio/NelmioCorsBundle zu sehen.
Eigentlich dachte ich, dass meine Einbindung damit fertig sei, aber da hatte mit Contao dann doch noch einen Strich durch die Rechnung gemacht.
Die Ursache liegt in den HTML-Tags, die Contao erlaubt (oder verbietet). Früher gab es da eine längliche und unübersichtliche Liste in einer Zeile, bei der es leider nicht möglich war, genau zu spezifizieren. Entweder <script> oder nicht. Keine Differenzierung. Nix gut.
Heute ist das zusätzlich ein Wizard, mit dem für jedes Tag festgelegt werden kann, welche Attribute erlaubt sind. Also kann festgelegt werden, was in einem <div> stehen darf, wie data-attribute genutzt oder was <script> darf. Scrollt man in diesem Artikel nach oben, dann wird bei genauem Hinsehen dann auch sichtbar, was mir im ersten Anlauf die Bilanz verhagelte: das unscheinbare attr-gym=12345" innerhalb des <div>. Mein Widget wurde zwar geladen, aber wusste nicht, welchen Kursplan es abholen sollte, weil Contao den relevanten Teil einfach entfernt hat.
Mit einer Einstellung für das <div> mit dem Wert attr-gym war dann aber alles gut, der Kursplan wurde angezigt und die Kundin war happy.
Einen Kommentar schreiben
Hast Du Fragen oder Anregungen? Dann nutze die Kommentarfunktion.