Sketch iframes block pointer lock and file downloads (requestPointerLock and save* examples do nothing)

Aperta Adatta ai principianti
  • Qualcosa non va?
#1,639 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
62/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend, security

Direzione di ricerca

L'attributo sandbox è impostato in src/components/CodeEmbed/frame.tsx, e la issue indica che quella riga è l'unica modifica necessaria. Leggila per vedere quali token allow- sono presenti, poi controlla l'attributo allow, che la issue chiede di lasciare invariato. Riproduci con gli esempi di riferimento requestPointerLock() e saveJSON(). È completato quando il blocco del puntatore si attiva e i download partono su azione dell'utente, e un test copre il valore di sandbox. Chiedi ai maintainer perché i flag sono stati esclusi prima di modificarli, dato che il ragionamento sulla sicurezza non è indicato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Most appropriate sections of the p5.js website?

Reference, Examples

What is your operating system?

Linux

Web browser and version

152.0.7977.64

I reproduced this in Chromium. The cause is the sandbox attribute on the iframe, which is in the HTML the site sends.

Actual Behavior

The iframe that runs sketches on the site has this sandbox in src/components/CodeEmbed/frame.tsx:

allow-scripts allow-popups allow-modals allow-forms allow-same-origin

It has no allow-pointer-lock and no allow-downloads. So two things fail silently:

  • requestPointerLock() is blocked. The browser logs "Blocked pointer lock". This is the problem in #789.
  • Downloads are blocked. The saveJSON() and saveStrings() examples on the reference pages download nothing. The Download button in the Loading and Saving Data examples (JSON and Table) does nothing too.
Expected Behavior

These examples should work the same as they do in the web editor. The pointer lock should engage, and the files should download when the user clicks or presses a key.

Steps to reproduce
  1. Open the requestPointerLock() reference page, double click the sketch, and check the console.
  2. Open the saveJSON() reference page, double click the sketch, and check for a download.
  3. Open the Examples page for Loading and Saving Data, then JSON, and click the Download button.

On a local build I added allow-pointer-lock allow-downloads to the sandbox. The pointer lock then worked, and numbers.json and data.txt downloaded.

I checked the reference examples that call save functions. They run on a key press, a double click or a button, so none of them should start a download on page load.

The fix is small. I would change only the sandbox line and add a test for it. I did not touch the allow attribute, so this does not overlap with #1583.

Related: #789

Would you like to work on the issue?

Yes, I would like to work on it. Is there any reason these flags were left out on purpose?

Lingua principale
MDX
Stelle
97
Fork
330
Merge medio
2g 7h
PR unite (30g)
13

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di processing/p5.js-website

Tutte le issue di processing/p5.js-website

Issue simili

Altre issue su Web Dev

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.