How to Embed Infographics in Another Web Page

Goal

Embed an Infographic on an external webpage.

Background

We were trying to embed the Infographic on our own website using following HTML code

<embed src="https://<host>:<port>/infographics/<id>?mode=embed"></embed>

However, we got an error message

Refused to display Infographics in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

The problem is that the page fetched with ?mode=embed includes the X-Frame-Options:SAMEORIGIN header, so you can't load it in an iFrame.

Learn

Before making any changes consider possible security issues on the X-Frame-Options security header and why do browsers enforce the same-origin security policy on iframes.  

Please take note that the X-Frame-Options are not supported in Chrome and Safari and would therefore take affect for Firefox users only.

Consider also a higher load issue if Infographics are integrated into a public space and get accessed from a lot users. The amount of requests could affect the stability of the server.

For Workgroup Editions the option Remote Embedding will not be available.

Workaround (insecure)

Edit file 

conf/default.properties

1) Change the value of the parameter

security.clickjackprevention.enabled=false

2) Change the value of the parameter 

security.clickjackprevention.xframeoptions=SAMEORIGIN

based on HTTP X-Frame-Options.