I’m working on a Figma plugin built with React and trying to implement OAuth authentication. According to the Figma plugin documentation, I need to create an iframe using figma.showUI() and then redirect it to my own domain.
The process should work like this:
- Plugin creates iframe with figma.showUI()
- Iframe redirects to my server using something like
window.location.href = 'https://mydomain.com/auth'
- This puts the iframe on my domain for OAuth flow
But when I try the redirect, I get this CSP error:
Refused to frame ‘https://mydomain.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘none’”.
I’ve looked through the plugin documentation but can’t find where to configure the Content Security Policy settings to allow framing my domain. How do I modify the frame-ancestors directive to make this OAuth flow work properly?
That CSP error is coming from your server, not Figma. Your server’s blocking itself from being embedded because of the frame-ancestors 'none' policy. You need to update your CSP header to allow Figma domains. Add frame-ancestors https://*.figma.com https://figma.com to your CSP config. I hit this same issue last month and it took forever to figure out - the CSP isn’t controlled by the plugin, it’s your backend setup. Check your server’s HTTP headers or web server config files where you’ve got CSP defined.
This error totally caught me off guard during a similar integration. The CSP directive is server-side, but here’s what others missed - wildcards in production are risky. Sure, frame-ancestors https://*.figma.com works, but I’d go with frame-ancestors https://www.figma.com https://figma.com instead. Better security. Also, hosting platforms like Vercel or Netlify can override your app-level headers with their own CSP config. I wasted hours debugging this once before realizing the platform was injecting its own headers. If your changes aren’t working, check your host’s docs first.
The answers above are right about fixing CSP headers server-side. But honestly, managing OAuth flows and CSP configs manually is a nightmare.
I’ve hit this same problem multiple times. Best solution I found? Set up automation that handles the entire OAuth dance so you don’t have to mess with server configs constantly.
Latenode can automate your whole OAuth flow. Skip the iframe redirect to your domain and the CSP headaches - just create a workflow that handles authentication server-side. Your plugin triggers the automation, Latenode manages OAuth tokens, redirects, and API calls.
Used this on a project with similar iframe restrictions. Latenode handled OAuth with Google APIs while keeping the plugin clean and simple. No CSP errors, no server config changes.
The automation stores tokens securely and sends back only what your plugin needs. Way cleaner than iframe redirects.
Check it out: https://latenode.com
hey there! u gotta tweak ur server’s CSP. make sure to set frame-ancestors to allow figma, like frame-ancestors 'self' https://*.figma.com. that should solve the issue and let the oauth flow work! good luck!