Javascript Ausgabe aus externer Datei: Laden von gemischten aktiven Inhalten blockiert

SunnyCue · Jan 23rd 2023

Hallo Community,

ich versuche derzeit folgenden in einem Template zu nutzen:

Code

<div id="output"></div>

<script data-relocate="true">
const output = document.getElementById("output");

const xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.4homepages.de/version/version.php", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    output.innerHTML = xhr.responseText;
  }
};
xhr.send();
</script>

Display More

In der Konsole steht:

Quote

Laden von gemischten aktiven Inhalten "http://www.4homepages.de/version/version.php" wurde blockiert.
Error: Promised response from onMessage listener went out of scope

Was kann ich da machen?

SoftCreatR · Jan 23rd 2023

https statt http verwenden.

SunnyCue · Jan 23rd 2023

Danke, dass bringt nunmehr diesen Fehler:

Quote

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://www.4homepages.de/version/version.php. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Das scheint wohl irgendein Schutz-Mechanismus zu sein ? Von Woltlab oder dem Browser direkt?
Ein Umgehen scheint nicht möglich, jedenfalls so, dass man natürlich keine Sicherheitslücken produziert?

Ich binde das direkt in ein Template ein, von einem Plugin-Bau habe ich keine Ahnung.

**Tim Düsterhus** · Jan 23rd 2023

Hallo,

Quote from SunnyCue

Von Woltlab oder dem Browser direkt?

vom Browser direkt, damit man nicht fremde Webseiten auslesen kann (beispielsweise Gmail oder einen anderen Webmailer).

In diesem Fall ist das ganze offenbar so gedacht, dass die Datei in einem <script>-Tag als Quelle eingebunden wird und dann zwei (globale) Variablen setzt. Über einen AJAX-Request funktioniert das nicht.

Ich weise darauf hin, dass ein derartiges Skript dann mit vollen Rechten der Seite läuft und potentiell in der Lage ist, sensible Daten zu stehlen oder Aktionen im Namen des Nutzers auszuführen. Ansonsten natürlich der obligatorische Datenschutzhinweis beim Einbetten externer Resourcen.

SunnyCue · Jan 23rd 2023

Vielen Dank für die Info.

Gibt es einen Umweg? Das ich die Daten zuvor mit einem PHP Script abrufe und als Datei hinterlege und dann auf die Datei auf dem eigenen Server zugreife und auslese?

mfg

**Tim Düsterhus** · Jan 23rd 2023

Hallo,

für eine sinnvolle Antwort, müsste man wissen, was überhaupt dein Ziel ist. In diesem Fall scheint der Inhalt eine Art Versionsprüfung für irgendetwas zu sein. Es macht dann wenig Sinn, die Daten nur einmalig abzurufen und irgendwo abzulegen.

SunnyCue · Jan 23rd 2023

Hallo,

ich möchte tatsächlich einer Versionsprüfung vollziehen. Die 4images-Software selbst macht das so:

PHP

        <script language="JavaScript" type="text/javascript" src="http://www.4homepages.de/version/version.php"></script>
        <script language="JavaScript" type="text/javascript">
        <!--
        if ('<?php echo SCRIPT_VERSION; ?>' != latestversion) {
          document.write(latestversioninfo);
        }
        // -->
        </script>

Ich möchte auf meiner Seite manuell meine Software-Version angeben und wie im Eingangspost nachprüfen, ob es eine neue Version gibt.
Öffne ich die Seite stimmt die Version oder eben es wird mir angezeigt, dass eine neue Version verfügbar ist.

Nur das ich das ganze entsprechend im Template nutzen, was ja aufgrund des Schutzes noch nicht funktioniert.

**Tim Düsterhus** · Jan 23rd 2023

Hallo,

die simple Lösung wäre, es einfach genau so wie in dem Codebeispiel zu machen. Das ist nicht besonders schön, aber funktioniert, wenn das Ziel ist, dass die Ausgabe „nur für dich“ gedacht ist. Alternativ kannst du das ganze natürlich durch einen Server leiten lassen (ähnlich wie der ImageProxy), aber das erfordert dann weitergehende Programmierkenntnisse.

SoftCreatR · Jan 23rd 2023

PHP

<?php

namespace wcf\action;

use GuzzleHttp\Exception\GuzzleException;
use GuzzleHttp\Psr7\Request;
use GuzzleHttp\Psr7\Uri;
use Laminas\Diactoros\Response\JsonResponse;
use wcf\system\io\HttpFactory;

class FourImagesVersionAction extends AbstractAction
{
    const AVAILABLE_DURING_OFFLINE_MODE = true;

    private $latestVersion = '';
    private $latestVersionLink = '';

    /**
     * @inheritDoc
     */
    public function readParameters(): void
    {
        $this->readParameters();

        $request = new Request(
            'GET',
            (new Uri())
                ->withScheme('https')
                ->withHost('4homepages.de')
                ->withPath('version/version.php')
        );

        try {
            $response = HttpFactory::makeClientWithTimeout(2)->send($request);
            $body = (string)$response->getBody();

            \preg_match("~latestversion='([^']*)'~i", $body, $latestVersion);

            if (!empty($latestVersion[1])) {
                $this->latestVersion = $latestVersion[1];

                \preg_match('~<a href="([^"]*)"~i', $body, $latestVersionLink);

                if (!empty($latestVersionLink[1])) {
                    $this->latestVersionLink = $latestVersionLink[1];
                }
            }
        } catch (GuzzleException $e) {
            // ignore
        }
    }

    /**
     * @inheritDoc
     */
    public function execute(): JsonResponse
    {
        parent::execute();

        return new JsonResponse(
            [
                'latestVersion' => $this->latestVersion,
                'link' => $this->latestVersionLink,
            ],
            200,
            [
                'access-control-allow-origin' => '*',
            ]
        );
    }
}

Display More

**Tim Düsterhus** · Jan 23rd 2023

Hallo,

Quote from SoftCreatR

class FourImagesVersionPage extends AbstractPage

würde ich mittlerweile auf Basis von AbstractAction umsetzen. Mit WoltLab Suite 5.5 kann man dann direkt relativ sauber die Laminas JsonResponse benutzen und ist auch zukunftssicher für die PSR-15-Controller ab WoltLab Suite 6.0.

Quote from SoftCreatR

$response = HttpFactory::makeClient()->send($request);

Ansonsten empfiehlt sich immer einen Client mit selbst gewähltem Timeout zu erstellen, insbesondere ohne Caching erspart man sich so potentiell endlose Wartezeiten.

SoftCreatR · Jan 23rd 2023

Quote from Tim Düsterhus

würde ich mittlerweile auf Basis von AbstractAction umsetzen. Mit WoltLab Suite 5.5 kann man dann direkt relativ sauber die Laminas JsonResponse benutzen und ist auch zukunftssicher für die PSR-15-Controller ab WoltLab Suite 6.0.

Hatte ich kurz überlegt, ja

Quote from Tim Düsterhus

Ansonsten empfiehlt sich immer einen Client mit selbst gewähltem Timeout zu erstellen, insbesondere ohne Caching erspart man sich so potentiell endlose Wartezeiten.

Stimmt, das hatte ich vergessen.

Ich passe das mal kurz an

EDIT:

Done.

SunnyCue · Jan 23rd 2023

Wow, ihr seid so spitze.

Danke für die Hilfe, Danke für die Zeit.

mfg

Javascript Ausgabe aus externer Datei: Laden von gemischten aktiven Inhalten blockiert

Tim Düsterhus Jan 23rd 2023

Participate now!

Share