3

How to Embed incorta in a webpage using iframe tag

6replies Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
  • 1.   Add the following to the JAVA_OPTS variable in the service start script

    -Dincorta.xframe.option=all

    For incorta v3:

    The start script is named start.sh and it exists in the following path

    <Incorta_Installation>/start.sh

    For incorta v4:

    The start script is named startService.sh and exists in the following path

    <Incorta_Installation>/IncortaNode/startService.sh

    Example:

     

     

    2.   Restart the service

    For incorta v3: run stop.sh and then run start.sh.

    For incorta v4: Use the CMC to restart the Analytics Service

     

    3.   Add an iFrame to the HTML page you wish to embed the incorta dashboard. 

    The iframe should be in this format

    <iframe src="http://<HOST>:<PORT>/incorta/#/dashboard/<DASHBOARD_ID>" style="height:100vh;width:100%" ></iframe>

    You can get the DASHBOARD_ID from the URL as

    http://localhost:8080/incorta/#/dashboard/a36b1474-060f-423d-987e-c164972ea5e4

    Example:

     

    Note: once the embedded dashboard loads you will need to login. If using incorta authentication, it is recommended to create a user with view only permissions specific to this dashboard.

    Like
  • Thanks Motaz for the detailed explanation on iframe. We created an iframe, but facing following issues

    1. When we open the iframe and login in it is taking to the folder rather directly to the dashboard

    2. When it opens the dashboard, we observe that we can navigate to anywhere in incorta tenant rather restricting to display only the dashboard with the data. Can you help us provide references or examples of how we can restrict the iframe to display only the dashboard with content and not go anywhere else.

    Like
  • Hi,

    In the iframe URL we would like to pass a parameter (like site id =11122) to Incorta  so that it filters data on the Incorta report. 

    Caller is a digital hub application and it has to pass the login user site id to Incorta to filter data.

    How do I do it in the Iframe URL calling ?

    http://localhost:8080/incorta/#/dashboard/a36b1474-060f-423d-987e-c164972ea5e4

     

    Thanks 

    Venkat Valluri   

    Like
  • In addition to the above steps, you may need to apply the following steps

    1- Shutdown Incorta server (analytics and loader services)
    2- Download the attached jar file and place it in {Incorta Home}/IncortaNode/runtime/lib
    3- Edit (with text editor) {Incorta  Home}/IncortaNode/runtime/webapps/incorta/WEB-INF/web.xml with a text  editor and comment out HeaderSecurityFilter and HeaderSecurityFilter  from <filter> and <filter-mapping>
      <!-- filter>
        <filter-name>HeaderSecurityFilter</filter-name>
        <filter-class>com.incorta.webapi.HttpHeaderSecurityFilter</filter-class>
        <init-param>
          <param-name>antiClickJackingEnabled</param-name>
          <param-value>true</param-value>
        </init-param>
        <init-param>
          <param-name>antiClickJackingOption</param-name>
          <param-value>SAMEORIGIN</param-value>
        </init-param>
        <init-param>
          <param-name>hstsMaxAgeSeconds</param-name>
          <param-value>31536000</param-value>
        </init-param>
      </filter -->
      <!-- filter-mapping>
        <filter-name>HeaderSecurityFilter</filter-name>
        <url-pattern>/*</url-pattern>
      </filter-mapping -->
    
    4. Identify analyticsService id from terminal Example)
    $ cat {Incorta Home}/IncortaNode/services/services.index
    analyticsService=a02b4ad2-1dde-4aa2-a4e8-8a53dd56525d
    loaderService = d82f9654-9986-4779-902a-d42fe8de28b5
    
    4. Edit server.xml of analyticsService and define IncortaContentSecurity valve in <Host> tag.
    
    Example)
    $ vi ./services/a02b4ad2-1dde-4aa2-a4e8-8a53dd56525d/conf/server.xml
    
    <Host name="xxxx" ...>
    ...
    <Valve className="com.incorta.valve.ContentSecurityValve"/>
    </Host>
    
    5. Open {incorta_home}/IncortaNode/startService.sh with a text editor and add following JVM options
    
    export  JAVA_OPTS="-Xms16384m -Xmx16384m -Dfile.encoding=UTF-8  -Dincorta.contentsecurity.default-src=\"'self' data: 'unsafe-inline'  'unsafe-eval'\" -Dincorta.contentsecurity.frame-ancestors=\"'self' http://hostname:port \""
    
    http://hostname:port above  should be a host name where other web application embedding incorta dashboards with iframe. You can have as many hosts to allow embedding.
    More details of Content-Secuirty-Policy are found in these links.
    https://developers.google.com/web/fundamentals/security/csp/
    https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
    
    6. Startup Incorta  services (analytics and loader)
    
    * NOTE: These changes need to be redone for any upgrades
    Like
  • For Embedding incorta in ServiceNow dashboard, you need to enable the flag: Allow embedded HTML
    as in the attached screenshot

    Like
  • Specifically for ServiceNow we can link to an incorta dashboard by searching for UI Pages in the left panel of SNow, create a new page, and put the dashboard URL in an iframe in the html section like the screenshot

     

    Another thing worths to be mentioned is that starting chrome version 84 cross origin cookies are treated differently.  The fastest, yet not the safest workaround to be able to embed incorta in another hosting site is to disable the samesite cookie setting from chrome as in the screenshot below.

     

    Sometimes, but not always, you may need to choose this reloading option: "Empty cache and hard reload" in the hosting site page that includes the link to incorta dashboard. This should be done once, not for every time viewing the incorta dashboard.

    Like
Like3 Follow
  • 3 Likes
  • 3 wk agoLast active
  • 6Replies
  • 413Views
  • 6 Following

Product Announcement


We are happy to
announce Incorta 4.8 !!!