search

vuejs / devtools

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools.vuejs.org/
MIT License
1.7k stars 122 forks source link

feat(overlay): add `credentialless` attribute for iframe #614

Closed hrynevychroman closed 2 months ago

hrynevychroman commented 2 months ago

When using the WASM module to generate image previews, I faced some errors with showing iframe after setting this parameters to server inside vite.config.js

server: {
  headers: {
    'Cross-Origin-Embedder-Policy': 'require-corp',
    'Cross-Origin-Opener-Policy': 'same-origin',
  },
},

The fix for this was setting the credentialless attribute for all iframe; I think that we should add this to our overlay/iframe, too.

Chrome Blog: link

Video Example: https://github.com/user-attachments/assets/2fbce091-91fd-4fad-a948-7e24f081a0a9

netlify[bot] commented 2 months ago

Deploy Preview for vue-devtools-docs canceled.

Name Link
Latest commit d7bb8b4fba8d1d90df05aa2e46dba2976c0d876e
Latest deploy log https://app.netlify.com/sites/vue-devtools-docs/deploys/66e99621ac272800080e14a1
webfansplz commented 1 month ago

Remove it temporarily because I found that adding it causes the localstorage state in the iframe to be isolated from the outside, causing some persistent state failures in the devtools client.

sqcheah commented 1 month ago

another thing to note is that it will cause the devtool fail to load in stackblitz playground

refer: https://github.com/stackblitz/webcontainer-core/issues/1269 antfu's solution is to optionally allow iframe props: https://github.com/nuxt/devtools/commit/0eb7a82bef1639ebfeace68f73ccebc11ea8e0a6

webfansplz commented 1 month ago

another thing to note is that it will cause the devtool fail to load in stackblitz playground

refer: stackblitz/webcontainer-core#1269 antfu's solution is to optionally allow iframe props: nuxt/devtools@0eb7a82

I think this is a better way to handle this case, PR Welcome.