Anwendung
TwinCAT HMI in einem IFrame
Um einen TwinCAT-HMI Server in einem IFrame nutzen zu können sind mehrere Einstellungen am Server notwendig. Ein Web Server blockiert aus Security Sicht das einbinden in einer anderen Web Oberfläche. Das Deaktivieren oder Einschränken dieser Funktion muss Sicherheitstechnisch vom Anwender bewertet werden.
- 1. Öffnen Sie die Server Konfigurationsseite.
- 2. Gehen Sie auf den Reiter TcHmiSrv / Sicherheit.
- 3. Passen Sie den Eintrag SameSite-Attribut an ihrer Bewertung an. (None deaktiviert die gesamte Funktionalität)
- 4. Passen Sie den Eintrag Zulässige Ursprünge an ihrer Bewertung an.
- 5. Bestätigen Sie die Änderung mit einem Klick auf den Button Akzeptieren.
- Der Server lässt nun das einbinden in einem IFrame von einer fremden Seite zu.
Message:
Wenn sie den TwinCAT HMI Servers im IFrame anzeigen möchten, besteht die Möglichkeit über Messages Info an den Client zu senden. Dies kann interessant sein, um den Splash Screen zu deaktivieren, das Theme oder die Sprache umzuschalten.
Attribute | Beschreibung |
|---|---|
'System.hideSplashScreen' | Mit System.hideSplashScreen wird der Ladebildschirm (SplashScreen) unterdrückt. Hierdurch wirkt die eingebettete TwinCAT HMI nicht wie ein Fremdkörper. |
'Theme.set' | Mit Theme.set wird der Theme im eingebeteten TwinCAT HMI auf den angegebenen Wert geändert. Hierdurch kann die TwinCAT HMI in einem zur Hauptseite entsprechenden Theme angezeigt werden und nicht nur im Default. |
'Locale.set' | Mit Local.set wird die Sprache im eingebetteten TwinCAT HMI auf den angegebenen Wert geändert. Hierdurch lässt sich die TwinCAT HMI an die Sprache der Hauptvisualisierung anpassen. |
Beispiel:
// get the iframe control
let someControl = TcHmi.Controls.get('TcHmiIFrame');
if (someControl !== undefined) {
// get the iframe element
let iFrameElement = someControl.getElement()[0].querySelector("iframe");
if (iFrameElement) {
const postMessageSender = (event) => {
if (!event.data?.messageType) {
return; // No tchmi answer. perhaps react devtools?
}
// hide splash screen
iFrameElement.contentWindow.postMessage(
{
messageType: 'System.hideSplashScreen',
},
"*",
);
// set theme with the active theme
iFrameElement.contentWindow.postMessage(
{
messageType: 'Theme.set',
themename: TcHmi.Theme.get()
},
'*'
);
// set locale with the active locale
iFrameElement.contentWindow.postMessage(
{
messageType: 'Locale.set',
locale: TcHmi.Locale.get()
},
'*'
);
// remove event
window.removeEventListener("message", postMessageSender);
};
// add event on message, checked the state of the other side
window.addEventListener("message", postMessageSender);
}
}Benutzerverwaltung:
Kommt ein HMI-Server in einem IFrame zum Einsatz muss dieser Authentifiziert werden. Standardmäßig öffnet sich hier die Login Seite oder es wird der Auto-Login Nutzer angemeldet. In diesem Fall können die Benutzer zwischen der Haupt HMI und der unterlagerten HMI unterschiedlich sein. Um dies zu umgehen, besteht die Möglichkeit die OAuth Extension in Verbindung mit SSO zu nutzen. In beiden HMIs wird derselbe Benutzer angemeldet mit den entsprechenden Berechtigungen. Damit die Endpoints des Authentifikation Server in einem IFrame laufen müssen auch hier die Entsprechenden Server Anpassungen vorgenommen werden.
Keycloak:
Passen Sie die Einstellung Content-Security-Policy des Servers an und erweitern Sie den Eintrag frame-ancestors um die entsprechende IP oder HostName des Remotesystems, über die die HMI aufgerufen wird.
Die Einstellung muss aus Security Sicht bewerten werden, da diese Fremdzugriffe auf das System zulässt.