/usr/share/doc/cockpit/guide/embedding.html is in cockpit-doc 164-1.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Embedding and Integrating Cockpit</title>
<meta name="generator" content="DocBook XSL Stylesheets V1.79.1">
<link rel="home" href="index.html" title="Cockpit Guide">
<link rel="up" href="development.html" title="Part III. Developer Guide">
<link rel="prev" href="development.html" title="Part III. Developer Guide">
<link rel="next" href="packages.html" title="Cockpit Packages">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<table class="navigation" id="top" width="100%" summary="Navigation header" cellpadding="2" cellspacing="2"><tr valign="middle">
<td><a accesskey="p" href="development.html"><img src="left.png" width="24" height="24" border="0" alt="Prev"></a></td>
<td><a accesskey="u" href="development.html"><img src="up.png" width="24" height="24" border="0" alt="Up"></a></td>
<td><a accesskey="h" href="index.html"><img src="home.png" width="24" height="24" border="0" alt="Home"></a></td>
<th width="100%" align="center">Cockpit Guide</th>
<td><a accesskey="n" href="packages.html"><img src="right.png" width="24" height="24" border="0" alt="Next"></a></td>
</tr></table>
<div class="chapter">
<div class="titlepage"><div><div><h2 class="title">
<a name="embedding"></a>Embedding and Integrating Cockpit</h2></div></div></div>
<div class="toc"><dl class="toc">
<dt><span class="section"><a href="embedding.html#embedding-full">Embedding the Cockpit Interface</a></span></dt>
<dt><span class="section"><a href="embedding.html#embedding-components">Integrating Cockpit Components into Web Applications</a></span></dt>
<dt><span class="section"><a href="embedding.html#embedding-deep">Deep Integration</a></span></dt>
<dt><span class="section"><a href="embedding.html#embedding-cors">Pinging Cockpit</a></span></dt>
</dl></div>
<p>Cockpit can be embedded in other web applications either as a whole or specific
Cockpit components can be integrated.</p>
<div class="section">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="embedding-full"></a>Embedding the Cockpit Interface</h2></div></div></div>
<p>Cockpit can be embedded into a larger web page as a frame. To embed
the entire Cockpit Window use the URI:
<code class="code">https://server.example.com:9090/</code></p>
<pre class="programlisting">
<html>
<head>
<title>Embedded Cockpit</title>
</head>
<body>
This is Cockpit.
<br/>
<iframe width="800px" height="600px"
src="https://server.example.com:9090/"/>
</body>
</html>
</pre>
</div>
<div class="section">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="embedding-components"></a>Integrating Cockpit Components into Web Applications</h2></div></div></div>
<p>Instead of embedding the entirety of Cockpit, you can integrate specific components.
Only those components explicitly documented as API should be integrated. Other components
can and will change regularly.</p>
<p>The component will load from the server in question and a WebSocket connection
will be established with the server to relay the component's message stream.</p>
<p>Cockpit components are HTML files contained in
<a class="link" href="packages.html" title="Cockpit Packages">packages</a>. These can be placed in an iframe or web browser
window. Each documented and stable component has a well-known URL and these are documented
in the <a class="link" href="development.html" title="Part III. Developer Guide">API reference</a>. Each component URL begins with the string
<code class="code">/cockpit/@localhost/</code> followed a package name, and then the component itself.</p>
<p>For example the
<a class="link" href="api-terminal-html.html" title="terminal.html">terminal.html</a> in the
<a class="link" href="api-system.html" title="API: system">system</a> package, has this URL:
<code class="code">/cockpit/@localhost/system/terminal.html</code></p>
<pre class="programlisting">
<html>
<head>
<title>Embedded Terminal</title>
</head>
<body>
This is a terminal.
<br/>
<iframe width="800px" height="600px"
src="https://server.example.com:9090/cockpit/@localhost/system/terminal.html"/>
</body>
</html>
</pre>
</div>
<div class="section">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="embedding-deep"></a>Deep Integration</h2></div></div></div>
<p>Most often <a class="link" href="embedding.html#embedding-components" title="Integrating Cockpit Components into Web Applications">simple integration</a> will be used
to bring Cockpit components into web applications. However it is also possible to do deep
integration for embedders who wish to perform non-standard authentication with the server,
and relay the component's message stream to the server themselves.</p>
<div class="warning" style="margin-left: 0.5in; margin-right: 0.5in;">
<h3 class="title">Warning</h3>
<p>Deep integration capability is in heavy flux and is not yet documented.</p>
</div>
</div>
<div class="section">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="embedding-cors"></a>Pinging Cockpit</h2></div></div></div>
<p>When embedding Cockpit or integrating Cockpit components, it may be necessary to check
whether Cockpit is available on a server before proceeding.</p>
<p>To do this perform a <code class="code">/ping</code> request to Cockpit. This is a simple HTTP
GET request. It returns the following:</p>
<pre class="programlisting">
GET: https://server.example.com:9090/ping
200 OK: { "service": "cockpit" }
</pre>
<p>The <code class="code">/ping</code> request allows
<a class="ulink" href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing" target="_top">Cross Origin Resource Sharing</a>
headers and as such can be performed from Javascript code with any origin. The request can also be
made via plain HTTP without SSL. It is by design that no further information is present in the
response.</p>
<p>A complete example of using <code class="code">/ping</code> is available in the Cockpit sources in the
<code class="code">/examples/ping-server/</code> directory.</p>
</div>
</div>
<div class="footer"><hr></div>
</body>
</html>
|