DOMWindow postMessage execution fails in Figma plugin with origin mismatch error

Other Questions Figma
1

I’m working on a custom Figma plugin and running into trouble when trying to send data from my HTML interface to the main plugin code. Everything works fine until I try to use the postMessage function to communicate between the UI and backend.

Here’s my button handler code that’s causing the problem:

document.getElementById('create-btn').addEventListener('click', () => {
  const title = document.getElementById('post-title').value
  const author = document.getElementById('author-name').value
  const content = document.getElementById('post-content').value
  const themeMode = document.getElementById('theme-toggle').checked
  const selectedOption = document.querySelector('input[name="options"]:checked').value
  parent.postMessage({ pluginMessage: { title, author, content, themeMode, selectedOption } })
})

The browser throws this error message:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('https://www.figma.com').

I’m developing this locally and testing it inside Figma’s browser environment. Not sure how to fix this origin mismatch issue. Any ideas on what I’m missing here?

2

had this issue too! just add the target origin to postMessage. use parent.postMessage({ pluginMessage: { title, author, content, themeMode, selectedOption } }, '*'). that should clear up the origin mismatch error!

3

This happens because postMessage needs an explicit origin parameter in Figma’s sandboxed environment. Without it, the browser defaults to ‘null’ which breaks Figma’s security policies. Adding ‘’ as the second parameter fixes this by allowing cross-origin communication. Just heads up - using '’ skips origin validation completely, so only do this if you trust the environment. For production plugins, you’d want to use ‘https://www.figma.com’ instead of the wildcard for better security.

4

yeah, classic figma plugin gotcha. the postMessage api needs you to specify where you’re sending the msg. change your line to parent.postMessage({pluginMessage: {title, author, content, themeMode, selectedOption}}, '*') - the asterisk accepts any origin and fixes the sandbox issue.

5

This happens because Figma has strict security rules for cross-origin messaging. You need to add a target origin as the second argument for postMessage to work in Figma plugins. I’ve found that using ‘*’ as the target origin usually does the trick:

parent.postMessage({ pluginMessage: { title, author, content, themeMode, selectedOption } }, '*')

This lets the browser accept messages from any origin, which fixes the communication issue between your UI and the plugin backend.