Mattermost, Inc.

How can we load Mattermost in iframe?

How can we load the mattermost in Iframe. We have to Inbuilt the mattermost in to our application.
Is there any settings we have to enable?

Mattermost has code to prevent the application from being contained in an iframe to avoid “clickjacking” where a malicious user contains the app in an iframe to steal user data. Containing the application within an iframe is not recommended.

Just to follow up to the Q&A, if using IFrame is not recommended what is the recommended way to seamlessly integrate Mattermost inside an existing web application?

Hi @gosure,

There’s currently a feature idea submitted to add the ability to integrate Mattermost into other websites.

Each release cycle feature ideas are considered–with community upvotes and comments playing a role significant role in prioritization.

If you feel the existing feature idea aligns with your needs, please upvote? Alternatively, if you have a different need, please share a new idea, so the community can upvote the use case?

I have successfully (it appears) embedded Mattermost in an iframe. I run the Mattermost Docker image with a nginx reverse proxy in front.

Be aware that by doing this you are decreasing the level of security of your site.

Mattermost uses a set of HTTP headers in addition to a JavaScript trick to prevent embedding/clickjacking.

In nginx I strip out the two relevant HTTP headers:

    location / {
        # Disable gzip due to https://bugs.debian.org/773332
        gzip off;
        # Enable WebSockets:
        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;
    }

The JavaScript is located in the /mattermost/mattermost/web/templates/head.html file.

Somewhat early in the file there is a snippet
<style id=“antiClickjack”>body{display:none !important;}</style>
Comment that out by adding <!-- and --> around it and you should be good!

1 Like

I can’t find head.html.
I’m running mattermost on a debian/apache2 server.

They only reference to antiClickjack is found in the file
’/opt/mattermost/webapp/dist/52.2ebba305a3f129d699b9.js’ and it seems a bit messy to fool around it.

There is an option in apache (security.conf), with mod_headers enabled.
I’m gonna try it, but I have low expectation since mattermost java code calls for an “antiClickjack” object.

Otherwise, in the source code, I found something interesting in ./api/files.go
Here are the lines 522-541

func writeFileResponse(filename string, contentType string, bytes []byte, w http.ResponseWriter, r *http.Request) *mo
del.AppError {
w.Header().Set(“Cache-Control”, “max-age=2592000, public”)
w.Header().Set(“Content-Length”, strconv.Itoa(len(bytes)))

    if contentType != "" {
            w.Header().Set("Content-Type", contentType)
    } else {
            w.Header().Del("Content-Type") // Content-Type will be set automatically by the http writer
    }
    w.Header().Set("Content-Disposition", "attachment;filename=\""+filename+"\"; filename*=UTF-8''"+url.QueryEscape(filename))
    // prevent file links from being embedded in iframes
    w.Header().Set("X-Frame-Options", "DENY")
    w.Header().Set("Content-Security-Policy", "Frame-ancestors 'none'")
    w.Write(bytes)
    return nil

For your info, there was a pull request about that.
it seems that head.html no longer exists. The header to disable embedding MM in an iframe was added in ./api/context.go

See the pull request:
https://github.com/mattermost/platform/pull/253

I have added a feature idea to parametrize the clickjacking protection, so that you can disable it for a specific site when you want mattermost to be integrated in an iframe of these site:

Any plans to add a printscreen?