Die Richtlinie für denselben Ursprung ist eine Browser-Sicherheitsfunktion, die die Interaktion von Dokumenten und Skripts aus einem Ursprung mit Ressourcen eines anderen Ursprungs einschränkt.
Ein Browser kann Ressourcen von mehreren Websites gleichzeitig laden und anzeigen. Es kann sein, dass mehrere Tabs gleichzeitig geöffnet sind oder eine Website mehrere iFrames von verschiedenen Websites einbetten kann. Wenn es keine Einschränkungen für die Interaktionen zwischen diesen Ressourcen gibt und ein Skript von einem Angreifer manipuliert wird, könnte das Skript alles im Browser eines Nutzers offenlegen.
Dies verhindert die Same-Origin-Richtlinie, indem der Lesezugriff auf Ressourcen blockiert wird, die aus einem anderen Ursprung geladen werden. Sie sagen: „Ich lade immer Bilder und Skripts aus anderen Quellen.“ Browser lassen einige Tags zu, um Ressourcen eines anderen Ursprungs einzubetten. Diese Richtlinie ist hauptsächlich ein historisches Artefakt und kann Ihre Website Sicherheitslücken wie Clickjacking mit iFrames aussetzen. Du kannst das ursprungsübergreifende Lesen dieser Tags mit einer Content Security Policy einschränken.
Was gilt als derselbe Ursprung?
Ein Ursprung wird durch das Schema (auch Protokoll, z. B. HTTP oder HTTPS), den Port (falls angegeben) und den Host definiert. Wenn zwei URLs denselben Ursprung haben, gelten sie als „Same origin“. Beispielsweise ist http://www.example.com/foo der gleiche Ursprung wie http://www.example.com/bar, aber nicht https://www.example.com/bar, da das Schema anders ist.
Was ist erlaubt und was wird blockiert?
Im Allgemeinen ist das Einbetten einer ursprungsübergreifenden Ressource zulässig, während das Lesen einer ursprungsübergreifenden Ressource blockiert wird.
| iFrames |
In der Regel ist ursprungsübergreifendes Einbetten zulässig (abhängig von der X-Frame-Options-Anweisung), aber nicht ursprungsübergreifendes Lesen (z. B. die Verwendung von JavaScript für den Zugriff auf ein Dokument in einem iFrame).
|
| CSS |
Ursprungsübergreifendes CSS kann mithilfe eines <link>-Elements oder eines @import-Elements in eine CSS-Datei eingebettet werden. Möglicherweise ist der richtige Content-Type-Header erforderlich.
|
| Formulare |
Ursprungsübergreifende URLs können als action-Attributwert von Formularelementen verwendet werden. Eine Webanwendung kann Formulardaten in ein ursprungsübergreifendes Ziel schreiben.
|
| bilder | Das Einbetten ursprungsübergreifender Bilder ist zulässig. Das Lesen ursprungsübergreifender Bilddaten (z. B. das Abrufen von Binärdaten aus einem ursprungsübergreifenden Bild mit JavaScript) wird jedoch blockiert. |
| Multimedia |
Ursprungsübergreifende Video- und Audioinhalte können mithilfe der Elemente <video> und <audio> eingebettet werden.
|
| Skript | Ursprungsübergreifende Skripts können eingebettet werden. Der Zugriff auf bestimmte APIs (z. B. ursprungsübergreifende Abrufanfragen) wird jedoch möglicherweise blockiert. |
AUFGABE: DevSite - Think and Check-Bewertung
So verhindern Sie Clickjacking
Bei einem Angriff namens „Clickjacking“ wird eine Website in ein iframe eingebettet und transparente Schaltflächen überlagert, die zu einem anderen Ziel führen. Nutzer täuschen vor, dass sie auf Ihre Anwendung zugreifen, während sie Daten an Angreifer senden.
Wenn Sie verhindern möchten, dass Ihre Website von anderen Websites in einen iFrame eingebettet wird, fügen Sie den HTTP-Headern eine Sicherheitsrichtlinie mit der Anweisung frame-ancestors hinzu.
Alternativ kannst du X-Frame-Options in die HTTP-Header einfügen. Eine Liste der Optionen findest du unter MDN.
Zusammenfassung
Hoffentlich fühlt es sich ein wenig erleichtert, dass Browser für die Sicherheit im Web hart arbeiten. Obwohl Browser versuchen, durch Blockieren des Zugriffs auf Ressourcen sicher zu sein, möchten Sie manchmal auf ursprungsübergreifende Ressourcen in Ihren Anwendungen zugreifen. Im nächsten Leitfaden erfahren Sie mehr über Cross-Origin Resource Sharing (CORS) und darüber, wie Sie dem Browser mitteilen, dass das Laden von ursprungsübergreifenden Ressourcen aus vertrauenswürdigen Quellen zulässig ist.