Modul Wrapper (iFrame)

🔹 Bedeutung

Bindet externe Inhalte per iFrame ein.

🧪 3 Praxisbeispiele

1. Google-Maps Karte
2. Spendenformular
3. Externe Terminbuchung

⚠️ X-Frame-Options beachten!

1️⃣ Was ist das Problem?

Du bindest mit dem Wrapper-Modul eine externe Seite ein, z. B.:

• Google Maps
• Spendenformular
• Terminbuchung
• Externe Website

➡️ Die Seite erscheint nicht, stattdessen:

• leerer Bereich
• Browserkonsole meldet:
• Refused to display in a frame because it set X-Frame-Options to 'SAMEORIGIN'
  

2️⃣ Was sind X-Frame-Options? (einfach erklärt)

X-Frame-Options sind ein HTTP-Sicherheits-Header, der festlegt:
❓ Darf diese Seite in einem iFrame angezeigt werden – ja oder nein?

Mögliche Werte

📌 Joomla hat darauf keinen direkten Einfluss, wenn die externe Seite es verbietet. 

3️⃣ Wichtiger Grundsatz 

❗ Nicht Joomla blockiert den Wrapper – sondern die externe Website.

4️⃣ Prüfe zuerst: Darf die Seite eingebettet werden?

🔍 Test 1: Browser-Konsole

1. Wrapper-Seite aufrufen
2. F12 → Konsole
3. Typische Meldung:
   Refused to display 'https://example.com' in a frame because it set 'X-Frame-Options' to 'DENY' 

➡️ Wrapper technisch korrekt – Einbettung verboten 

5️⃣ Was du NICHT tun kannst

❌ X-Frame-Options im Joomla-Backend deaktivieren
❌ Mit CSS umgehen
❌ Mit JavaScript umgehen
❌ In user.css lösen

📌 Das wäre ein Sicherheitsrisiko und ist nicht erlaubt

6️⃣ FALL 1:
Externe Seite erlaubt iFrames (best case)

🧪 Beispiel: Google Maps Embed
✔ Richtige URL verwenden!

❌ Falsch:
https://maps.google.com

✅ Richtig:
 https://www.google.com/maps/embed?pb=...

 🛠 Modul anlegen

Backend-Pfad:
Inhalt → Module → Neu → Wrapper  

Einstellungen:

• URL: Embed-Link

• Scrollbars: Auto

• Breite: 100%

• Höhe: 400px

CSS (optional)
/templates/cassiopeia/css/user.css

.mod-wrapper iframe {
     border: 2px solid darkgray; /* Dunkelgrau #A9A9A9 */
} 

Beispiel:

• PayPal-Seite
• viele Formularanbieter
• Google Docs (teilweise)

❗ Lösungsmöglichkeiten

✅ Lösung 1 (empfohlen):
Link statt Wrapper

„Formular extern öffnen“

✔ DSGVO-konform
✔ Sicher
✔ Prüfungstauglich

✅ Lösung 2:
Anbieter-spezifische Embed-Lösung

Viele Dienste bieten eigene Einbettungscodes:

➡️ IMMER den offiziellen Embed-Code nutzen

🅲 FALL 3:
Eigene externe Seite (gleiche Domain)

👉 Du kontrollierst den Server

Beispiel:

🔧 Apache .htaccess

Pfad: /.htaccess 
Header set X-Frame-Options "SAMEORIGIN"  

oder gezielt:

⚠️ Nur für eigene Projekte!

Joomla setzt selbst Header:

Pfad:
 System → Globale Konfiguration → Server

➡️ Joomla schützt seine eigenen Seiten, nicht fremde.