Merge pull request #922 from mapbox/cw/sanitize-raster-url

sanitize user-added raster tile template

Author: chriswhong

src/lib/meta.js

@@ -1,19 +1,40 @@
-const escape = require('escape-html'),
-  geojsonRandom = require('geojson-random'),
+const geojsonRandom = require('geojson-random'),
   geojsonExtent = require('@mapbox/geojson-extent'),
   geojsonFlatten = require('geojson-flatten'),
   polyline = require('@mapbox/polyline'),
   wkx = require('wkx'),
   Buffer = require('buffer/').Buffer,
   zoomextent = require('../lib/zoomextent');
 
-module.exports.adduserlayer = function (context, _url, _name) {
-  const url = escape(_url),
-    name = escape(_name);
+function isValidTileUrl(url) {
+  try {
+    const u = new URL(url);
+
+    // Must use HTTPS
+    if (u.protocol !== 'https:') return false;
 
-  // reset the control if a user-layer was added before
-  d3.select('.user-layer-button').remove();
+    // Optional: check that {z}, {x}, {y} placeholders are present
+    const hasPlaceholders =
+      url.includes('{z}') && url.includes('{x}') && url.includes('{y}');
+    if (!hasPlaceholders) return false;
 
+    return true;
+  } catch (e) {
+    // Invalid URL format
+    return false;
+  }
+}
+
+function isValidTilesetName(name) {
+  const trimmed = name.trim();
+  return (
+    /^[a-zA-Z0-9 ]+$/.test(trimmed) &&
+    trimmed.length >= 3 &&
+    trimmed.length <= 25
+  );
+}
+
+module.exports.adduserlayer = function (context, url, name) {
   function addUserSourceAndLayer() {
     // if the source and layer aren't present, add them
     context.map.setStyle({
@@ -46,14 +67,33 @@ module.exports.adduserlayer = function (context, _url, _name) {
     });
   }
 
-  // append a button to the existing style selection UI
-  d3.select('.layer-switch')
-    .append('button')
-    .attr('class', 'pad0x user-layer-button')
-    .on('click', addUserSourceAndLayer)
-    .text(name);
-
-  addUserSourceAndLayer();
+  try {
+    if (!isValidTileUrl(url)) {
+      throw new Error(
+        'Invalid tile URL. Must be HTTPS and include {z}, {x}, {y}.'
+      );
+    }
+
+    if (!isValidTilesetName(name)) {
+      throw new Error(
+        'Invalid tileset name. Must be 3-25 characters long and contain only alphanumeric characters and spaces.'
+      );
+    }
+
+    // reset the control if a user-layer was added before
+    d3.select('.user-layer-button').remove();
+
+    // append a button to the existing style selection UI
+    d3.select('.layer-switch')
+      .append('button')
+      .attr('class', 'pad0x user-layer-button')
+      .on('click', addUserSourceAndLayer)
+      .text(name);
+
+    addUserSourceAndLayer(url);
+  } catch (e) {
+    alert(e.message);
+  }
 };
 
 module.exports.zoomextent = function (context) {

src/ui/file_bar.js

@@ -78,7 +78,7 @@ module.exports = function fileBar(context) {
             alt: 'Add a custom tile layer',
             action: function () {
               const layerURL = prompt(
-                'Layer URL\ne.g. https://stamen-tiles-b.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'
+                'Layer URL\ne.g. https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg'
               );
               if (layerURL === null) return;
               const layerName = prompt('Layer name');