Share canvas embed on website

Hello,
Isn't it really possible to embed a canvas workpad on a site, but it shows live data?
Thank you

Not at this moment but you may want to subscribe or visit from time to time this issue that tracks that request.

1 Like

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

I'm using Elastic Cloud, how can I do this?

You add the configuration in the cloud portal using the setting below kibana

1 Like

Hi @accateo

I walked through the details of setting up anonymous access on Elastic Cloud here

There is additional info in that thread which probably pertains to your use case as well.

1 Like

I followed all the steps.

I created a new user (anonymous1), I've changed the settings in Kibana and I wrote an index.html with an iframe inside.

The iframe continues to refresh itself and the message "authenthicating ..." appears.

Any idea?

If you open up the Dev Tools, you might have a few errors. If you could screenshot/post those errors, that'll be helpful for debugging

Here:

Any idea?

Hmm it seems like the user doesn't have proper authentication. You might want to double check your credentials in the kibana,yml match the credentials of the anonymous user you've created. Then you might want to check that you've given enough privileges to that anonymous user

I double check:


but nothing change.
One question...in the url there is no password, while I set it. How does the anonymous user log in without a password?

Did you set up the Kibana part of the anonymous user that a talked about here with reference here

The username and password are defined in the kibana.yml

I follow your steps....

My kibana.yml

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: "anonymous1"
password: "anonymous1"

Did you properly construct your URL as shown here

If you have multiple authentication providers enabled, and you want to automatically log in anonymous users when embedding anything other than dashboards and visualizations, then you will need to add the auth_provider_hint=<anonymous-provider-name> query string parameter to the Kibana URL that you’re embedding.

For example, if you craft the iframe code to embed Kibana, it might look like this:

To make this iframe leverage anonymous access automatically, you will need to modify a link to Kibana in the src iframe attribute to look like this:

Note that the auth_provider_hint query string parameter goes before the hash URL fragment.

My Example just worked fine (using what I used in my post about Kibana Anonymous Acces) the URL below logged straight through to the dashboard with no authentication. I would try a dashboard first just straight from the browser make sure that works and then proceed to work on the iFrame..

https://1234987098723ohjkhsflkajhf.us-west1.gcp.cloud.es.io/s/dashboard-readonly/app/dashboards?auth_provider_hint=anonymous1#/view/1fa96e70-8a91-11ea-adfa-adc76ecf12c9

Note the URL has to be to the correct space and assets (visualization or dashboard) etc. Note the placement of the ?auth_provider_hint=anonymous1

My url:

https://XXXXXXXX:9243/app/canvas?auth_provider_hint=anonymous1#/workpad/workpad-20cc3824-8efa-4c26-826a-e29ef088ed6f/page/1?__fullscreen=true

If you put that in your browser directly what do you get? Is it the same error as above? Did you try it in a new Private Window?

Exactly which Kibana Privileges did you apply? Looks to me you are still not setup correct...

If you just go the the login screen and click on anonymous does it work? (If not the URL wont work for sure)

Can you see your canvas if not then the URL will not work. If it does I would copy the URL from that and insert the ?auth_provider_hint=anonymous1

Are you missing missing the space... I assume you created a read only space to put this visualization in? or you did not? I would as that is a good practice... but you can try that after.

In mine that is the

.../s/dashboard-readonly/...

Looks like you are close...

Yes, the error is the image above.

Kibana privileges are only read on Canvas.

If I login directly it works.

When I login I am redirect to canvas fullscreen dashboard.

Where do I have to inserti .../s/dashboard-readonly/... ?

If you did not create a separate space then you don't need this part ../s/dashboard-readonly/

When you say If I login directly it works. does that mean as the Anonymous User From the Login Screen?

If so do that, then go to The Canvas workpad (which it sounds like it takes you there)... Then take that URL from the URL bar and insert the ?auth_provider_hint=anonymous1 in the proper place and try again from a private window.

Yes, Anonymous User From the Login Screen works.

What do you mean private window? Do you mean incognito tab? In incognito tab the embed does not work, problem with sessionStorage.

I tried to take that URL from the URL bar and insert the ?auth_provider_hint=anonymous1 in the proper place but nothing change.