Hey Everyone. I want to learn about the embedding process of the Gooddata dashboard. I have created the dashboard and now I want to embed it on my website which is built using wix.com. There is an iframe option that I am using to embed my dashboard on my site. However, there is some issue with the authentication that I cannot resolve. Steps Taken: Copied the embed Iframe URL from dashboard and pasted it in my Wix site. The dashboard on the site is visible but only when I am logged-in into another tab in the same browser. When I try to open that in another browser, it gives me an error "auth.cloud.gooddata.com refused to connect". I tried the steps from https://www.gooddata.com/docs/cloud/embed-visualizations/iframes/ to include "Authenticate With Injected API Token" code in my wix site but it didnt work. I copied the code and replaced <application_identifier>, embed_url and api_token values with my actual values and pasted the code in my iframe section on my site. But the issue is still not resolved. Is there anything else I need to do to achieve this? Ultimately, I want my dashboard to be visible to the public whoever is coming to the site should be able to VIEW it without creating a username password login. Is that achievable by using api_token or would I need to do something else?

Hello Kartik, Please see the section on Authenticating with injected API Token this will help you keep the authentication valid in the embedded enviornment

Hey Joseph, I have tried the same method to edit my HTML code to put under Iframe section in my site but its not working. I am still getting the auth.gooddata.com refused to connect error when I am trying to open that website in another browser. This is snap of the code. Is there anything I am missing?

You will need to rotate your API token so it is visible in the snippet. Also, you will want to make sure that you have enabled third party cookies.

I am sorry Joseph. I couldn't understand the first part. For the second part, third-party cookies are allowed.

You shouldn’t reveal that token in a public forum here. Therefore, it is highly advisable to rotate your key now.

Oh no worries. That key is fake. I have edited it before posting here. Coming to my problem here, am I doing anything wrong here in the code?

We would need to check the error from the browser to see why exactly the authorization token hasn’t been accepted. Is there a traceID related to the error?

I couldn't find a trace ID for the error but I have downloaded the network log by recreating that error. Would it be helpful if I share that HAR file?

Yes please

this is the one.

The following should help with the error you are seeing: https://stackoverflow.com/questions/73486192/refused-to-frame-because-an-ancestor-violates-the-following-content-security-pol

Thank you for this input. I'll look into CSP and CORS setup in my gooddata account.

Hi Kartik, Basically the error from auth0 is appearing because of intentional clickjacking protection setting in auth0 -> basically rendering of auth0 login page inside of an iframe is forbidden for security reasons. For this, not even setting the CSP will help you and you need to trigger the auth0 auth flow outside of an iframe. That being said, if you want to use embedding through API token, you shouldn't be redirected to the auth0 page. It seems you are using query parameter

apiTokenAuthentication=true

- there should be

&

instead of

?

in before the parameter. Could you please try that?

Hi Boris, Thank you very much. It worked fine now. But for my use case where I want to provide my dashboard being visible to public, is this method a good and secure method or should I approach this some other way? If yes, could you please guide me on that?

Hi Kartik,

But for my use case where I want to provide my dashboard being visible to public, is this method a good and secure method or should I approach this some other way? If yes, could you please guide me on that?

Yes, this is the supported way to make dashboard public. The API token is potentially visible to everyone accessing this dashboard, so it is advised to have some precautions: have a user with limited permissions (only access to this specific dashboard, view-only, etc...), implemenet some api token lifecycle (i.e. regenerate periodically)

(Feedback on the documentation: It is shown to use ? in the embedding URL )

It is actually correct 🙂 , it's how the url parameters work, the ? separates the first url parameter from the url itself, the & separates additional url parameters. In your URL, you already have

?showNavigation=true

, so the next URL parameter needs to be separated by &

Hi Boris, Thank you for the clarification on the Query parameters. I learned something new today. Thanks again.

it should be secure, as long as you have set the permissions correctly...

Thanks, Boris! I'll implement this with correct user permissions and API rotation method. If a user only has VIEW permissions then the Edit, Share options won't be visible to the user, right?

correct