Ratgeber IFrames auf der Website gefunden

Der Hinweis zeigt an, dass auf deiner Website IFrames verwendet werden. IFrames (Inline Frames) sind HTML-Elemente, mit denen Inhalte von anderen Webseiten oder Quellen in deine Website eingebettet werden können. Während sie nützlich sind, können IFrames auch Herausforderungen in Bezug auf Sicherheit, Performance und Barrierefreiheit mit sich bringen.

• Vorteile:
  • Einfache Integration externer Inhalte wie Videos oder Karten.
  • Unabhängigkeit der eingebetteten Inhalte vom Hauptcode der Website.
• Nachteile:
  • Sicherheitsrisiken: IFrames können von Drittanbietern manipuliert werden (Clickjacking).
  • Leistungseinbußen: IFrames können die Ladezeit deiner Website verlangsamen.
  • Barrierefreiheitsprobleme: Screenreader können Schwierigkeiten haben, Inhalte in IFrames zu interpretieren.

1. Identifiziere die IFrames:
   • Suche in deinem HTML-Code nach <iframe>-Tags.
   • Beispiel:

     <iframe src="<https://example.com>"></iframe>

2. Überprüfe die Notwendigkeit:
   • Entferne IFrames, die nicht absolut notwendig sind, um die Performance und Sicherheit zu verbessern.
   • Beispiel: Nutze statische Kartenbilder anstelle von eingebetteten Karten, falls keine Interaktivität erforderlich ist.
3. Nutze sichere Quellen:
   • Stelle sicher, dass eingebettete Inhalte von vertrauenswürdigen und sicheren Quellen stammen.
   • Achte darauf, dass die URLs der IFrames über HTTPS geladen werden.
4. Füge Sicherheitsattribute hinzu:
   • Ergänze Sicherheitsattribute wie sandbox und allow, um die Risiken zu minimieren.
   • Beispiel:

     <iframe src="<https://example.com>" sandbox="allow-scripts allow-same-origin" allow="fullscreen"></iframe>

5. Stelle die Barrierefreiheit sicher:
   • Füge Titel (title-Attribut) hinzu, um den Inhalt des IFrames zu beschreiben.
   • Beispiel:

     <iframe src="<https://example.com>" title="Beispiel-Inhalt"></iframe>

6. Lade IFrames lazy:
   • Verwende das loading="lazy"-Attribut, um IFrames erst dann zu laden, wenn sie im sichtbaren Bereich erscheinen.
   • Beispiel:

     <iframe src="<https://example.com>" loading="lazy"></iframe>

7. Teste die Auswirkungen:
   • Überprüfe die Ladezeit deiner Website und teste, ob alle IFrames korrekt dargestellt werden.
   • Nutze Tools wie Google Lighthouse, um die Performance und Barrierefreiheit zu bewerten.

Beispiele & Best Practices

• Unsichere Quellen: Verwende nur Inhalte von vertrauenswürdigen, sicheren Domains.
• Fehlende Sicherheitsattribute: Ergänze immer sandbox und allow, um Risiken zu minimieren.
• Keine Barrierefreiheit: Füge das title-Attribut hinzu, um Screenreader zu unterstützen.

• Das sandbox-Attribut schränkt die Funktionen von IFrames ein und minimiert Sicherheitsrisiken.
• Mit loading="lazy" kannst du die Ladezeit der Website optimieren.
• Das title-Attribut verbessert die Zugänglichkeit für Nutzer mit Screenreadern.

• MDN Web Docs: IFrames
• Google Lighthouse für Performance-Optimierung
• WCAG Richtlinien für eingebettete Inhalte