Allow clipboard permissions in iframe preview

[kevin940726]

What kind of change does this PR introduce?

I would say it's both a bug fix and a feature? Not sure.

What is the current behavior?

Currently, copying and pasting from the clipboard doesn't work in the preview iframe in the editor. This is because the preview frame is in another domain and some browsers (chrome and firefox for instance) block cross-origin access to the clipboard. Based on this article, the solution is to add the necessary permission to the allow attribute for the iframe. However, clipboard permissions are missing in the allow list.

What is the new behavior?

Add clipboard-read and clipboard-write to the preview frame to allow accessing the clipboard.

What steps did you take to test this? This is required before we can merge, make sure to test the flow you've updated.

1. Visit https://codesandbox.io/s/eager-bird-087o05?file=/index.html
2. Click on the button in the iframe preview. Notice there's an error outputted on top but not the copied content.
3. Use devtools to add clipboard-read to the allow list of the iframe, and reload the iframe (it will not work without reloading).
4. Try again, and the copied content should now show on the screen.

Checklist

• Documentation N/A
• Testing
• Ready to be merged
  
• Added myself to contributors table
  

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit fed645a:

Sandbox	Source
Notifications Test	Configuration
mutable-mountain-r856rm	PR