Share canvas embed on website

Elastic Stack Kibana
3

Hey there accateo! Hope you're doing well :slight_smile:

There's actually a way to do this as of 7.11 but it requires a bit of work!

In 7.11, the security team added "anonymous access" which can be used to view parts of Kibana without having a user login. Using anonymous access, you could potentially embed a fullscreen Canvas workpad in a webpage using an iframe to view live data.

We're figuring out how to make this user experience better (and tracking it in this issue -- same one that Jorge linked!) but here's a bit about how you could achieve embedded workpads with live data right now.

Important Caveats

  • Using this method, people will see updates to a workpad as they happen
    • If you make changes to a workpad (like drag around elements) and a user refreshes, they will see these changes. There's no "draft mode" for a Canvas workpad
  • Using this method, a user can hit "escape" to disable the full screen view and potentially view other things within the Kibana instance. This could cause you to leak data!
    • Try this out after completing the steps by opening the page with the embedded workpad and focusing on the iframe and pressing the "escape" key
    • My recommendation would be to limit the roles the anonymous user has to only what is necessary and put the workpad you want to be available anonymously in its own Kibana space so even if a user disables full-screen and clicks around, you aren't showing them any data they're not supposed to see.

Step 1: Setup Anonymous Access for Kibana

First, you're going to need to setup anonymous access for Kibana which was added in 7.11.

In your kibama.yml, you'll want to add something like this:

xpack.security.authc.providers:
  basic.basic1:
    order: 0
    description: "Log in as an Employee"
  anonymous.anonymous1:
    order: 1
    description: "Continue as guest"
    icon: "globe"
    credentials:
      username: "anonymous"
      password: "anonymous"

The actual config will change based on how security is setup for your Kibana instance but that anonymous.anonymous1 section is important because it lets Kibana know you're going to allow for anonymous login. If you want to take a look at more security configuration options, the documentation is available here.

NOTE: If your Kibana is deployed on Cloud, you'll likely have to add xpack.security.sameSiteCookies: None to your kibana.yml as well. You can read more about this setting in the documentation linked above.

Step 2: Create anonymous user

Using your admin user (or a user that has the manage_security privilege), you'll need to create a user with the username anonymous and password anonymous (or whatever you specified in the credentials section of the first step). Assign whatever roles you want to that user but for the case of anonymous access to a live canvas workpad, I recommend adding Canvas read-only privileges. Please be careful with what privileges you give the anonymous user!

Step 3: Setup the URL for your workpad

Now you'll want to construct the URL you're going to use for your iframe. I recommend the following structure:
https://<your host url here>/app/canvas?auth_provider_hint=anonymous1#/workpad/<your workpad id here>/page/1?__fullscreen=true

So for example, when I was testing this out on my local machine, my URL looked like this:
http://localhost:5601/quj/app/canvas?auth_provider_hint=anonymous1#/workpad/workpad-e08b9bdb-ec14-4339-94c4-063bddfd610e/page/1?__fullscreen=true

The two important parts:

  • You need to have ?auth_provider_hint=anonymous1 in the first part of the URL after the /canvas. This option tells Kibana security to login in using anonymous access by default so your user won't get a login screen.
  • ?__fullscreen=true at the end puts the Canvas in fullscreen mode by default.

Step 4: Setup the iframe and your web server

When I tested this out, I created a simple index.html that had an <iframe> in it with the src set to the above URL. I also set my width and height equal to the workpad's width and height.

You'll want to then serve that index.html somehow. In my test, I created a simple web server using python.

After your webserver is running, if you access your html file, you should see the iframe load up kibana and login in automatically with your canvas workpad in full screen.

That's it!

7 Likes