Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Playground plugin: Show a useful error when the iframe can't be loaded due to CORP mismatch #208

Open
bgrgicak opened this issue Mar 29, 2024 · 1 comment
Labels
Enhancement New feature or request Playground plugin

Comments

@bgrgicak
Copy link
Collaborator

Some hosts might have Content-Security-Policy headers which would prevent the Playground plugin from loading the sandbox.

We should detect this and show an error to users, so they know why Playground doesn't work.

We should also document this in the readme as a known limitation.

@bgrgicak bgrgicak added Enhancement New feature or request Playground plugin labels Mar 29, 2024
@adamziel
Copy link
Collaborator

This could be fixed, not just documented. The error message would only be needed to provide instructions about adding a corp=yes parameter to the query or so. See:

@adamziel adamziel changed the title Playground plugin: show error if site can't load iframe content Playground plugin: Show useful message when the iframe can't be loaded due to CORP mismatch Mar 29, 2024
@adamziel adamziel changed the title Playground plugin: Show useful message when the iframe can't be loaded due to CORP mismatch Playground plugin: Show a useful error when the iframe can't be loaded due to CORP mismatch Mar 29, 2024
bgrgicak added a commit that referenced this issue Apr 5, 2024
Fixes #213 #208

<!-- Thanks for contributing to WordPress Playground Tools! -->

## What?

This PR adds support for exporting Playground data and implements an
error modal when Playground fails to load.

## Why?

We would like to allow users to export snapshots of their sites that can
later be imported into Playground (a feature in Playground isn't
implemented).

Some users reported errors like CORS issues and we need to ensure users
have a next step to debug the issue.

## How?

Playground snapshot is now an option in Tools > Export. 

By catching errors while Playground is loading and displaying an alert. 

## Testing Instructions

<!-- Please include step by step instructions on how to test this PR.
-->
1. Check out the branch.
2. Start a site with the plugin running for example by using wp-env
```
cd packages/playground
wp-env start
```
3. Go to wp-admin > Tools > Export
4. Select _Playground snapshot_ and export it
5. Ensure that the downloaded zip contains data
6. Add one of the headers to the top of `playground.php` 
```
header("Content-Security-Policy: default-src 'self'");

header("Content-Security-Policy: default-src 'self' style-src 'self' 'unsafe-inline' 'unsafe-eval'; script-src 'self' 'unsafe-inline' 'unsafe-eval';");
```
7. Try starting a sandbox
8. Confirm that you see an error alert
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Enhancement New feature or request Playground plugin
Projects
None yet
Development

No branches or pull requests

2 participants