How to run Mattermost in an iFrame?

Mattermost is an amazing alternative to Slack, especially if you want to take control of your data. Recently I worked on a project where I had to bake Mattermost as part of the team chat. Now, this was a web app, and though you can┬áconnect to Mattermost directly from a new tab in the browser, that is bad for UX. One answer is to use an iFrame, until you try it out and realize that Mattermost has built-in stonewall against iFrame-related headers. In short, you can’t run it in an iFrame.

Now, it’s nice to see that there’s built-in defence against clickjacking and all, but for situations like these where Mattermost needs to run inside a web app and there’s no JS-driven interface available, I feel iFrame is the only option left. Of course opening the chat part in another tab is also fine, but won’t be seen as good UX.

So, how can you run Mattermost inside an iFrame? I found the answer in this thread, and it involves using Nginx as a reverse proxy and stripping off the headers in question before passing them on to Mattermost. Here’s what my config looks like:

server {
 listen 8066 default_server;
 listen [::]:8066 default_server;

server_name _;

  location / { 
    # Disable gzip due to https://bugs.debian.org/773332
    gzip off;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    proxy_pass http://localhost:8065/;
    include /etc/nginx/proxy_params;

    # Mattermost does not allow embedding by default, so we strip out the header that restricts it: 
    proxy_hide_header Content-Security-Policy;
    proxy_hide_header X-Frame-Options; 
  }  
}

And sure enough, Mattermost does your bidding!

2 thoughts on “How to run Mattermost in an iFrame?”

    1. Hey, Gaurav. Thanks for stopping by. I’m afraid I don’t know how to do this in Apache, but I’m sure it won’t be difficult at all. It’s just a matter of telling the web server to hide certain headers in the request. I googled “apache hide headers” and the first link I got (https://www.tunetheweb.com/security/http-security-headers/server-header/) seems to suggest using these:

      Header always unset “X-Powered-By”
      Header unset “X-Powered-By”

      I think it will be pretty simple to pass the name of the header here.

Leave a Reply

Your email address will not be published. Required fields are marked *