Repository navigation
no referrer leading to errors with OpenStreetMap #4321
Description
p5.js version
2.3.2
What is your operating system?
Mac OS
Web browser and version
Firefox 155.0.1
Actual Behavior
I teach a class where I have students use Mappa.js library (easier on-ramp than Leaflet) within the p5.js web editor to create interactive maps. We have mostly been using OpenStreetMap as our map provider because it does not require API keys or tokens. However, OSM now requires a valid Referer/User-Agent to identify, and it seems that the web editor's iframe may be blocking anything referrer from getting sent.
Here is a screenshot of the error:
Expected Behavior
When running the code, it should show a map, courtesy of OpenStreetMap.
Steps to reproduce
Steps:
- Create a new project in p5.js web editor
- Use the index.html and sketch.js code below
- Click Run
Snippet:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="referrer" content="strict-origin-when-cross-origin">
<script src="https://unpkg.com/mappa-mundi@0.0.5/dist/mappa.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.2/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5.sound@0.4.1/dist/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="sketch.js"></script>
</body>
</html>
sketch.js:
let myMap;
let canvas;
const mappa = new Mappa("Leaflet");
const options = {
lat: -40,
lng: 55,
zoom: 0.5,
style: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
};
function setup() {
canvas = createCanvas(800, 800);
myMap = mappa.tileMap(options);
myMap.overlay(canvas);
}
function draw() {
clear();
}
Activity
welcome commentedon Sep 22, 2026
Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.
prithq commentedon Sep 24, 2026
I was able to reproduce this issue locally in the p5.js Web Editor and also tried to reproduce this in the one compiler and it works perfectly fine there.
I also did a small isolated test to investigate the missing Referer. A normal HTML page served over HTTP sends a Referer header when requesting an OpenStreetMap tile, while the same HTML loaded through a blob: URL does not send a Referer.
I'd be interested in working on this, I'd appreciate any guidance from the maintainers before I proceed.
ANUBHAVSINGH30 commentedon Sep 27, 2026
This looks like a solid diagnosis, @prithq — blob: URLs stripping the Referer header makes sense given how the sandboxed iframe execution works here. I'd be glad to help dig into this too, happy to look at how the iframe's sandbox attributes or the referrer-policy meta tag interact with the srcdoc/blob execution path, in case there's a workaround (e.g., proxying tile requests, or adjusting the iframe's referrerpolicy). Let me know if it'd help to split up areas to investigate, or if you'd rather run point on this one.
ksen0 commentedon Oct 2, 2026
Thanks @angichau and volunteering @prithq ! Please feel free to put together a PR (you're welcome to mark is as draft if its an ongoing investigation). If the solution is about updating headers in the request, that would be good - but if you run into challenges please comment your findings here! Thanks! Please confirm by Oct 10 end of day if you'd like to claim this issue, other wise @ANUBHAVSINGH30 is welcoem to work on it.