Ein iframe gibt zufällig XHR frei

Question

Ich habe eine Seite auf http://localhost:3000, die einen iframe enthält, dessen srchttp://localhost:3010/login ist. Der iframe tut folgendes:

• Fordert die src html.
• Nach Erhalt eines 302 Redirect folgt es auf http://localhost:3000/oauth/authorize?response_type=code&client_id=1&redirect_uri=http%3A%2F%2Flocalhost%3A3011%2Fauthorization_code&state={state}.
• Der Iframe wird dann zu seinem eigenen Ursprung zurückgeleitet: http://localhost:3010/authorization_code?code={code}&state={state}.
• Der Server der iframe-embedded App tauscht den Autorisierungscode für ein Zugriffstoken erfolgreich aus und leitet ihn an http://localhost:3010 mit einem Cookie weiter, der auf OAuth2 access_token gesetzt ist.
• Einige JavaScript-Code macht ein XHR zu http://localhost:3010/api/customerInfo.
• Die Kundeninformationen werden im iframe mithilfe von JavaScript zurückgegeben und gerendert.

Also das alles funktioniert gut.

Allerdings, wenn ich einen zweiten iframe-Embedded-App mit seiner eigenen Herkunft localhost:3020 hinzufügen, die durch den gleichen Fluss geht, eines des ersten XHR Apps wird mit dem folgenden Fehler fehlschlagen:

XMLHttpRequest cannot load http://localhost:3000/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3011%2Fauthorization_code&state=17nCw5o0Tr11Y6z8&client_id=1 . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3010 ' is therefore not allowed access. The response had HTTP status code 400.

Des scheint etwas merkwürdig, weil es sagt, dass es keine URL über XHR laden kann, die es bereits über eine Weiterleitung geladen hat.

Manchmal schlägt ein iframe fehl und manchmal auch der andere. Jedes Mal und in jedem Browser kann ein Iframe einen XHR ausführen, der andere verursacht diesen Fehler. Ich habe sogar die ursprüngliche XHR beider Iframes um unterschiedliche Beträge verzögert, so dass sie sich nicht überlappen, aber ohne Erfolg.

Die Iframes werden dynamisch (über React) generiert und haben dieses Attribut: sandbox='allow-forms allow-scripts allow-same-origin'.

Answer 1

Dies wird dadurch verursacht, dass Cookies nicht portspezifisch sind, im Gegensatz zur Richtlinie für denselben Ursprung, die die Portnummer als Teil des Ursprungs betrachtet. In diesem Fall teilten beide Iframes Cookies und beide verwendeten access_token als Name des Cookies, der das OAuth-Zugriffstoken enthielt. Der zweite iFrame zum Abschluss des Autorisierungsprozesses würde den ersten iframe-Cookie access_token überschreiben, was dazu führen würde, dass nachfolgende Iframe-Aufrufe von diesem IfRame fehlschlagen. Ich habe das mit eindeutigen Cookie-Namen behoben. Ein alternativer Fix wäre, verschiedene Hostnamen zu verwenden und die Hostdatei des Computers zu bearbeiten.