Create a cockpit plugin with iframe to display a local page

[jfrd22]

Existing system:

• Ubuntu 20.04.6 LTS
• Cockpit V215

Hello everyone,

I created the example plugin "pinger" for the Cockpit user interface according to the following instructions:
https://cockpit-project.org/blog/creating-plugins-for-the-cockpit-user-interface.html
This also worked great.

Now I wanted to extend the plugin with an iframe. Here, for example, the "Portainer" page should be displayed
-> https://localhost:9443. Unfortunately, this did not work at first, the iframe in Cockpit remains empty. I call up Cockpit with http://localhost:9090. I have already tried a few things. But I'm not really getting anywhere. Does anyone have an idea how I could solve this?

Illustration of the problem:

This comment is about the same source, isn't the source for my application localhost?
#19182 (comment)

I also get a CSP message in the developer mode of the browser:
"Content Security Policy: The page's settings blocked the loading of a resource https://localhost:9443"

I didn't change anything in the network settings, just installed local Cockpit and Portainer

Thank you 🙏

[jelly]

You can change the CSP policy of your plugin in's manifest.json, see for example https://github.com/cockpit-project/cockpit/blob/main/pkg/playground/manifest.json#L47

You likely want to set frame-src https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src

[jfrd22]

Thank you very much for your help, I will try it out today at noon. Unfortunately, I'm a bit of a stranger to frontend and backend web development. If I still have a question, I will be happy to contact you again.

[jfrd22]

It worked! many thanks and best regards...