Web-Widget erstellen, das auf "Third-Party-Websites" eingebunden werden kann (CORS)

[atokirina]

Hallo,

ich versuche eine Art Web-Widget zu erstellen, das auf "Third-Party-Websites" eingefügt werden soll. Aber irgendwie lauf ich ständig in das CORS rein. Ich habe versucht direkt ein iframe zu nutzen und auch auf eine Javascript oder JSON-Datei zuzugreifen. Alle bisherigen Versuche wurden durch das CORS verhindert. Auf der Sender-Seite habe ich spezielle CORS-Einstellungen ausgeführt (Drupal 9, PHP 8.1), die die Domain der Third-Part-Website als "allowed-origin" authentifizieren sollten, jedoch scheinen diese nicht richtig zu greifen, oder ich "hole" die Inhalte nicht richtig von der Third-Part-Website aus ab.

Wie kann ich denn z.B. einem iframe CORS-Informationen mitgeben? Z.B. einen "allowedHeader" oder "allowedMethod"? Ich nehme an, dass ich das benötigen könnte, um eine Art "Handshake" zwischen Sender und Empfänger Seite herzustellen. Die "X-Frame-Options" habe ich auch noch nicht durchdrungen, wie ich das mit Third-Party-Websites nutzen soll, weil es da ja nur 2 Optionen gibt: "DENY" und "SAMEORIGIN". Beides hört sich für mich unpassend an für den Verwendungszweck.

auf der Sender-Seite soll man scheinbar in einer Datei (services.yml) die CORS-Einstellungen vornehmen, diese lauten bei mir wie folgt:

Code:

cors.config:
    enabled: true
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: ['x-csrf-token','authorization','content-type','accept','origin','x-requested-with', 'access-control-allow-origin','x-allowed-header']
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: ['POST', 'GET', 'OPTIONS', 'PATCH', 'DELETE']    
    # Configure requests allowed from specific origins.
    allowedOrigins: ['https://www.third-party-website.de']
    # Sets the Access-Control-Expose-Headers header.
    exposedHeaders: []
    # Sets the Access-Control-Max-Age header.
    maxAge: false
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: true

Folgendes Script habe ich u.a. (erfolglos) ausprobiert:

Code:

function injectSameOriginIframeFromRemote(remoteSrcUrl, target, append, OPT_cb, OPT_useProxy) {
    var PROXY_BASE = 'https://cors-anywhere.herokuapp.com';
    useProxy = typeof(OPT_useProxy)==='boolean' ? OPT_useProxy : true;
    cb = typeof (OPT_cb) === 'function' ? OPT_cb : function () { };
    var iframe = document.createElement('iframe');
    if (append) {
        target.appendChild(iframe);
        iframe.style.width = '100%';
        iframe.style.height = '100%';
    }
    else {
        target.replaceWith(iframe);
    }
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4){
            if (xhr.status === 200){
                var rawHtml = xhr.responseText;
                var baseString = '';
                rawHtml = rawHtml.replace(/]+>/gim,'');
                rawHtml = rawHtml.replace(/<\/head>/gim,baseString + '\n' + '');
                iframe.contentWindow.document.open();
                iframe.contentWindow.document.write(rawHtml);
                iframe.contentWindow.document.close();
            }
            else {
                cb(false);
            }
        }
    }
    xhr.open('GET',PROXY_BASE + '/' + remoteSrcUrl);
    xhr.send();
    iframe.addEventListener('load', cb);
}

Quelle: https://joshuatz.com/posts/2019/embeddin...c-options/

Leider erschließt sich mir hier auch nicht, was die Variablen bedeuten sollen, die der Funktion übergeben werden (remoteSrcUrl, target, append, OPT_cb, OPT_useProxy), somit weiss ich auch nicht, mit was sie zu ersetzen sind beim Aufruf der Funktion.

Eine andere Variante (ebenfalls erfolglos):

Code:

let response = await fetch('https://site.com/service.json', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
    'API-Key': 'secret'
  }
});

Quelle: https://javascript.info/fetch-crossorigin


Müsste einer der Varianten funktionieren, oder ein einfaches iframe - wenn das CORS auf der Sender-Seite korrekt eingestellt ist? Soll heissen: Liegt der Fehler möglicherweise nur auf der Sender-Seite, oder liegt es an beiden, oder vllt. nur an der Empfänger-Seite?

Vielen Dank schon mal für Eure Hilfe.

Liebe Grüße,

pyretta

[rzscout]

Hi,
aus sicherheitsgründen dürfen bestimmte Cross-Site_action nicht durchgeführt werden. Da hilft nur ein Browserplugin. Es meines erachtens nur eine Möglichkeit: Iframes können mit dem Elterndokument kommunizieren. Doch das ist leider nur eine Readonly-Funktion:
https://developer.mozilla.org/en-US/docs...tentWindow

Viele Grüße

rzscout

[atokirina]

Hallo rzscout,

vielen Dank für deine Antwort.
Ich möchte überhaupt nicht mit dem Eltern-Dokument kommunizieren, ich möchte lediglich ein iFrame darstellen, das eine andere Website im Eltern-Dokument integriert sozusagen.
Quasi ein weiteres Browserfenster innerhalb der Website öffnen, um eine andere Website darzustellen, ohne dass der Website-Nutzer die Website verlassen muss.
Dazu muss ich irgendwie CORS bändigen und weiß leider nicht wie. Kannst du mir da weiterhelfen? Oder sonst wer hier im Forum?
Wär echt super.

Vielen Dank im Voraus.

liebe Grüße,

pyretta

[rzscout]

Du kannst via JavaScript ein Iframe-Element erstellen und in den DOM packen. Am Ende sprichst du eine Webseite an die du dort anzeigen möchtest. Über Ajax und PHP können die Inhalte mit deiner Seite kommunizieren. Eine direkte Kommunikation ist leider nicht möglich. Das ist das Sicherheitskonzept von gängigen Browsern wie Google Chrome, Mozilla Firefox und Microsoft Edge.

Der Zugriff auf ein Eltern-DOM ist ein Sicherheitsrisiko und deswegen nicht erlaubt. Dafür kannst du via Ajax und PHP Daten austauschen lassen. Gerne kannst du gerne über dein Vorhaben schreiben damit man eine andere Lösung fokusieren könnte. PS: Die Sicherheiteinstellungen lassen sich am lokalen Browser einstellen.

Viele Grüße

rzscout