Merge pull request #47 from sebastiangreger/referrerpolicy

Override panel referrerpolicy for Mapbox API calls
sylvainjule · Feb 23, 2022 · 52f3847 · 52f3847
2 parents 73553ec + 86878af
commit 52f3847
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/index.js b/index.js
diff --git a/src/field/Locator.vue b/src/field/Locator.vue
@@ -180,8 +180,10 @@ export default {
             if(this.geocoding && this.location.length) {
                 if(this.geocoding != 'mapbox') return false
 
+                const fetchInit = { referrerPolicy: 'strict-origin-when-cross-origin' }
+
                 this.limit = 5
-                fetch(this.searchQuery)
+                fetch(this.searchQuery, fetchInit)
                     .then(response => response.json())
                     .then(response => {
                         // if places are found
@@ -240,6 +242,15 @@ export default {
 
             // set the tile layer
             this.tileLayer = L.tileLayer(this.tileUrl, {attribution: this.attribution})
+
+            
+            // add event listeners to override the panel's referrerpolicy while loading tiles through Mapbox API
+            if(this.tiles == 'mapbox' || this.tiles == 'mapbox.custom') {
+                this.tileLayer.on('loading', () => document.querySelector("meta[name=referrer]").content = "strict-origin-when-cross-origin")
+                this.tileLayer.on('load', () => document.querySelector("meta[name=referrer]").content = "same-origin")
+            }
+
+            // add the tile layer to the map
             this.map.addLayer(this.tileLayer)
 
             // create a marker
@@ -357,7 +368,9 @@ export default {
             }
 
             if(this.geocoding && this.location.length) {
-                fetch(this.searchQuery)
+                const fetchInit = this.geocoding == 'mapbox' ? { referrerPolicy: 'strict-origin-when-cross-origin' } : {}
+                
+                fetch(this.searchQuery, fetchInit)
                     .then(response => response.json())
                     .then(response => {
                         if(response.length || Object.keys(response).length) {