P5.js-web-editor: Chrome 83 download from sandboxed iframes breaks save() functions

[awarua]

Nature of issue?

• Found a bug

Details about the bug:

In Chrome 83, download from sandboxed iframes was removed. This prevents functions such as image.save(), saveCanvas() or saveFrames() from working. According to the Chrome status page below, a flag on the embedded iframe is required to allow this:

chromestatus.com/feature/5706745674465280

• Web browser and version: Google Chrome | 83.0.4103.61 (Official Build) (64-bit)
• Operating System: MacOSX 10.15.4
• Steps to reproduce this bug:

1. Run the following from the 'sketches' or 'full' views of the p5js web editor (example):

function setup() {
  createCanvas(400, 400);
  background(255, 0, 0);
  saveCanvas('test', 'png');
}

1. In the developer console, you should see the following message:

1. Run the same code in the 'present' mode and it will work (example)

[Sladix]

Looks like the iframe is missing the allow-downloads value in the sandbox attribute here https://github.com/processing/p5.js-web-editor/blob/67f98246423a9bd87fb671d7f2f1e9929c27c5e8/client/modules/IDE/components/PreviewFrame.jsx#L365

[catarak]

Thanks for reporting! Hopefully this can be fixed by adding the allow-downloads flag.

[brytlao]

This is still an issue. Will the folks at p5js allow downloads?

[catarak]

This will be fixed for the next release.

[nnja]

I ran into this issue today as well. Looks like this missed the June 10th release by a few days. Any idea when the next release might be?

I would offer to update the docs for save, saveCanvas, etc to notify users that this functionality currently doesn't work in chrome but it looks like the docs are tied to the code / release schedule.

[catarak]

@nnja it will be this week!

[catarak]

@nnja actually I was able to do a release today, so now this is fixed in production 😄

[brytlao]

I confirmed that it works. Thank you 😄