Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[p5.js 2.0+ Bug Report]: p5.js fails to load when localStorage is blocked (regression in 2.4.0-rc.1)

Cerrado Apto para principiantes
  • ¿Algo no está bien?
#9,323 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 3 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript
Área
backend, internationalization

Línea de trabajo

Empieza con src/friendly_errors/fes.js, donde el issue identifica la lectura de window.localStorage que falla durante la carga de la biblioteca. Reproduce el problema con el ejemplo proporcionado de un iframe sandboxed y comprueba cómo la caché de traducciones gestiona los fallos de almacenamiento. El trabajo está listo cuando p5.js se carga y setup() se ejecuta con el almacenamiento bloqueado; el issue también menciona proteger ambas llamadas a setItem.

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

Descripción

Area:Core Internationalization
Most appropriate sub-area of p5.js?
  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • WebGPU
  • p5.strands
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)
p5.js version

2.4.0-rc.1 (also on main). 2.3.4 works.

Web browser and version

Chrome 152.0.7977.64

Operating system

Linux (Ubuntu 24.04.4 LTS)

Steps to reproduce this

Hi @limzykenneth, as discussed on Discord here is the issue.

In 2.4.0-rc.1, p5.js does not load at all when localStorage is blocked. setup() never runs and the console shows:

Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.

The cause is line 7 of src/friendly_errors/fes.js. It reads window.localStorage as soon as the library loads. Browsers throw a SecurityError there when storage is blocked. This happens in sandboxed iframes without allow-same-origin, which sites that run user code often use. MDN says it also happens when a user blocks cookies or site data. Nothing catches the error, so the whole library stops. Both p5.js and p5.min.js are affected.

This is like #4862, where document.cookie broke sketches in sandboxed iframes. The code came from #9212. In a local build, wrapping this one read in try/catch was enough to make the sketch run.

Steps:
  1. Save the snippet below as an HTML file and open it.
  2. The left iframe (2.3.4) shows a green canvas.
  3. The right iframe (2.4.0-rc.1) stays blank and the console shows the error above.
Snippet:
<!doctype html>
<html>
<head><meta charset="utf-8"></head>
<body>
  <iframe sandbox="allow-scripts" width="220" height="140" srcdoc="
    <script src='https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js'></script>
    <script>function setup(){ createCanvas(200,120); background('seagreen'); }</script>"></iframe>

  <iframe sandbox="allow-scripts" width="220" height="140" srcdoc="
    <script src='https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js'></script>
    <script>function setup(){ createCanvas(200,120); background('seagreen'); }</script>"></iframe>
</body>
</html>
Possible fix
  • Wrap the getItem call in try/catch and treat a failure as "nothing cached".
  • Wrap the two setItem calls too. Right now a failed setItem makes the code fetch the same translation again from the CDN.
  • Or remove the localStorage cache entirely. I'm happy to go with whichever you prefer.

A related issue: the cache key is only navigator.language (e.g. zh-CN), with no p5 version. After a user upgrades p5, the old cached translation is still used. Adding VERSION to the key would fix it. I can include it here or in a separate PR.

I would like to work on this. I used an AI assistant to help investigate this bug.

Lenguaje dominante
JavaScript
Estrellas
24.2k
Forks
3.9k
Merge medio
4 d 12 h
PR fusionados (30 d)
39

Preparar el entorno

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

Todos los issues de processing/p5.js

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.