how to use nuxt-directus inside nuxt-devtools when on remote editing?

[Sandros94]

So, I feel I've got alot to learn when it comes to CORS and Content Security Policy in general.

I did already add the following line to my directus docker deployment:

CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_ANCESTORS: "array:http://localhost:*,self"

and if I try to access it from a local npm run dev the directus iframe inside devtools works as expected.

But now I wanted to start using vscode inside the devtools too, so I followed antfu information and deployed a vscode-server inside my wsl instance, and I'm running npm run dev from within that. But now, when I try to open the directus inside my devtools, I get the following error in the console:

Refused to frame 'https://mydirectuswebsite.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

How should I manage this? Where could I get more information (or docs) to learn a bit more about this topic and fix this error?

[Sandros94]

Oh, currently I'm still connecting to the node dev server inside the wsl with localhost:3000, but my goal would be to connect to hostname.local:3000 of the machine in my private network where the dev server is hosted (accessing both vscode and directus via its devtools).

[Intevel]

@Sandros94 Hey did you setup the CORS Policy on your directus server, as we mention in the documentation?

[Intevel]

Checkout https://nuxt-directus.netlify.app/getting-started/devtools#setup

[Sandros94]

You have to set CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_ANCESTORS=array:http://localhost:*,self

I did mentioned in the original post that this is being specified in my docker-compose. And in fact if I'm in the devtools (by starting npm run dev in powershell or cms) from my host machine it does work as intended. But if I try to run my dev server and open up the devtools when I'm under a WSL it looks like it doesn't pick up the http://localhost:* frame ancestor, and it falls back to self (I imagine).

Could this be caused by the fact that I'm connecting from the browser (in windows host), to the dev server inside the WSL (basically a ubuntu VM integrated into windows) and trying to connect to a staging directus deploy under a different domain?

[Sandros94]

Ok never mind, sorry to have bothered.
Just to be sure I doublechecked the latest deploy of the staging and it didn't pick up the updated frame ancestor env variable. So it is still trying to resolve solely self.

[Sandros94]

In reality this turned out to be caused by #184