forwarding third-party application local port #19051

zhaojing1987 · 2023-07-03T04:06:41Z

zhaojing1987
Jul 3, 2023

I want to develop a plugin for cockpit, which can integrate a third-party application. This third-party application is deployed by docker compose, and I don't want to expose it to the outside world, so I didn't map any external ports. But I want to embed this third-party application in my cockpit plugin by using iframe, but I only have an internal IP and port. When I access the internal address in the iframe src in the browser, the network is not reachable. But I don't want to use a proxy server like nginx, and I don't want to expose any ports to the outside. My goal is to access an internal service through the cockpit plugin. Do you have any suggestions?

martinpitt · 2023-07-03T04:39:04Z

martinpitt
Jul 3, 2023
Maintainer

So I assume that third-party app is reachable from inside the server that you log into, but not from the browser's iframe.

This is possible with a raw channel. Depending on your third-party app you need to use the
http-stream channel type, or the generic stream channel if the app is not speaking HTTP, but another socket protocol. Both can do TCP and Unix sockets. That acts similarly to a reverse proxy, or even more similarly to SSH port forwarding.

Cockpit-machines has the exact same situation with its VNC console: The VNC server is only listening on localhost. That port gets "forwarded" to the cockpit page as channel. The URL gets computed here. Then path is an URL path that looks like "/cockpit/channels/123abc", which your page can connect to, and it will talk to the remote port.

1 reply

zhaojing1987 Jul 3, 2023
Author

Thank you very much for your answer, but I don't have any specific ideas on how to practice it. Can you give me some demos。
My third-party application is a complete web application with its own page。The purpose is to embed this complete third-party application into an iframe, and it can be used normally。I tried to write some code, but it doesn't seem to work

<head>
    <script type="text/javascript" src="../base1/cockpit.js"></script>
    <link rel="manifest" href="./manifest.json" />
</head>
<iframe id="my-iframe" src="" width="1200" height="800"></iframe>
    <script type="text/javascript">
        window.onload = function () {
            var iframe = document.getElementById("my-iframe");

            var channel = cockpit.channel({
                payload: "http-stream2",
                binary: true,
                address: "172.18.0.2",
                port: 9000,
                method: "GET",
                path: "/",
            });

            channel.addEventListener("ready", function (event, options) {
                var uri = cockpit.transport.uri("channel/" + cockpit.transport.csrf_token);
                var id = channel.id;
                var url = uri + "/" + id
                iframe.src = url;
            });
        };
    </script>

Browser error：
Security bug: at http://47.92.222.186:9000/cockpit/ The content of $f433c6213d78b0b082acfe6c0d35ae00e58f4b87892e753ef0d571e654fc7791/test/index. html #/cannot be loaded or linked to ws://47.92.222.186:9000/cockpit/channel/a2d1abae199c558c1851b25556621a6d7b5ec7d14cbb688cab01eeddbda9f383/3:2! 1.

zhaojing1987 · 2023-07-04T02:34:15Z

zhaojing1987
Jul 4, 2023
Author

cockpit.transport.wait(() => {
                const prefix = (new URL(cockpit.transport.uri("channel/" + cockpit.transport.csrf_token))).pathname;

                const query = JSON.stringify({
                    payload: "http-stream2",
                    address: "172.18.0.2",
                    port: 9000,
                    method: "GET",
                    path: "/"
                });

                const path = `${prefix}?${window.btoa(query)}`;
                iframe.src = path;
            })

This is my modified code，This is my modified code, but when loading this URL, its JavaScript and CSS cannot load properly。By implementing this method, the result is similar to that of cockpit.http, which I have tried before。
Is there anything else you haven't noticed ？？？？ @martinpitt

0 replies

martinpitt · 2023-07-04T08:13:22Z

martinpitt
Jul 4, 2023
Maintainer

Ah, I didn't realize that you want to embed this as a HTML iframe.

iframe.src = path;

That will most likely not work, due to Content-Security-Policy restrictions, and possibly also because you log into cockpit through https://, and try to embed an unencrypted http:// iframe.

Sorry, I'm afraid there is no existing demo for that, and I don't have an off-hand idea how to do this. This will require some playing around and checking the browser errors.

2 replies

zhaojing1987 Jul 4, 2023
Author

I have modified cockpit to HTTP access。I don't know if it's a path issue with CSS or JS, this is the path requested by the browser
http://IP:9090/cockpit/channel/ccb48841f8b4e6847bd77bd5e1969d258aa8bfdff3f0998ff8300e8d70b6d0bb/runtime.c71a1ffae4185c94ac2f.js
Browser Return：404 Not Found

zhaojing1987 Jul 4, 2023
Author

Can embedding an iframe be achieved through the channel of cockpit?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

forwarding third-party application local port #19051

{{title}}

Replies: 3 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

forwarding third-party application local port #19051

zhaojing1987 Jul 3, 2023

Replies: 3 comments · 3 replies

martinpitt Jul 3, 2023 Maintainer

zhaojing1987 Jul 3, 2023 Author

zhaojing1987 Jul 4, 2023 Author

martinpitt Jul 4, 2023 Maintainer

zhaojing1987 Jul 4, 2023 Author

zhaojing1987 Jul 4, 2023 Author

zhaojing1987
Jul 3, 2023

Replies: 3 comments 3 replies

martinpitt
Jul 3, 2023
Maintainer

zhaojing1987 Jul 3, 2023
Author

zhaojing1987
Jul 4, 2023
Author

martinpitt
Jul 4, 2023
Maintainer

zhaojing1987 Jul 4, 2023
Author

zhaojing1987 Jul 4, 2023
Author