I'm only getting a black box for embed

[motleydev]

I'm using this with gatsby-mdx plugins and the embed is a black box.

My plugin usage:

          {
            resolve: 'gatsby-remark-embedded-codesandbox',
            options: {
              // Required:

              // Example code folders are relative to this dir.
              // eg src/_examples/some-example-folder
              directory: `${__dirname}/src/examples/`,

              // Optional:

              // Custom protocol for parsing the embedding link
              // default:
              protocol: 'embedded-codesandbox://',

              // Customise Codesandbox embedding options:
              // https://codesandbox.io/docs/embedding#embed-options
              // default:
              embedOptions: {
                view: 'editor',
                hidenavigation: 1,
              },

              // Customise the embedding iframe given the generated url
              // default:
              getIframe: url => `<iframe src="${url}" class="embedded-codesandbox" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`
            }
          },

Here's the link that get's generated:

https://codesandbox.io/api/v1/sandboxes/define?embed=1&parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgFYLIgDGA9qgC4yVIjYAOpAThQASZgCGArlGwBQBKVgF4AfKwA6IABIwoUUqwDqzKOmkBuEAF8ANCHqdiAa04BzGPjjkkoMpWoU7IALac0tNJlwFdOgKA&query=hidenavigation%3D1%26view%3Deditor

[motleydev]

The issue is that the sandbox values are getting rendered as a comma separated list.

[karlhorky]

Hm, your link above seems to work for me (redirects to https://codesandbox.io/embed/oq040xjn6y?hidenavigation=1&view=editor). Are you still experiencing problems? Maybe CodeSandbox fixed this?

[karlhorky]

The issue is that the sandbox values are getting rendered as a comma separated list.

Ah I see what you mean now, the sandbox attribute on the iframe is not being set correctly:

<iframe ... sandbox="allow-modals,allow-forms,allow-popups,allow-scripts,allow-same-origin">

[karlhorky]

Very interesting - just playing around with this a bit and it seems like it converts spaces to commas (but only on the sandbox attribute!). Not sure where this is coming from... Remark or Gatsby themselves?

One way to get around it for now is to remove the sandbox attribute altogether, although that doesn't seem like a good solution for security in the long run...

[karlhorky]

Hm, not sure how you're using the plugin @motleydev, but for me, I'm using gatsby-plugin-mdx with the gatsbyRemarkPlugins configuration option, and it seems like the MDX code that's generated in utils/gen-mdx.js at the location below is returning an array instead of a string. See how sandbox is returned as an array but sandbox-2 is a string...

https://github.com/gatsbyjs/gatsby/blob/09d138d02f9f4a83dcd61cc9a37d6d5ee4686236/packages/gatsby-plugin-mdx/utils/gen-mdx.js#L115-L120

I'm not sure if this is a bug in gatsby-plugin-mdx or one of its dependencies, but getting closer...

cc @ChristopherBiscardi

[karlhorky]

Seems like it's actually a bit similar to the description in mdx-js/mdx#146 and mdx-js/mdx#158 too..

[karlhorky]

Hm, looks like a bug in MDX. If I call .join(' ') on the .sandbox property if it's an array, it fixes the issue.

Opened a PR at the MDX repo for this: https://github.com/mdx-js/mdx/pull/715/

[karlhorky]

@elboman @motleydev PR has been merged! This issue is fixed with @mdx-js/mdx@1.1.6.

This issue can now be closed.

[karlhorky]

@elboman This can be closed now, whenever you get a chance.

[motleydev]

Thanks!

[karlhorky]

No problem, glad to help :)