I've a scenario where a service (Read as fetchDomainForUser() in code snippet below) is used to create a URL which is used in iframe.
App allow domains by adding CSP headers - frame-src but there are many domains that are possible. Whitelisting any domain is not possible.
Is it possible to load '.aspx' content outside of iFrame, and then add content to iframe?
const [contentWindow, setContentWindow] = React.useState<Window | null>(null);
const iFrameUrl = `${fetchDomainForUser()}/solution.aspx`; // fetchDomainForUser() provides domain dynamically
React.useEffect(() => {
if (contentWindow) {
(async (): Promise<void> => {
const token = fetchToken();
const form = contentWindow.document.createElement('form');
form.setAttribute('action', iframeUrl);
form.setAttribute('method', 'POST');
const accessToken = contentWindow.document.createElement('input');
accessToken.setAttribute('type', 'hidden');
accessToken.setAttribute('name', 'access_token');
accessToken.setAttribute('value', token || '');
form.appendChild(accessToken);
contentWindow.document.body.appendChild(form);
form.submit();
})().catch(() => {
});
}
}, [contentWindow, iframeUrl]);
const onIFrameRef = React.useCallback((iframeElement: HTMLIFrameElement | null) => {
setContentWindow((iframeElement && iframeElement.contentWindow) || null);
}, []);
return <iframe width={size.width} height={size.height} style={iframeStyle} ref={onIFrameRef} />;