Skip to main content

Als WebVisu ausführen

Empfehlungen zur Datensicherheit

Um das Risiko von Datensicherheitsverletzungen zu minimieren, empfehlen wir die folgenden organisatorischen und technischen Maßnahmen für das System, auf dem Ihre Applikationen laufen:

  • Verwenden Sie die neuesten Versionen des Gatewayservers und des Webservers.

  • Vermeiden Sie soweit als möglich Ihre SPS und Ihre Steuerungsnetzwerke offenen Netzwerken oder dem Internet auszusetzen.

  • Konfigurieren Sie eine HTTPS-Verbindung (Verschlüsselung mit SSL/TSL) zwischen Visualisierungsclient und Webserver.

  • Verwenden Sie zum Schutz zusätzliche Sicherungsschichten wie VPN für Remotezugriff und installieren Sie Firewall-Mechanismen.

  • Beschränken Sie den Zugriff auf autorisierte Personen.

    Beschränken Sie den Zugang zur Visualisierung und konfigurieren Sie eine Visualisierungs-Benutzerverwaltung.

  • Ändern Sie eventuell vorhandene Standardpasswörter bei der ersten Inbetriebnahme und ändern Sie diese weiterhin regelmäßig.

Tipp

Wenn Sie trotz allem Ihre WebVisu veröffentlichen möchten, wird dringend empfohlen, sie zumindest mit einem einfachen Passwortschutz zu versehen, um zu verhindern, dass jemand über Internet auf Ihre Steuerungsfunktionalität zugreifen kann.

Die webbasierte Darstellungsvariante von CODESYS Visualization ermöglicht Fernzugriff, Fernüberwachung sowie Service und Diagnose einer Anlage über das Internet. Ein Webbrowser kommuniziert SSL-verschlüsselt per Javascript mit dem Webserver der Steuerung und stellt die Visualisierung mittels HTML5 dar. Diese Technologie wird auf nahezu allen Browsern unterstützt und steht somit auch auf Endgeräten mit iOS beziehungsweise Android zur Verfügung.

Visualisierungen, die als CODESYS WebVisu ausgeführt werden, sind somit Webanwendungen, die in einem Browser dargestellt werden. Voraussetzung dafür ist, dass das Laufzeitsystem der Steuerung einen Webserver mit WebVisu-Unterstützung zur Verfügung stellt, der die Kommunikation zwischen Zielsystem und Webbrowser übernimmt. Der Webserver startet automatisch, sobald eine Applikation mit WebVisu-Konfiguration (Objekt CODESYS WebVisu) gestartet wird. Der Webserver läuft, bis alle Applikationen mit WebVisu beendet sind. Währenddessen kann in einem HTML5-fähigen Webbrowser ein Visualisierungsbenutzer über ein Endgerät die Steuerung monitoren und bedienen.

Für weitere Informationen siehe:

Darstellungsvariante konfigurieren und starten

Im Objekt WebVisu werden die anwendungsspezifischen Einstellungen für die Webanwendung konfiguriert.

Ausgangssituation: Im Projekt ist eine ausführbare Visualisierung VisuMain mit Visualisierungsmanager und Taskkonfiguration erstellt worden.

  1. Selektieren Sie das Objekt Visualisierungsmanager.

    Wählen Sie im Kontextmenü den Befehl Objekt hinzufügen → Objekt WebVisu.

  2. Benennen Sie das Objekt mit webvisu_app und bestätigen Sie Ihre Einstellungen.

    Der zugehörige Editor öffnet sich mit seinen Voreinstellungen.

  3. Konfigurieren Sie wie folgt:

    • Startvisualisierung: VisuMain

    • Name der .htm-Datei: webvisu_app

  4. Klicken Sie auf Verwendete Visualisierungen anzeigen.

    Die Registerkarte Visualisierungen öffnet sich. Dort ist dargestellt, welches Visualisierungsobjekt für welche Variante aktiviert ist.

  5. Aktivieren Sie gegebenenfalls die Visualisierung für die Variante webvisu_app.

    Die Variante ist für den Download ausgewählt.

  6. Öffnen Sie den Geräteeditor und konfigurieren Sie die Kommunikationseinstellungen zu Ihrer Steuerung.

  7. Starten Sie Ihre Steuerung mit einem geeigneten Laufzeitsystem mit Webserver und WebVisu-Unterstützung.

  8. Übersetzen, laden und starten Sie die Applikation.

    Die Applikation und der Webserver laufen.

  9. Starten Sie einen Webbrowser mit folgender Adresse: http://localhost:8080/webvisu_app.htm

    Die Webapplikation wird angezeigt. Die Visualisierung dort ist aktiv und Sie können Ihre Steuerung bedienen.

Seite im Browser aufrufen

Voraussetzung: Eine Visualisierung mit WebVisu ist gestartet.

  1. Starten Sie einen aktuellen Browser mit Javascript-Unterstützung und Unterstützung von HTML5-Canvas (beispielsweise Microsoft Edge, Google Chrome oder Mozilla Firefox).

  2. Geben Sie im Webbrowser folgende Adresse ein:

    http://localhost:8080/webvisu.htm

    Formal: http://<IP Adresses des Webservers>:<Port des Webserver>/<Name der HTM-Datei>

    <Name der HTM-Datei> ist die im Objekt WebVisu definierte HTML-Startseite der Visualisierung.

    Die Seite wird angezeigt und Sie können die Daten der Applikation sehen und die Applikation bedienen.

Webbrowser mit HTTP Security-Header aktivieren

Der Webserver im Laufzeitsystem, der die WebVisu ausführt, kann so konfiguriert werden, dass zusätzliche HTTP Security-Header ausgeliefert werden. Dies kann zum Beispiel genutzt werden, um zusätzliche Sicherheitsfunktionen wie beispielsweise X-Frame-Options zu aktivieren.

Um einen oder mehrere Header zu aktivieren, können Sie im Installationsverzeichnis von CODESYS in der Konfigurationsdatei des CODESYS Control Win Laufzeitsystems die dafür notwendigen Einstellungen konfigurieren:

Formal: <Installationsverzeichnis>/GatewayPLC/CODESYSControl.cfg

Geben Sie die Einstellungen unter Abschnitt [CmpWebServer] an.

Anmerkung

Für den Webbrowser (Teil vom CODESYS Control Win-Laufzeitsystem) wird für den HTTP Security-Header kein Standardwert angegeben. Der Header wird nicht standardmäßig aktiviert, da die Funktionalität zu sehr von der jeweiligen Umgebung abhängt.

Für weitere Informationen siehe:

Beispiel 31. Beispiel

Beim folgenden Code-Schnipsel handelt es sich um einen Auszug aus der Konfigurationsdatei CODESYSControl.cfg. Es wird der X-Content-Type-Options-Header aktiviert.

[CmpWebServer]
AdditionalHeader.0.Header="X-Content-Type-Options: nosniff"
AdditionalHeader.0.FileFilter.0="WebVisuV3.bin"
AdditionalHeader.0.ExtensionFilter.0="xml"
AdditionalHeader.0.ExtensionFilter.1="js

  • AdditionalHeader.<X>.Header ist immer erforderlich

  • AdditionalHeader.<X>.FileFilter.<Y> begrenzt AdditionalHeader.<X>.Header auf den spezifischen Dateinamen (optional)

  • AdditionalHeader.<X>.ExtensionFilter.<Y> begrenzt AdditionalHeader.<X>.Header auf die spezifische Dateierweiterung (optional).

  • AdditionalHeader.<X>.Header wird für sämtliche Dateien verwendet, wenn AdditionalHeader.<X>.FileFilter und AdditionalHeader.<X>.ExtensionFilter nicht konfiguriert sind.

Der X-Content-Type-Options-Header kann für "WebVisuV3.bin" und alle Dateien, die mit ".xml" und ".js" enden, eingefügt werden.



Standardseite bestimmen und im Webserver aufrufen

Voraussetzungen: Im Projekt sind mehrere ausführbare Visualisierungen vorhanden: visu_main, visu_for_experts. Für jede der Visualisierungen ist ein WebVisu-Objekt konfiguriert: WebVisu_main, WebVisu_for_experts. Die zugehörigen HTML-Seiten sind mit webvisu_main, webvisu_for_an_expert bezeichnet.

  1. Doppelklicken Sie das Objekt WebVisu_main.

    Der WebVisu-Editor öffnet sich.

  2. Aktivieren Sie dort die Option Als Standardseite verwenden.

    Die Startseite, die in der Eigenschaft Name der .htm-Datei angegeben ist, ist als Standard voreingestellt.

  3. Starten Sie (auf einem beliebigen Rechner) einen aktuellen Webbrowser.

  4. Geben Sie im Webbrowser nur die IP-Adresse und den Port der Steuerung, ohne den Namen der HTML-Seite:

    http://localhost:8080

    Formal:

    http://<IP-Adresse Webserber>:<Port Webserver>

    Die Standardseite webvisu_main.htm öffnet sich. Sie können die Daten der Applikation sehen und die Applikation bedienen.

  5. Geben Sie im Webbrowser auf einem anderen Gerät (beispielsweise auf Ihrem Smartphone) die folgende Adresse ein:

    http://localhost:8080/webvisu_for_an_expert.htm

    Die angegebene Visualisierung webvisu_for_an_expert.htm öffnet sich.

WebVisu identifizieren

Um eine WebVisu mit Hilfe des Bibliotheksbausteins VisuFbClientTagDataHelper identifizieren zu können, benötigt die WebVisu einen Namen. Um sie in der Applikation gezielt ansprechen zu können, erweitern Sie den URL-Aufruf mit dem Parameter ClientName=<Name>.

Beispiel:

http://localhost:8080/webvisu.htm?ClientName=VisClientxy

Verschlüsselte HTTPS-Verbindung verwenden

Wichtig

Bevorzugen Sie die Verwendung CA-signierter Zertifikate.

Anmerkung

Damit ein Zertifikat vom Browser als sicher bewertet werden kann, muss dieses von einer Zertifizierungsstelle signiert worden sein. In der Regel hat jeder Browser eine Liste von vertrauenswürdigen Zertifizierungsstellen. Ein solches Zertifikat kann vom Browser selbst geprüft werden, so dass keine Warnmeldung im Browser erscheint, wenn eine sichere Verbindung aufgebaut wird. Das Signieren eines Zertifikats von einer dieser vertrauenswürdigen Zertifizierungsstellen erfolgt üblicherweise nicht kostenlos.

Alternativ können Sie ein selbst erstelltes Zertifikat verwenden. Der Nachteil dabei: Dieses Zertifikat muss im Browser geprüft werden. Der Browser gibt einen Warnhinweis aus, dass der Verbindung nicht vertraut wird. Sie können dann eine Ausnahme hinzufügen, so dass dieser Warnhinweis nicht jedes Mal erscheint, wenn diese Verbindung geöffnet wird. Um zu gewährleisten, dass tatsächlich mit der richtigen Steuerung kommuniziert wird, ist es aber notwendig, den Signaturwert des Zertifikats mit dem Signaturwert des Zertifikats auf der eigenen Steuerung zu vergleichen!

Um über eine HTTPS-Verbindung eine sichere Verbindung zwischen Ihrem Browser und dem Webserver aufzubauen, wird ein Zertifikat benötigt. Am besten installieren Sie dafür ein gültiges Steuerungszertifikat für eine verschlüsselte Kommunikation mit Hilfe des CODESYS Security Agent.

Prozedur. CODESYS Security Agent installieren

  1. Wählen Sie den Befehl Ansicht → Store und melden Sie sich an.

  2. Suchen Sie den CODESYS Security Agent und starten Sie den Download.

    Das Package wird installiert und erscheint in der Liste Bereits installierte Packages.

  3. Beenden Sie den Dialog.

Prozedur. Zertifikat erstellen

  1. Konfigurieren Sie für Ihr Gerät die Kommunikationseinstellungen und den Gateway.

  2. Wählen Sie den Befehl Ansicht → Security-Screen und wählen Sie die Registerkarte Geräte.

  3. Klicken Sie dort auf das Symbol _csa_icon_refresh.png.

    Die Ansicht informiert jeweils für die im Netz gefundenen Geräte über bereits installierte Zertifikate und stellt Befehlssymbole für das Zertifikatshandling bereit.

  4. Selektieren Sie in der linken Informationsliste das Gerät, mit dem Sie sich sicher verbinden wollen.

    Die rechte Informationsliste zeigt abhängig vom Verbindungskanal die Zertifikate an, die auf diesem Gerät vorhanden sind. So können beispielsweise für die Verbindungskanäle OPC UA-Server, Verschlüsselte Kommunikation, Verschlüsselte Applikation und Webserver Zertifkate vorhanden sein. Gegraute Kanäle, die mit (nicht verfügbar) markiert sind, haben noch kein Zertifikat.

  5. Wählen Sie in dieser Informationsliste den Kanal Webserver und klicken Sie links daneben auf das Symbol _csa_icon_create_cert.png.

    Ein Dialog für Zertifikateeinstellungen öffnet sich.

  6. Stellen Sie die Schlüssellänge beispielsweise auf 3072 und die Gültigkeitsdauer auf 365 Tage ein und beenden Sie den Dialog mit OK.

    Hinweis: Die Gültigkeitsdauer sollte aus Sicherheitsgründen möglichst kurz sein. Allerdings ist das ständige Aktualisieren des Zertifikats aufwendig. Wenn Sie das Zertifikat längerfristig benötigen, dann sollten Sie gut zwischen Sicherheit und Bequemlichkeit (seltene Zertifikatsaktualisierung) abwägen.

    Nun wird ein Zertifikat für den Webserver erstellt. Mit Beendigung des Vorgangs werden die Zertifikatsdaten in der Registerkarte angezeigt.

  7. Starten Sie daraufhin Ihr Gerät zusammen mit dem Laufzeitsystem neu.

  8. Laden Sie die Applikation mit der Visualisierung für die CODESYS WebVisu auf dieses Gerät.

    Ihr Gerät ist für eine sichere Verbindung vorbereitet.

Prozedur. HTTPS-Verbindung aufbauen

  1. Öffnen Sie Ihren Browser und geben Sie die URL-Adresse Ihrer WebVisu ein, beispielsweise https://localhost:443/webvisu.htm

    Die URL folgt dem Schema https://<IP-Adresse/URL>:443/<Name der HTM-Datei>.htm.

    Der HTML-Dateiname muss mit dem in der Konfiguration im Visualisierungsmanager im Objekt WebVisu übereinstimmen. Die IP-Adresse entnehmen Sie Ihrer Gerätekonfiguration.

    Der Browser baut eine Verbindung auf. Wenn das Zertifikat nicht vertrauenswürdig eingestuft ist, erscheint ein Sicherheitshinweis.

  2. Bestätigen Sie, dass Sie das Risiko kennen und fortfahren möchten.

    Sie haben ein so genanntes selbst signiertes Zertifikat erstellt. Dessen Gültigkeit kann beispielsweise über den Daumenabdruck verifiziert werden, indem Sie den Daumenabdruck sich im Browser anzeigen lassen und dann mit dem Wert aus dem Security-Agent vergleichen.

    Die Seite mit der WebVisu startet nun. Im Browser weist das Schlosssymbol auf eine sichere Kommunikation hin.

    _cds_img_clientobjectsdemo.png

Wichtig

BeagleBone Black

Wenn Sie als Visualisierungsgerät ein BeagleBone Black verwenden, müssen Sie beachten, dass ein BeagleBone Black bei seinem Webserver den Port 9090 verwendet. Eine gültige IP-Adresse ist folglich: http://192.168.7.2:9090/webvisu.htm

In diesem Abschnitt:
Siehe auch: