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

Enable modals by adding "allow-modals" to sandbox attribute. #12414

Closed
wants to merge 2 commits into from

Conversation

mohammednumaan
Copy link

Summary

This PR adds the allow-modals to the sandbox attribute, enabling the playground environment to open modals.

Fixes #12023

Problem

Playground examples can't run functions like window.alert, window.prompt and much more because the iframe requires the allow-modals in the sandbox attribute. Not enabling allow-modals doesn't allow any playground which uses modals to be opened, for example this.

Solution

This PR adds the allow-modals value to the sandbox attribute and resolves the issue.


Screenshots

Before

image

After

image


@mohammednumaan mohammednumaan requested a review from a team as a code owner January 9, 2025 09:14
@github-actions github-actions bot added the macros tracking issues related to kumascript macros label Jan 9, 2025
@skyclouds2001
Copy link
Contributor

skyclouds2001 commented Jan 11, 2025

see also #12387 mdn/content#38645
and it is duplicate of #11693

@mohammednumaan
Copy link
Author

@caugner @LeoMcA Hey! Can you take a look at this PR, it would be greatly appreciated! Thanks!

@@ -100,5 +100,5 @@ if (height) { %> height="<%= height %>"<% }
%> src="about:blank" data-live-path="<%=env.url%>" data-live-id="<%=id%>"<%
if (allowedFeatures) { %> allow="<%= allowedFeatures %>"<% }
if ($token) { %> data-token="<%= JSON.stringify($token) %>"<% }
%> sandbox="allow-same-origin allow-scripts"></iframe></div><%
%> sandbox="allow-same-origin allow-scripts allow-modals"></iframe></div><%
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of doing this globally, it's now possible to add these attributes per-example, which is easier to keep track of in terms of usage. See the linked PRs for details.

@bsmth
Copy link
Member

bsmth commented Feb 20, 2025

Thanks a lot for the suggestion. I'm going to close this as there is now an alternate method to apply these attributes per-example. See the following PR for more info:

And some hints here:

https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Live_samples#sandbox

Thank you!

Sorry, something went wrong.

@bsmth bsmth closed this Feb 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
macros tracking issues related to kumascript macros
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Playground doesn't allow-modals
3 participants