0

I need to display Iframe in my lightning component. This is one of my components:

<aura:component controller="LeadCollectorController" >


<aura:attribute name="theLead" 
    type="Lead" 
    default="{ 'sobjectType': 'Lead',
               'Rating__c': 2,
               'Company': '',
               'FirstName': '',
               'LastName': '',
               'Email': '' }"/>
<form>
    <fieldset class="slds-box slds-container--fluid">


    <ui:inputText value="{!v.theLead.Company}" label="Company" class="input"/>
    <ui:inputText value="{!v.theLead.FirstName}" label="First" class="input"/>
    <ui:inputText value="{!v.theLead.LastName}" label="Last" class="input" />
    <ui:inputEmail value="{!v.theLead.Email}" label="Email" class="input" />
    <ui:button label="Save" press="{!c.save}"/>
    </fieldset>
</form>


<iframe height="400px" id="theIframe" name="theIframe" src="https://www.google.com/maps" width="80%" title ="prova"></iframe>

This is the App:​

<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="c:leadCollector"/>

This is the VFP:

<apex:page standardController="Lead"  standardStylesheets="false" sidebar="false"  applyBodyTag="false" >
<apex:includeScript value="/lightning/lightning.out.js" />
<apex:includeLightning />

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en"/>

<script>
    $Lightning.use("c:leadCollectionApp", function() {
        $Lightning.createComponent(
            "c:leadCollector",
            {},
            "theLead",
            function(cmp) {
                console.log("Component created!");
                console.log(cmp);
            });
        });
</script>




<div id="theLead"></div>

When I load the page I can see only the form but not the Iframe. If I use Chrome or Firefox I see only a blank space. If I use Internet Explorer I read the error in the screenshot.

enter image description here

I want to avoid the error I have in debug:

Refused to display 'https://www.google.com/maps' in a frame because it set 'X-Frame-Options' to 'sameorigin'

Can you help me please? Thanks. Michele Renda

1 Answer 1

1

This is not a Salesforce problem. Google don't want you embedding maps in your site by using an iframe.

If you actually want to use Google Maps in your application, you need a Google API account, then setup an API key with Maps as one of the enabled apps, and follow their instructions:

https://developers.google.com/maps/documentation/embed/start

4
  • Thank you Aidan but if i try with another url I have the same result and I read in debug: Refused to display 'salesforce.com/it' in a frame because it set 'X-Frame-Options' to 'sameorigin'. How can I do? Thank you so much!
    – MRenda
    Commented Jun 20, 2018 at 10:29
  • Hi, you've picked another URL that sets X-Frame-Options →SAMEORIGIN. If you're using Chrome, open the network tab, load the page, then search for the header "X-Frame-Options", you'll find it set to SAMEORIGIN. Most sites do this now, see developer.mozilla.org/en-US/docs/Web/HTTP/Headers/…
    – Aidan
    Commented Jun 20, 2018 at 11:41
  • Thank you Aidan but i need to resolve the problem in Salesforce. I would like to include iframe without consider the browser i'm using. Thank you!!
    – MRenda
    Commented Jun 21, 2018 at 9:04
  • Sorry, but X-Frame-Options is part of the HTTP standard, so you will never be able to put a site into an iframe if that site doesn't want you to do it. Irrespective of Salesforce, browser choice (assuming it's a remotely modern browser). The web has moved on from the days where you could throw whatever you want in an iframe. If I put your online banking login page into an iframe on my site, it may help me to steal your banking details. That's the scenario this is designed to prevent and you will never be able to get around that.
    – Aidan
    Commented Jun 21, 2018 at 9:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .