Embed flowable-modeler using iFrame

when I try to embed flowable modeler in my angular app using iFrame, I get below error in browser console

Refused to display ‘http://localhost:8080/flowable-modeler/’ in a frame because it set ‘X-
Frame-Options’ to ‘sameorigin’.

I also tried setting filter in Apache tomcat, which was of no help
Nothing worked except for browser extension that can bypass security headers set to disallow displaying of content from different origin. However, I dont want to use extensions

Can I get any suggestion or help to achieve this

See: How to set ‘X-Frame-Options’ on iframe?

Hi Robinyo, Thanks for the reply! I understand that this is a security limitation. Is there any alternate solution or a method to achieve this. Can we remove those headers ?

Sure, roll your own WebSecurityConfigurerAdapter.

1 Like

@yvo cam we able to change X-FRAME option in docker implemntation

Spring Boot 2 has removed some security properties; including the security.headers.frame.
So basically this leaves us with implementing a custom pluggable way to set specific headers.
Or implement f.e. a custom filter.
(And build and run the image).

Regards,

Yvo

@yvo Thanks for the update

is there any other way for embedding flowable in our custom application?

Let me recap to verify where on the same page.
You want to ‘embed’ Flowable in a custom application by loading Flowable UI in a IFrame.
Out of the box this does not work for you because by default Flowable has the response header X-Frame-Options: SAMEORIGIN?

Using a reverse proxy is a common solution to ‘same origin’ constraints. This will result in serve both Flowable and the custom application from the same domain (origin).

Another approach would be using the Flowable Spring Boot starters in your custom application and building a complete custom application.

Hope this helps.

Regards,

Yvo

@yvo can we get more insight on this, please

Do you mean more info on the reverse proxy approach?

Basically you put a webserver (like nginx) in front of other servers and expose them with a certain configuration.
For example nginx running on public-1:80 serving internal-1:8080 from /custom-app and internal-2:8080 from /flowable-ui.
This would mean that you can access ‘custom-app’ resources from ‘flowable-ui’ and still having the ‘same origin’.

In addition to this you can have additional configuration on these mappings. Like manipulating headers;

(When using dockerized services; there ‘docker aware’ reverse proxies available; like Traefik. These can provide some OOTB convenience)

Hope this helps.

Yvo