Provide a better error message when user Content Security Policy prevent the simulator from being embedded

[loick]

Hi, I'm trying the Slice Simulator and it does not seem to be working for me. Here is what I get:

Context

I'm using this documentation: https://prismic.io/docs/technical-reference/slicemachine-adapter-next
So I basically have in my component:

import { SliceZone } from '@prismicio/react'
import { SliceSimulator as PrismicSliceSimulator } from '@slicemachine/adapter-next/simulator'

import { components } from '../slices'

export const SliceSimulator = () => (
  <PrismicSliceSimulator
    sliceZone={(props) => <SliceZone {...props} components={components} />}
  />
)

This component is then used in a Page component within my app:

const SliceSimulatorPage = () => {
  return <SliceSimulator />
}
export default SliceSimulatorPage

Might help as well, here is my slicemachine config:

{
  "apiEndpoint": "https://slowy.cdn.prismic.io/api/v2",
  "repositoryName": "slowy",
  "adapter": {
    "resolve": "@slicemachine/adapter-next",
    "options": {
      "lazyLoadSlices": false
    }
  },
  "libraries": ["./src/slices"],
  "localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
}

And these are the prismic versions I'm using:

{
  "@prismicio/client": "7.1.0",
  "@prismicio/next": "1.3.3",
  "@prismicio/react": "2.7.1",
  "@slicemachine/adapter-next": "0.3.3",
  "prismic-cli": "4.2.3",
  "slice-machine-ui": "1.3.0",
}

The only package I'm not up to date on is the slice machine because of the other bug reported here: prismicio/prismic-react#189

Please, let me know if I can be of any help.

👋

[lihbr]

Hey @loick, thanks for the comprehensive issue again.

I'm curious about this error you're getting:

Any chance you have some Content Security Policy set up on your website? Maybe something like Next.js headers, React Helmet or something similar? If so, can you try disabling/loosening them for the Simulator page? (at least the X-Frame-Options one which prevents a page from being embedded)

This could be caused by a Chrome extension also, if you're not sure about CSP, can you try running it in a guest session to be sure?

Let us know about it ☺️

[loick]

Oh yeah indeed you're right, I didn't check that part, my bad. I indeed have this header in place 😬

[lihbr]

No worries! We should try to detect that so we can provide a better error message ☺️

I'm transferring this issue to the Slice Machine repository 🚀

[comeprismic]

Hi,
The team decided to not prioritize a fix for this issue for now. I close this issue, it can be used as a reference for any user that encounters the problem in the future.

Thanks again for submitting it.

All the best