Sorry for adding as answer and not as comments, as I can't post large comment
Thank you Mohith for the answer.
Yes, the external site which we are planning to embedding has already gone throguh security review and as part of submission we will generate ZAP report and fix all the high/medium issues (if any). SSO/Canvas is already in the future road map.
But for the basic version, we plan to do:
Open a Web tab, for user to sign in with External App user details.
View the site in the Web tab and embed Widget within Account page layout
A VFP with standard controller Account will be created, which will pass the required info to the child page of External website (By windows.postMessage()) to load the widget based on passed Account Id.
See below sample code for Widget:
<apex:page sidebar="false" showHeader="false" standardController="Account"> <!-- Code in Visualforce Page -->
<apex:includeScript value="{!$Resource.jquery}"/>
<h1>This Text is written in Parent page. Below content starts from Child Page. </h1><br/>
<apex:iframe src="https://example.com/MyAccountWidget" scrolling="true" id="theIframe" height="600px" width="100%"/>
<script>
$('#iframeid').ready(function () {
sendMessageToChildWindow();
});
function sendMessageToChildWindow()
{
let win = window.frames.theIframe;
win.postMessage("Hello child page, I hope you got this message from Account Name {!HTMLEncode(Account.Name)} with Account Id {!HTMLEncode(Account.Id)}" , "https://example.com");
}
</script>
</apex:page>
**External App Widget Code (non Salesforce page):**
<HTML>
<h2>Below is the message from Parent Window</h2>
<div id="results"></div>
<script>
var results = document.getElementById('results');
function bindEvent(element, eventName, eventHandler) {
if (element.addEventListener) {
element.addEventListener(eventName, eventHandler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, eventHandler);
}
}
// Listen to message from child window
bindEvent(window, 'message', function (e) {
results.innerHTML = e.data; // Instead of result actual widget will be displayed here.
});
</script>
</HTML>
Please let us know thoughts on using windows.postMessage() to load content according to the paramters from parent page.
We are also planning to discuss above with Salesforce Security Office Hours.
Thanks.
