Embedding Liferay site as iframe is not working on external site

Question

I have got a Liferay page which has Portlet. I tried to embed this page as an iframe in external site which is not in Liferay but it is giving the error in console as:

Refused to display 'https://example.com' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

I am using html iframe tag like below to embed it:

<iframe allowfullscreen="" frameborder="0" height="400" src="https://example.com" style="border:0" width="500"></iframe>

Following this thread I tried putting "&output=embed" at end of the URL but it didn't work: Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

I am not sure whether I need to change setting or any code on Liferay side to make it work. Any idea what is causing this and how can I fix this?

Answer 1

X-Frame-options response header is used to prevent clickjacking. All the requests in Liferay by default has this header set to DENY for all external URLs i.e. Liferay site cannot be iFramed or embedded in an iframe from any other site other than the Liferay site with the same domain.

Assuming you are using Liferay Version 6.2.x, you can have two approaches to allow Liferay to be iFramed:

Approach-I

Disable the property http.header.secure.x.frame.options to portal-ext.properties:

http.header.secure.x.frame.options=false

By default this is true.

Approach-II (recommended)

Add URL of the page to the property http.header.secure.x.frame.options.* in portal-ext.properties so that only that particular URL can be embedded in an iframe and not the whole site.

Where * should be replaced by any positive integer value.

Some examples, please note that each URL goes in a separate property:

http.header.secure.x.frame.options.1=/web/guest/home
http.header.secure.x.frame.options.2=/myPortletPageToBeIframed
http.header.secure.x.frame.options.10=/group/mySite/MyPageInIframe

The second approach is recommended because it only allows certain pages to be iFramed reducing the risk of clickjacking on your other pages.