Lightning Container X-Frame-Options Issue

[pbattisson]

When using the Lightning container component to display a react application I am receiving an error:

Refused to display '...' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

It seems other are experiencing this as well with the demo application provided by Salesforce (see comments in https://salesforce.stackexchange.com/questions/186165/lightning-container-index-html-not-in-the-right-folder)

[mpsenn]

Can you give me more information about your app, please?

• What's the src attribute for your lightning:container component?
• Do you have the critical update enabled for "Enable Stricter Content Security Policy for Lightning Components"? This update could be interfering.
• When the app renders, which domain name is used on the LCC iframe? Please tell if it's not *.container.lightning.com.

[pbattisson]

1. src="{!$Resource.ReactPie + '/index.html'}"
2. No, this update is not active
3. The full error with the urls is: Load denied by X-Frame-Options: https://mydomain--c.container.lightning.com/lcc/1508427296000/ReactPie/index.html?sfdcIFrameOrigin=https%3A%2F%2Fmydomain.lightning.force.com does not permit cross-origin framing. Where mydomain is my domain

[mpsenn]

This sounds like a problem on the Salesforce side. The sfdcIFrameOrigin parameter is supposed to allow cross-origin framing, but this doesn't appear to be working. I'll open an issue internally.

[jimbol]

Is this related to the "clickjack protection" in Session settings? It sounds like that changes the X-Frame-Options header to allow displaying Iframe content.

[afuller-cs]

Are you using Safari? I am also seeing this problem in a simple LCC component in Safari. It was working prior to the W18 release, but since Winter '18 it has stopped working. In Chrome, it still functions.

[pbattisson]

@mpsenn Thanks for raising the issue - any feedback or idea on timescales? Just for client response and our own planning on a workaround.

[mujud]

@mpsenn having similar issue here too. Would appreciate a status on this.

[AkshathaRao]

@pbattisson @mujud - We acknowledge this is an issue on the Salesforce side, the fix should likely be in Spring 18 (Safe harbor...)

[nishprogrammer]

I have a similar issue. Is there any fix available for this issue? I am trying to load a VF page in lightning component. It works fine in sandbox but doesn't work in production environment. What is the workaround?

[scottbcovert]

Thanks to @mpsenn and @AkshathaRao for investigating; wondering if there are any known workarounds to this in the meantime?

Additionally, since this has been determined to be a problem on Salesforce's side is there a known issue (W-123...) that could be shared for tracking purposes?

Thanks!

[nithinshetty]

@AkshathaRao

I am launching a lightning component from lightning action in a record detail page. Lightning component embeds a VF page (iframe). It works smoothly in sandbox but throwing error, stating "Refused to display : https://domain.my.salesforce.com/apex/pagName in a frame because it set 'X-Frame-Options' to 'sameorigin'." Is it a known issue or there is any work around ?

Thanks!

[GaryK95]

I had a similar error that I fixed by making sure I had the latest versions of all my installed packages.

[scottbcovert]

@GaryK95 Mmm, was your issue also with the lightning container component? I have all my API versions set to v41 (Winter '18). I even downgraded temporarily to v40 based on @afuller-cs's comment, but still no luck.

@pbattisson, were you able to come up with a temporary solution? I will keep trying and report back if I come up with a workaround.

[scottbcovert]

FYI I've had limited success by just injecting an iframe into my component's markup directly rather than using the lightning container component. Unfortunately, my service worker registration fails when I do this so it's not really a viable option. I'm sure there are other complications that could arise as well, but still thought that information might be helpful to others.

[nithinshetty]

Hello All,

I was able to fix the issue by updating two options in session setting. Ref : http://getthekt.com/salesforce-com-refused-to-display-httpsomewebpage-in-a-frame-because-it-set-x-frame-options-to-sameorigin/ CC: @AkshathaRao

[GaryK95]

@scottbcovert i was using a package called 'Amazon Connect - Universal Package' and i was getting the X-Frame-Options' to 'sameorigin' error. I tried removing clickjack protection as nithinshetty a while ago but it did not solve my problem. my problem was my package was not up to date but I don't know how similar my issue is to yours

[scottbcovert]

@GaryK95 Thanks; I too had come across the link @nithinshetty shared but unfortunately it didn't resolve my issue either. I am experiencing this problem in a brand new developer edition org with no installed packages so it seems like a separate problem, but I appreciate the clarification - hopefully it will help someone else down the line.

[ennoucas]

Same here.. I've tried to use a Vue JS Webpack (using pwa template) and got the X-Frame-Options error. Any news on that ?The url generated by the container and the one from sfdcIFrameOrigin are different : https://...c.container.lightning.com/lcc/1517429510000/container/index.html?sfdcIFrameOrigin=https%3A%2F%2F...lightning.force.com

[mtetlow]

@mpsenn is there a known issue link or w number you could share with us?

Thanks!

[navrajesh]

Have a very similar issue... Issue: Lightning Container loading a jquery fileupload widget as a static resource - throws "403 Forbidden" error in container.js

Plain iframe works Same static resource fails in lightning container with 403
<lightning:container src="{!$Resource.jqfileupload + '/fileupload/index.html'}"/>

Ligntning Container - 403 request url below https://xxx-dev-ed--c.container.lightning.com/lcc/1518827337000/jqfileupload2/fileupload/index.html?sfdcIFrameOrigin=https%3A%2F%2Fxxx-dev-ed.lightning.force.com

Any help is greatly appreciated. Thanks!

[mpsenn]

Hey all! @mtetlow We're tracking this internally with W-4419082. I don't believe we have a KI article for this.

[sfdcbox]

I have the same issue, for now is direct iframe the only alternate available?

[CarlosIribar]

Hi guys. I found a work around using a visualforce page with an iframe. I created a vf with the same content of my index.html getting the scripts and css files from my static resource. In my lightning component I add an iframe pointing to the url of my visualforce page in classic.

Lightning component

<aura:component implements="force:appHostable,flexipage:availableForRecordHome">
    <iframe src="visualforceURLInclassicMode/apex/reactContainer" />
</aura:component>

Visualforce page: reactContainer

<apex:page sidebar="false" showHeader="false" standardStylesheets="false">
<body>
      <div id="app"></div>
      <script charset="utf-8" src="{!URLFOR($Resource.reactapp,'public/index.js')}" type="text/javascript"></script>
</body>
</apex:page>

[sfdcbox]

@CarlosIribar a vf page with an iframe is an alternate we can go with, but this adds a delay in load. a better solution than a vf would be loading your html file in iframe directly from static resource, this reduces the load time for the page. lightning:container has some inbuilt features for messaging, if this works then I would always prefer using this only and go with vf only when I need to use vf features.

[CarlosIribar]

@sfdcbox I agree that loading directly from static resource using lightning:container would be a better solution. I propose an alternative while the lightning:container is not working.

[ennoucas]

Hi everyone. I have managed to load my Vue.js webpack application with ltng:require. I'm currently writing an article on medium about it and I'll share it here as soon as I finish it. It should work the same with other frameworks as React or Angular.

[mpsenn]

Alright, I think I've managed to submit the fix for this, and (Safe Harbor willing) it'll be rolling out to your instances in Spring '18 Patch 12. Anyone experiencing the error message below should be fixed:

Refused to display '...' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

[scottbcovert]

Awesome news, thanks @mpsenn!

[dborstelmann]

@mpsenn I just tried to upload a Vue app through the container component and I'm still getting forbidden. I am in a sandbox but it loads the iframe content from our prod org. Anyone have an explanation for this/when this patch will be released?

@ennoucas I like your way of doing things but you still have to play by lockerservice rules that way and we have libraries that don't work with lockerservice well (d3, c3, etc.) that iframes will solve I believe. If you have any other ideas here or I am missing something I would appreciate the help.

[dborstelmann]

@mpsenn @ennoucas I'm using postmessage to an lightning component iframe where the content is hosted separately in the mean time but would love to use the container