Can you embed or implement a visualforce page inside of a lightning component?

For example I do a load of HTML, Javascript and angular and embedding inside a visualforce, then however with a lightning component implement the visualforce page inside of the lightning component?

So when I put the lightning component into the salesforce1 app - I can then see all the code for the visualforce page?


3 Answers 3


Yes you can. The linked post gives a wider tutorial, but the code you likely need is below. Note, here I have added recordId to my example as it is common that the VF page needs a reference to the record. Other parameters can be passed in a similar way.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" access="global">
    <iframe src="{! 'https://my-demo--c.eu11.visual.force.com/apex/MyVisualforcePage?Id=' + v.recordId }" width="100%" height="500px;" frameBorder="0"/>

You can use iframe to expose your visualforce pages within a lightning component.

you can check out this link for more details:

UPDATED Link(thanks to @Trevor): https://github.com/salesforcejeff/jargon/blob/master/articles/iFramecomponent.md

I would recommend doing this only if you have an existing visualforce page that you want to reuse, but if you're starting from scratch might as well use a full lightning implementation.


If the iframe turns out blank it might be Salesforce's clickjack protection in settings.


You can temporary turn it off to test by going to Setup -> Session Settings -> Clickjack Protection.

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.