How to embed kibana dashboard in html code?

Elastic Stack Kibana
1

i paste the iframe code in any external site, kibana login page appears when i enter my username and password the login page just gets reloaded and asks for the username and password again. the same process is repeating and it doesn't take me inside Kibana and getting this error in console Refused to execute the inline script because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-P5polb1UreUSOe5V/Pv7tc+yeZuJXiOi/3fqhGsU7BE='), or a nonce ('nonce-...') is required to enable inline execution.

2

Hi @Jyoti_Pandey,

Welcome to the community! I've removed the tags you've added to the thread as they don't look to relate to your issue.

I assume you're using the embed code feature with either a short or public URL? Do you see any errors in either your Kibana logs or the developer console in the browser?

1 Like
3

yes I have this error inmy console Refused to execute the inline script because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-P5polb1UreUSOe5V/Pv7tc+yeZuJXiOi/3fqhGsU7BE='), or a nonce ('nonce-...') is required to enable inline execution.

4

Which version of Kibana and Elasticsearch are you using? And which browser are you using?

There are a couple of GitHub issues with similar errors, that suggest this could be down to browser or misconfiguration that could help:

  1. [Reporting] Refused to execute inline script error in Kibana log when generating a report · Issue #55997 · elastic/kibana · GitHub
  2. A single content security policy error appears in browser console on load · Issue #30468 · elastic/kibana · GitHub
1 Like
5

i have version 7.8.1 and browser I am using Chrome

6

So you are on an old version of Elasticsearch/ Kibana that is no longer supported. Have you tried upgrading to 7.17.x to see if that resolved your issue?

7

@Jyoti_Pandey Are there any other errors in your browser's console? The "... inline script ..." error is expected, but should not be causing the login issue.

Also, can you try logging in using Chrome's incognito mode? This should bypass any stale cookies. If that works, the I would try clearing the cookies on your page in normal Chrome.

1 Like
8

yes, I have tried in incognito mode as well that also does not work.

9

Now i have changed the setting of that sameSiteCookies: None now it's working but still asking for a username and password to log in which I was not supposed to have apart of that i have one question is i am using the library for the date filter which is already present in my web page i want that my date filter date should have to reflect to result of kibana dashboard as per the date range

10

Hi @Jyoti_Pandey,

Have you configured the anonymous access settings in your kibana.yml, including username and roles, and ensured that those roles are configured in Kibana? If so can you share you configuration please?

Can you explain what library you are using?

11

I am using Moment.js library

`

<div class="widget-body">
    <form class="smart-form">
        <fieldset>
            <table class="table table-bordered table-striped">
                <div class="row" >
                    <section class="col col-6 " style='margin-left: 50%;'>
                        <div id="reportrange" class="pull-right col col-sm-6" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 60%">
                            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                            <span></span> <b class="caret"></b>
                        </div>
                    </section>
                </div>
        </fieldset>
        <fieldset>
            <div class="row">
                <div>
                    <section class="col col-5" id="Start_Date" style="display: none">
                        <label class="label">Start Date</label>
                        <label class="input">
                            <i class="icon-append fa fa-calendar"></i>
                            <input type="date" data-date-format="yyy-dd-mm" name="StartDate" id="StartDate">
                        </label>
                    </section>
                </div>
                <div>
                    <section class="col col-5" id="End_Date" style="display: none">
                        <label class="label">End Date</label>
                        <label class="input">
                            <i class="icon-append fa fa-calendar"></i>
                            <input type="date" data-date-format="yyy-dd-mm" name="EndDate" id="EndDate">
                        </label>
                    </section>
                </div>
                <div>
                    <section class="col col-2" id="Filter1" style="display: none">
                        <input type="button" onclick = "custom()" value="Filter" class="btn btn-primary" style="width:80%; height :32px; margin-top:17%"/>
                    </section>
                </div>
            </div>
        </fieldset>
        <iframe id="frame" name="frame" style="width: 100%; height: 1651px;"></iframe>
        
    </form>
</div>
`
12

now it working I have converted and end date into toISOString format its working fine I am very thankful to you

1 Like
13

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.