1316
Views
8
Comments
Solved
How to remove X-Frame-Options (Safari IOS embedding problem)
Question

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...

2024-03-25 06-19-08
Harlin Setiadarma
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....

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Harlin,

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

2024-03-25 06-19-08
Harlin Setiadarma

I'm using outsystemscloud.

So I cannot check IIS setting. 

2024-03-25 06-19-08
Harlin Setiadarma

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?

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

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

2024-03-25 06-19-08
Harlin Setiadarma
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....

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Cool, thanks for the feedback!

2024-03-25 06-19-08
Harlin Setiadarma

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


2022-04-29 11-28-26
Nitesh Ahirwar

How to apply this on latest version of Life Time, couldnt find these settings now 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.