Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン 初心者向け
  • 何か問題がありますか？
#9,323 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 3 日以内に返信

@limzykenneth がすでに取り組んでいます。

2026年10月24日 から。

  • #9324 @limzykenneth による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript
領域
backend, internationalization

調査の方向性

src/friendly_errors/fes.jsから始めます。ここでissueは、ライブラリの読み込み中に失敗するwindow.localStorageの読み取りを特定しています。提供されたsandboxed iframeの例で再現し、翻訳キャッシュがストレージの失敗をどのように処理するか確認します。ストレージがブロックされた状態でp5.jsが読み込まれ、setup()が実行されれば完了です。issueでは、両方のsetItem呼び出しを保護することにも触れています。

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
JavaScript
スター
24.2k
フォーク
3.9k
平均マージ
3日 3時間
マージ済み PR（30日）
34

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

processing/p5.js のほかの issue

processing/p5.js の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。