Embedding apps into external sites

A common request has been to allow embedding a Cloudron app into an external website. So far, we had disabled embedding to prevent Clickjacking (thanks to a security report by Imene Essoussi).

What is clickjacking?

Quoting OWASP, clickjackingis a cunning technique to mislead the user into clicking something they didn't intend to:

For example, imagine an attacker who builds a web site that has a button
on it that says "click here for a free iPod". However, on top of that
web page, the attacker has loaded an iframe with your mail account, and
lined up exactly the "delete all messages" button directly on top of the
"free iPod" button. The victim tries to click on the "free iPod" button
but instead actually clicked on the invisible "delete all messages"
button. In essence, the attacker has "hijacked" the user's click,
hence the name "Clickjacking".

Defense

One way to prevent clickjackingis to prevent embedding the app into other sites. The Cloudron did this by serving apps with the HTTP directive X-Frame-Options: SAMEORIGIN.

While this change made it more secure (on most browsers), it had the consequence of breaking our own Live Chat. Our Live Chat happens to be a Rocket.Chat appthat runs on a Cloudron at https://chat.cloudron.io - a different origin from this site https://cloudron.io.

Solution

We released a feature today that will let you configure X-Frame-Options. You can do so from the app's configure dialog:

As you can tell, for our case, we simply set the allowed origin to https://cloudron.io and lo and behold, we have our Live Chat back!