Display grafana-web-page inside webvisu

CODESYS
1

hi there,

i’m using a compact-controller 100 - plc-prg, docker with influxdb- and grafana-images on it. All works fine - but:

In the codesys-visu i’m using the browser-element in the hope of displaying the grafana-web-page there.
The URL was set as http://xxx.xxx.xxx.xxx:3000…pagewithgraphics…
It worked when used in the normal webbrowser, but inside the visu-element it doesn’t. A grey frame appears with the message: Website is blocked - contact the user.
Can this have to do with the grafana-proxy-setting?
I already tried different settings in the grafana-ini and my web-knowledge is still expandable! Can someone help?

2

Hi @schweichichi,
For security reason embedding webpage in another is by default disabled.
To allow embedding, you can modify the grafana config file, but it looks more convenient to do it using an environment variable, so you can add the following parameter to your docker run command :

-e "GF_SECURITY_ALLOW_EMBEDDING=true" -e "GF_AUTH_ANONYMOUS_ENABLED=true"

The first allow embedding and the second disable the authentication, this is probably what you want to consider.

image
image1385×683 60.8 KB

Also you will have to enable http port on the CC100 WBM, since embedding http iframe in http webpage isn’t allowed.

You need to modify the lighttpd web server configuration of the CC100.
Edit the file /etc/lighttpd/webvisu.conf

Change the line

setenv.set-response-header  += ("Content-Security-Policy" => "default-src 'self' 'unsafe-inline'”)

by :

setenv.set-response-header  += ("Content-Security-Policy" => "default-src 'self' 'unsafe-inline';frame-src * 'unsafe-inline' 'unsafe-eval'")

Restart the webserver :

/etc/init.d/lighttpd restart

Of course you should consider the security impacts of doing this…

You should add the kiosk parameter in the iframe URL in order to hide the menu, example :

http://[grafanaURL]:3000/d/[dashboardID]/[dashboardname]?kiosk
4 Likes
3

Hi Quentin,

this works really great - thank you!

The controller and panel are part of a local application without a NAT, an insecure connection is ok in this case.

Thank’s a lot!

1 Like
4

Does this still work? I’m using a EdgeController with CoDeSys 3.5 FW25.

    $HTTP["url"] =~ "^/webvisu/?" {
        var.response_header_policy_webvisu = (
            # CSP for WebVisu, allowing inline sources.
            #"Content-Security-Policy" => "default-src 'self' 'unsafe-inline'",
			"Content-Security-Policy" => "default-src 'self' 'unsafe-inline';frame-src * 'unsafe-inline' 'unsafe-eval'",

            # Tell older browsers that this page can only be displayed if all ancestor
            # frames are same origin to the page itself.
            "X-Frame-Options" => "SAMEORIGIN"
        )

Still get “Content blocked” message when trying to display Grafana as embedded “browser control” in my visualization.

— Edit
Not sure where it went wrong, but this still works on EdgeController as well.

To be able to display Grafana on TP600, you will have to use an older version of Grafana. The latest version I found supported by the TP600’s browser is 7.5.7

5

Hello,

I am looking to display an IP camera on the TP600. Ex: http:///video.mjpeg

This topic sounds similar as the IP camera is displayed via http.

However, when i first test to see if i can display the wago community website i receive the following error displayed:

image
image1181×870 10.2 KB

Any thoughts?

Thanks,

6

I’m not sure https allows to display http content.
Maybe you should try enable http and try with http://192.168.1.169/webvisu URL.
Have you modified the webserver config as mentionned upper ?

8

I was using a PFC100 2nd gen and there was not a webvisu.conf file located in /etc/lighttpd…

I switched over to a 762-5304 since this is what will be used for the project. Because I am running target visualizations I had no need to edit that file.

I setup the network configuration for the TP600 to DHCP and connected it to the network that has internet access.

I used the ‘Special Controls’>‘Web Browser’ from the Visualization toolbox. This web browser allowed me to connect to web links including the IP camera and display a live feed.

Notes:

  1. The camera needs to be compatible with a modern browser (I had to update the firmware (my camera was 6yrs old)).
  2. The camera feed can not exceed the resolution of the display (762-5304 = 1280x800px)
9

@quenorha I am doing the same, I have Codesys 3.5 and wago PFC 200, I want to embed the web page object in the runtime, and connect the grafana dashboard over the container IP shared address. Is this procedure valid also for the hardware + software mentioned ?
Thank you.

10

Should work as well.
Please note that there might be some adaptation to be made in the /etc/lighttpd/webvisu.conf config file, depending on the firmware version.

11

Both on CC100 (751-9301) and TP600 (762-4103) it seems the config-file is now located under:
/etc/lighttpd/apps.confd/webvisu.conf

1 Like
12

I think this is a change in FW28

13

Forgot to write the FW I’m running, but this new path is also in FW27 (which I’m running)

1 Like