以 WebVisu 身份运行

数据保护建议

为了最大限度地降低数据安全漏洞的风险，我们建议对运行应用程序的系统采取以下组织和技术措施：

使用最新网关服务器和 Web 服务器的版本。
尽可能避免将您的 PLC 和控制器网络暴露在公共网络或互联网中。
在可视化客户端和 Web 服务器之间配置 HTTPS 连接（使用 SSL/TSL 加密）。
使用额外的数据链路层进行保护，例如用于远程访问的VPN，并安装防火墙机制。
限制授权人员的访问。
限制对可视化的访问并配置可视化用户管理。
在调试时，更改任何现有的默认密码，并定期更改。

提示

如果你仍然想发布你的 WebVisu，那么我们强烈建议您至少为其分配一个基本密码保护防止通过互联网访问您的 PLC 的功能。

基于网络的显示变体CODESYS Visualization支持通过互联网对工厂进行远程访问、远程监控以及维护和诊断。Web浏览器通过JavaScript与控制器的Web服务器进行SSL加密通信，并通过HTML5显示可视化效果。几乎所有浏览器都支持这项技术，因此iOS和Android终端均可使用。

运行方式如下：CODESYS WebVisu因此，它们是显示在浏览器中的 Web 应用程序。为此，控制器的运行时系统必须提供一个支持 WebVisu 的 Web 服务器，该服务器负责接管目标系统与 Web 浏览器之间的通信。只要使用 WebVisu 配置启动应用程序，Web 服务器就会自动启动（CODESYS WebVisu对象）。Web 服务器一直运行，直到所有使用 WebVisu 的应用程序结束。在此期间，可视化用户可以在终端中使用支持 HTML5 的 Web 浏览器来监控和操作控制器。

有关详细信息，请参阅：For more information, see:

配置并启动显示变量

Web 应用程序的特定于应用程序的设置在WebVisu目的。

初始情况：可执行的可视化VisuMain使用可视化管理器在项目中创建任务配置。

选择可视化管理器目的。
在上下文菜单中，单击添加对象 → WebVisu 对象。
将对象命名为webvisu_app并确认设置。
相应的编辑器以其默认设置打开。
配置如下：
- 开始可视化：VisuMain
- .htm 文件的名称：webvisu_app
点击显示已使用的可视化。
这可视化选项卡打开。此处显示针对哪个变量激活了哪个可视化对象。
如果需要，激活变量的可视化webvisu_app。
已选择要下载的变体。
打开设备编辑器并配置控制器的通信设置。
使用具有 Web 服务器和 WebVisu 支持的合适运行时启动您的控制器。
编译、下载并启动应用程序。
应用程序和 Web 服务器正在运行。
使用以下地址启动 Web 浏览器：http://localhost:8080/webvisu_app.htm
Web 应用程序已显示。可视化功能已激活，您可以操作控制器。

在浏览器中调用页面

要求：使用 WebVisu 启动可视化。

启动当前支持 JavaScript 和 HTML5 画布的浏览器（例如，Microsoft Edge、Google Chrome 或 Mozilla Firefox）。
在 Web 浏览器中指定以下地址：
```
http://localhost:8080/webvisu.htm
```
正式名称：http://<Web 服务器的 IP 地址>:<Web 服务器的端口>/<HTM 文件的名称>
<HTM 文件的名称> 是WebVisu目的。
页面显示出来，可以看到应用的数据，应用正在运行。

使用“HTTP 安全”标头启用 Web 浏览器

运行 WebVisu 的运行时系统中的 Web 服务器可以配置为提供额外的“HTTP 安全”标头。例如，这可用于启用 X-Frame-Options 等附加安全功能。

要启用一个或多个标头，您可以在安装目录中配置必要的设置CODESYS在配置文件中CODESYS Control Win运行时系统：

正式的：<安装目录>/GatewayPLC/CODESYSControl.cfg

指定设置[CmpWebServer]部分。

注意

对于网络浏览器（CODESYS Control Win在运行时系统中，未为“HTTP 安全”标头指定默认值。由于该功能过于依赖于环境，因此默认情况下不启用该标头。

有关详细信息，请参阅：For more information, see:

CODESYS Control

例 31. 例子

以下代码片段摘录自CODESYSControl.cfg配置文件。X-Content-Type-Options 标头已启用。

[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始终是必需的。
AdditionalHeader.<X>.FileFilter.<Y>限制AdditionalHeader.<X>.Header到指定的文件名（可选）。
AdditionalHeader.<X>.ExtensionFilter.<Y>限制AdditionalHeader.<X>.Header到指定的文件扩展名（可选）。
AdditionalHeader.<X>.Header用于所有文件时AdditionalHeader.<X>.FileFilter和AdditionalHeader.<X>.ExtensionFilter未配置。

可以将 X-Content-Type-Options 标头插入为“WebVisuV3.bin“以及所有以“结尾的文件”.xml“ 和 ”.js“。

确定并调用 Web 服务器中的默认页面

要求：项目中有多个可执行可视化文件（visu_main，visu_for_experts )。为每个可视化配置一个 WebVisu 对象 ( WebVisu_main，WebVisu_for_experts）。相应的 HTML 页面名为webvisu_main和webvisu_for_an_expert。

双击对象WebVisu_main。
WebVisu 编辑器打开。
选择用作默认页面选项。
指定的起始页HTM文件的名称属性设置为默认值。
启动当前的 Web 浏览器（在任何计算机上）。
在 Web 浏览器中仅指定控制器的 IP 地址和端口，而不指定 HTML 页面的名称：
http://localhost:8080
正式的：
http://<Web 服务器的 IP 地址>:<Web 服务器的端口>
默认页面webvisu_main.htm打开后，可以看到应用程序的数据，并且应用程序正在运行。
在 Web 浏览器中，在另一台设备（例如智能手机）上指定以下地址：
```
http://localhost:8080/webvisu_for_an_expert.htm
```
指定的可视化webvisu_for_an_expert.htm打开。

识别 WebVisu

能够通过库 POU 识别 WebVisu VisuFbClientTagDataHelper，WebVisu 需要一个名称。为了能够在应用程序中直接访问它，您可以使用参数扩展 URL 调用ClientName=<name>。

例子：

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

使用加密的 HTTPS 连接

重要

优先使用 CA 签名的证书。

注意

浏览器认为证书安全，必须由证书颁发机构签名。通常，每个浏览器都有一个受信任的证书颁发机构列表。浏览器本身可以检查此类证书，以便在建立安全连接时浏览器中不会出现警告消息。从这些受信任的证书颁发机构签名证书通常需要付费。

或者，您也可以使用自己创建的证书。缺点是必须在浏览器中检查此证书。浏览器会发出连接不受信任的警告。您可以添加例外，这样每次打开此连接时就不会出现此警告。但是，为了确保通信确实与正确的控制器进行，需要将证书的签名值与您自己的控制器上的证书签名值进行比较。

需要证书才能通过 HTTPS 连接在浏览器和 Web 服务器之间建立安全连接。建议使用CODESYS Security Agent安装有效的控制证书以进行加密通信。

过程. 安装CODESYS Security Agent

点击查看 → 商店并登录。
搜索CODESYS Security Agent并开始下载。
该软件包已安装并列在已安装的软件包。
退出对话框。

过程. 创建证书

配置设备的通信设置和网关。
点击查看 → 安全屏幕并选择设备选项卡。
点击那里的符号。
该视图会通知您有关网络中找到的设备已安装的证书，并提供用于证书处理的命令图标。
在左侧信息列表中，选择需要建立安全连接的设备。
根据连接通道，右侧信息列表显示此设备上可用的证书。例如，证书可能存在于OPC UA服务器，加密通信，加密应用程序，和Web 服务器通信渠道。禁用（灰色）的渠道标记为（无法使用）没有证书。
在此信息列表中，选择Web 服务器频道并点击符号。
将打开一个证书设置对话框。
设置密钥长度（例如：3072）和有效期（例如：365天）。点击好的关闭对话框。
注意：出于安全考虑，证书有效期应尽可能短。然而，持续更新证书非常耗时。如果您需要长期使用证书，则应在安全性和便捷性（证书更新频率不高）之间谨慎权衡。
现在已为 Web 服务器创建了证书。操作完成后，证书数据将显示在选项卡上。
然后重新启动您的设备和运行时。
下载带有可视化效果的应用程序CODESYS WebVisu到此设备。
您的设备已准备好进行安全连接。

过程. 建立 HTTPS 连接

打开浏览器并指定 Web 服务器的 URL 地址（例如：https://localhost:443/webvisu.htm）。
URL 的格式如下： https:// <IP 地址/URL> :443/<HTM 文件的名称>.htm。
HTML 文件名必须与可视化管理器中的配置名称相匹配WebVisu对象。您可以从设备配置中获取 IP 地址。
浏览器建立连接。如果证书不受信任，则会显示安全通知。
确认您了解风险并希望继续。
您已创建自签名证书。其有效性可以通过以下方式验证：指纹通过在浏览器中显示指纹，然后与安全代理的值进行比较。
现在 WebVisu 页面启动了。浏览器中的锁定符号表示安全通信。

重要

BeagleBone 黑色

如果您使用 BeagleBone Black 作为可视化设备，则需要注意 BeagleBone Black 使用端口 9090 作为其 Web 服务器。有效的 IP 地址如下：http://192.168.7.2:9090/webvisu.htm

本节内容如下:

参见: