How can we load Mattermost in iframe?


#1

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?


#3

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.


#4

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?


#5

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?


#6

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!


#7

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

#8

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


#9

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: