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.

Sign up for GitHub

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

Jump to bottom

Live examples using window.open are broken #34350

Open
Josh-Cena opened this issue Jun 22, 2024 · 4 comments
Open

Live examples using window.open are broken #34350

Josh-Cena opened this issue Jun 22, 2024 · 4 comments
Labels
Content:WebAPI Web API docs

Comments

@Josh-Cena
Copy link
Member

Josh-Cena commented Jun 22, 2024 •
edited
Loading

The following examples use window.open:

Error in Chrome:

Blocked opening 'https://live.mdnplay.dev/en-US/docs/Web/API/Blob/runner.html?id=creating_a_url_representing_the_contents_of_a_typed_array' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.

@OnkarRuikar from Slack (in response to an attempt to add allow-popups to the macro argument):

Your macro call yields :

<iframe allow="allow-popups" sandbox="allow-same-origin allow-scripts" loading="lazy">

The allow-popups need to be value of sandbox and not allow.

Need to edit macro to permanently add the value to sandbox: https://github.com/mdn/yari/blob/118f71bd9a0d3e7eb56524f4479d1dd83d2283d2/kumascript/macros/EmbedLiveSample.ejs#L103

Perhaps this can be another parameter? Perhaps we can fix the examples to not use window.open anymore? Not sure.

(By the way, if you actually paste that URL in a new tab the page is blank, so I suspect it just doesn't work)
@github-actions github-actions bot added Content:WebAPI Web API docs needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. labels Jun 22, 2024
@Josh-Cena Josh-Cena added help wanted If you know something about this topic, we would love your help! and removed needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. help wanted If you know something about this topic, we would love your help! labels Jun 22, 2024
This was referenced Jun 22, 2024
Closed
Closed
Closed
@OnkarRuikar
Copy link
Contributor

Perhaps this can be another parameter?

We need to add these perms to playground output iframe as well, so hard coding would be more suitable for both. BTW would love to see the deprecated params eliminated from the macro.

(By the way, if you actually paste that URL in a new tab the page is blank, so I suspect it just doesn't work)

The example needs fixing. It is using iframe's location and not the blob page location.

Following code with the macro fixed does open the blobParts HTML string a new tab:

function showViewLiveResultButton() {
  if (window.self !== window.top) {
    // Ensure that if our document is in a frame, we get the user
    // to first open it in its own tab or window. Otherwise, this
    // example won't work.
    const p = document.querySelector("p");
    p.textContent = "";
    const button = document.createElement("button");
    button.textContent = "View live result of the example code above";
    p.append(button);
    const blobParts = ['<html><body><h1>hey1</p></body></html>'];
    const blob = new Blob(blobParts, { type: "text/html" });
    const url = URL.createObjectURL(blob);
    button.addEventListener("click", () => window.open(url));
    return true;
  }
}

showViewLiveResultButton()

Live demo
@Josh-Cena
Copy link
Member Author

Josh-Cena commented Jun 23, 2024 •
edited
Loading

I was suggesting that there can be another parameter to set sandbox so we don't give every example allow-popups.

For context, this "open in separate page" thing was a workaround precisely for CSP settings (#19096 and its linked issues), but based on #29109 it seems this remains an unsolved issue for GH live samples.

cc @sideshowbarker may have some good ideas
@Josh-Cena Josh-Cena mentioned this issue Jul 9, 2024
Merged
@OnkarRuikar
Copy link
Contributor

Some examples require the live sample code to work on its own page and not in an iframe on the MDN page. Such examples are trying to automatically open live samples in new tab.

The issue is if we put live sample URLs directly in a new tab it doesn't work: https://live.mdnplay.dev/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API/runner.html?id=tag_example
I don't know if it was working before. Can we make live samples work standalone in new tabs? Can we make playground URLs to have a param that will make it show only the output?
@Josh-Cena
Copy link
Member Author

I'm not sure. I think it broke after we migrated to the new live sample system. It probably was working before, because it was specifically implemented to work around CSP settings, so I assume it was working at least when #19096 was made.

The best solution is obviously to make these examples work inline without requiring opening an external page.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:WebAPI Web API docs
2 participants
@Josh-Cena @OnkarRuikar