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

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

| improve this answer | |
  • 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 Jun 20 '18 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 Jun 20 '18 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 Jun 21 '18 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 Jun 21 '18 at 9:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.