How to remove X-Frame-Options (Safari IOS embedding problem)

I have Outsystems screens embedded in website.

I already set Content Security Policy in lifetime and it worked on all but Safari IOS browser.


After some digging, I found this:

https://stackoverflow.com/questions/54463608/how-to-fix-safari-ignoring-content-security-policy-when-x-frame-options-are-spec

Problem is that Safari 12 as of January 2019 still prioritizes X-Frame-Options over Content-Security-Policy.


Unfortunately Outsystems always have X-Frame-Options: SAMEORIGIN regardless of CSP setting.

Most browsers ignore X-Frame-Options when there's CSP defined.

But Safari is NOT.


Is there way to remove X-Frame-Options (especially if user-agent is Safari)?


I can modify CSP using Lifetime, but not for X-Frame-Options.

I tried HTTPRequestHandler's AddHeader, but it just add header, not replacing existing one.

I'm aware of Factory Configuration, but I'm at lost on how to use it to remove X-Frame-Options header.


Please help...

Hi Harlin,

Are you sure X-Frame-Options is added by OutSystems, and not by IIS?

I'm using outsystemscloud.

So I cannot check IIS setting. 

A little digging on our on-premise Outsystems installation, confirm that IIS add X-Frame-Options

But how can we remove it while using Outsystems Cloud server?

Ask Support, I'd guess, though I'm not sure they will/can do that, as likely ths IIS is shared with other customers.

Solution

I finally have the solution.

Using Factory Configuration plugin, I create shared configuration.


Then I go to eSpaces, then go to eSpace detail.

From there, I associate this shared configuration with the espace.

Finally re-publish the espace.

Now iframe correctly rendered in Safari (IOS).


Hope this answer will be helpful for others....

Solution

Cool, thanks for the feedback!

Here's full XML text for shared configuration:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="https://www.w3.org/1999/XSL/Transform">

    <xsl:output method="xml" indent="yes" encoding="UTF-8"/> 

    <xsl:template match="@*|node()">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
    </xsl:template>
        
    <xsl:template match="/configuration/system.webServer/httpProtocol/customHeaders">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
            <remove name="X-Frame-Options" />
        </xsl:copy>
    </xsl:template>

</xsl:stylesheet>


Another helpful tip:

Safari requires scheme in all CSP *-src directives (including frame-ancestors, child-src, frame-src, etc).

So, instead of:

default-src: 

*.googleapis.com

change it to:

https://*.googleapis.com