processing / processing/p5.js-web-editor

Improper loading of static files on 404 pages

Open
#2,256 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area:Optimization Bug Priority:Medium
Dominant language
JavaScript
Stars
1.7k
Forks
1.7k
Avg merge
3d 4h
Merged PRs (30d)
8

Description

p5.js version

No response

What is your operating system?

None

Web browser and version

No response

Actual Behavior

image

This one is not easily reproducible because the 404 pages choose a sketch at random, so I can't link to a particular URL where it happens. However I noticed it on a 404 page which attempted to render this sketch: https://editor.p5js.org/p5/sketches/Advanced_Data:_Load_Saved_Table

This sketch loads a .csv file:

function preload() {
  table = loadTable("assets/bubbles.csv", "header");
}

The /server/views/404Page.js file re-writes that path:
https://github.com/processing/p5.js-web-editor/blob/1c05241e9ead4bc6f622188ba205c3329268fc72/server/views/404Page.js#L123-L131

And we get a URL https://rawgit.com/processing/p5.js-website/main/dist/assets/examples/assets//bubbles.csv which does not exist. The rawgit.com service has actually been deprecated since 2018 and it should not be used. But it does still work if we use the correct URL, which is https://rawgit.com/processing/p5.js-website/main/src/data/examples/assets/bubbles.csv as the file is located at https://github.com/processing/p5.js-website/blob/main/src/data/examples/assets/bubbles.csv. The fatal problem is that we are creating improper paths.

Expected Behavior

When the sketch is run by the previewServer, the output code is:

function preload() {
  table = loadTable("https://cdn.jsdelivr.net/gh/processing/p5.js-website@main/src/data/examples/assets/bubbles.csv", "header");
}

This works, and it matches what is included in the .files property of the sketch object:

{
    "name": "bubbles.csv",
    "content": "",
    "children": [],
    "fileType": "file",
    "_id": "6459341065978bfc7dc6c7b4",
    "url": "https://cdn.jsdelivr.net/gh/processing/p5.js-website@main/src/data/examples/assets/bubbles.csv",
    "createdAt": "2023-05-08T17:40:32.645Z",
    "updatedAt": "2023-05-08T17:40:32.645Z",
    "id": "6459341065978bfc7dc6c7b4"
}
Steps to reproduce

It happens at random on any 404 URL, depending on which sketch is chosen.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in server/views/404Page.js at the referenced path-rewriting logic, then compare it with the previewServer output and the sketch object's .files URL. Reproduce a 404 page that loads the cited sketch and trace the generated asset URL. Done means the CSV resolves to the valid CDN path rather than an improper or deprecated rawgit.com path.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.