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