search

storybookjs / addon-designs

A Storybook addon that embeds Figma, websites, or images in the addon panel.
https://storybookjs.github.io/addon-designs
MIT License
876 stars 72 forks source link

Figma url not loading #242

Closed refugedesigns closed 4 months ago

refugedesigns commented 4 months ago

Affected design types

Describe the bug

I installed storybook version 8.0.8 and added the storybook-addon-design but, the panel shows an error "refuse to connect" with I add a figma link.

image image

How to reproduce the bug?

  1. install storybook-addon-design version 8.0.2
  2. add plugin to addons in main.js/main.ts
  3. restart storybook
  4. add a design object in any storybook config file in the parameters object with type:"figma" and url:"figma image url"
  5. design tab shows "refused to connect"

Expected behaviour

Should load the picture from the figma link

Environment

Affected versions

8.0.2

Storybook versions

8.0.8

amorfee commented 4 months ago

Encountering the same issues. Appears to be due to Figma's Content Security Policy for frame-ancestors:

Refused to frame 'https://www.figma.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' vscode-webview: vscode-file:".

pocka commented 4 months ago

Cannot reproduce, live demo is working. Please fill complete reproduce steps.

But seeing your screenshot contains a new Figma share URL format, I suspect this is same as #239. Their embed page does not include CSP so I guess the addon fallbacks to regular iframe embeds. If this is due to the new URL format, workaround is (from https://github.com/storybookjs/addon-designs/issues/239#issue-2301111721):

...So my workaround so far has been to use the Copy link to selection and simply swap out design with file.

amorfee commented 4 months ago

Confirming changing design to file worked in my instance.

amir-e-uidb commented 4 months ago

same here, design to file working like a charm! good luck