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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#1,639 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
62/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend, security

Línea de trabajo

El atributo sandbox se establece en src/components/CodeEmbed/frame.tsx, y el issue indica que esa línea es el único cambio necesario. Lee el archivo para ver qué tokens allow- están presentes y luego revisa el atributo allow, que el issue pide dejar sin cambios. Reproduce el problema con los ejemplos de referencia requestPointerLock() y saveJSON(). Se considera terminado cuando el bloqueo del puntero se activa y las descargas se inician con una acción del usuario, y una prueba cubre el valor de sandbox. Pregunta a los mantenedores por qué se omitieron los flags antes de cambiarlos, ya que el razonamiento de seguridad no está indicado.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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?

Lenguaje dominante
MDX
Estrellas
97
Forks
330
Merge medio
2 d 7 h
PR fusionados (30 d)
13

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de processing/p5.js-website

Todos los issues de processing/p5.js-website

Issues similares

Más issues de Web Dev

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.