[Resolved:] Displaying and Redirecting Vf Page from Aura Component by disabling clickjack protection using iframe through quick action

SCENARIO 

While working on one of the requirements for an insurance sector solutions customer based in Chicago, Illinois there was a requirement to display and redirect Vf page from the lightning aura component through quick action by compulsorily using IFrame.

CHALLENGE

We achieved this functionality of redirecting VF page from aura component.

However, we were not able to display VF page from aura component.  

APPROACH

So in order to solve the issue of displaying Vf page from aura component, we have  to Disable Clickjack protection whenever we are using IFrame

Why and When to use IFrame?

• An IFrame can insert all sorts of media. It allows you to add documents, videos, and interactive media within a page. By doing this, you can display a secondary webpage on your main page. It also allows you to include a piece of content from other sources. It can integrate the content anywhere within your page, without having to include them in your web layout’s structure. 

• Developers mainly use the IFrame tag to embed(place content) HTML document within the current one, it lets you add an independent HTML document with its browsing context. It is useful for pulling content from other domains, it safely allows the advantage of being able to visually show data from other domains without letting them stomp all over your page with unlimited access. 

EXAMPLE CODE:

Redirect.vfp:

<apex:page showHeader="false" sidebar="false" controller="RedirectExample">
<apex:form >
<apex:pageblock >
<apex:commandlink action="{!redirect}" target="_blank">

<apex:commandButton value="Open in New Tab" />
</apex:commandLink>
</apex:pageblock>
</apex:form>
</apex:page>

RedirectExample.apxc:

public class RedirectExample {
public RedirectExample(){

}
public pageReference redirect() {
PageReference pageRef = new PageReference('http://www.google.com');
pageRef.setRedirect(true);
return pageRef;
}
}

vfpinsidelightning.cmp:

<aura:component implements="forceCommunity:availableForAllPageTypes,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" >
    <iframe src="Enter your namespace here.com/apex/Redirect?core.apexpages.request.devconsole=1"/>
</aura:component>

Create quick action as shown below:

 

Now add this newly created quick action on your objects page layout

In 'Mobile & Lightning Action' section drag your quick action from the options provided and add it below 'Salesforce Mobile and Lightning Experience Action' .

In order to display vf page in the aura component using iframe, we have to follow the steps as mentioned below:

    

• Go to Setup.
• Write Session settings in quick find  search box .
• Select Session Settings.
• Uncheck ”Enable clickjack protection for customer Visualforce pages with headers disabled” under Clickjack Protection section.

OUTPUT:

CONCLUSION

By following above-mentioned steps and given approach, We were able to display vf page in aura component by disabling Clickjack Protection via quick action using an IFrame.

If you have any questions you can reach out our Salesforce Consulting team here.