I have created a VS Code extension through which I render Figma shared files inside web view. I have used iFrame to render shared figma url. Below is the code for web view content.
const panel = vscode.window.createWebviewPanel(
'figmaWebview',
'Figma',
vscode.ViewColumn.One,
{
enableScripts: true,
enableCommandUris: true,
enableForms: true
}
);
panel.webview.html = getWebviewContent(fileDetails);
// ________________________________________________
function getWebviewContent({
fileId,
fileName
}: {
fileId?: string;
fileName?: string;
}) {
const figmaURL = encodeURI(
`https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/file/${fileId}/${fileName}`
);
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${fileName}</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<iframe
src="${figmaURL}"
allowfullscreen
></iframe>
<style>
iframe {
border: none;
width: 100vw;
height: 100vh;
}
</style>
</body>
</html>`;
}
It opens a figma page in iframe and shows login screen, if we click on login it gives error saying allow-popups permission not set, tried explicitly adding it to sandbox attribute but still it gives same error, I think VS Code is restricting the popups.
I inspected the official Figma for VsCode extension and found that they are setting the cookie before loading the figma url, but I am not getting enough resource on how to get the cookie from figma.
<script nonce="">
const iframe = document.getElementById('figma-iframe');
window.addEventListener('message', (message) => {
const {data} = message;
if (data.type === 'LOAD_IFRAME') {
document.cookie = `__Host-figma.integ=${
data.data.cookieValue
}; path=/; Secure; SameSite=None; __Host-figma.integ.mac=${
data.data.macCookieValue || ''
}; path=/; Secure; SameSite=None; `;
const url = new URL(`https://www.figma.com/dev_handoff/vscode/${data.data.href}`);
iframe.src = url.toString();
} else if (message.origin === iframe.contentWindow.origin) {
window.parent.postMessage(data, '*');
} else {
iframe.contentWindow.postMessage(data, 'https://www.figma.com');
}
});
window.parent.postMessage({type: 'IFRAME_CONTAINER_READY'}, '*');
</script>