Playground doesn't `allow-modals`

[ericrav]

Summary

Playground examples can't run functions like Window.alert(), Window.confirm(), Window.print() and Window.prompt(), because they require the iframe to allow modals.

URL

https://developer.mozilla.org/en-US/play?id=5LQLRl7WZd5jYDacre%2FTXtVGS%2FhsJouAHE2pExEMRUtnJaPVVd3kHX%2FzTn38Jvoen2uLMbThfw7c7zBU

Reproduction steps

1. Visit https://developer.mozilla.org/en-US/docs/Web/CSS/@page#examples
2. Go to examples section & click the "Print Webpage" button in the example
3. Print dialog does not open, open dev tools and see error that call to print() was ignored

Expected behavior

Examples can successfully demonstrate the relevant web API functionality

Actual behavior

The APIs in the example do not work, and the browser logs the error: Ignored call to 'print()'. The document is sandboxed, and the 'allow-modals' keyword is not set.

Device

Desktop

Browser

Chrome

Browser version

Stable

Operating system

Mac OS

Screenshot

Anything else?

I believe this is the line that needs to be updated: https://github.com/mdn/yari/blob/55dcf6fe840f9d9b883e1979e86810519f92a43b/client/src/playground/index.tsx#L391

Validations

• [X] I have read the Community Participation Guidelines.
• [X] I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[mohammednumaan]

Hey @caugner @ericrav @Josh-Cena . This issue is relevant. The Live Example in this section is broken too. On pressing the button, the output is always:

This is likely due to the allow-modal option missing in the sandbox attribute of the iframe in this file.

The only question I have is, will adding this option have an impact on security? If possible, can I get assigned to resolve this issue?