[stable33] fix: pass Referer header to OpenStreetMap

src/components/MessagesList/MessagesGroup/Message/MessageItem.spec.js

@@ -411,8 +411,8 @@ describe('MessageItem.vue', () => {
 					'geo-location': {
 						id: '123',
 						name: 'Location name',
-						latitude: 12.345678,
-						longitude: 98.765432,
+						latitude: '12.345678',
+						longitude: '98.765432',
 						metadata: '{id:123}',
 						type: 'geo-location',
 					},

src/components/MessagesList/MessagesGroup/Message/MessagePart/LocationCard.vue

@@ -3,6 +3,69 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import { t } from '@nextcloud/l10n'
+import { imagePath } from '@nextcloud/router'
+import {
+	LControlAttribution,
+	LIcon,
+	LMap,
+	LMarker,
+	LTileLayer,
+} from '@vue-leaflet/vue-leaflet'
+import { computed } from 'vue'
+
+// Leaflet icon patch | re-uses images from ~leaflet package
+import 'leaflet/dist/leaflet.css'
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'
+import 'leaflet-defaulticon-compatibility'
+
+const props = withDefaults(defineProps<{
+	/** The latitude of the location */
+	latitude: string
+	/** The longitude of the location */
+	longitude: string
+	/** The name of the location */
+	name?: string
+	/** The component appearance (take full width) */
+	wide?: boolean
+}>(), {
+	name: '',
+})
+
+// {s} subdomains are used by ~leaflet package instead of the policy-preferred 'tile.openstreetmap.org' host
+const url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+// The zoom level of the map in the Talk app (chat, shared items tab)
+const previewZoom = 13
+// The zoom level of the map in the new OpenStreetMap tab upon opening the link
+const linkZoom = 18
+
+// Map preview is non-interactive
+// Attribution control from ~leaflet package is replaced with LControlAttribution
+const mapOptions = {
+	scrollWheelZoom: false,
+	zoomControl: false,
+	dragging: false,
+	attributionControl: false,
+}
+// Visible attribution is required by the OpenStreetMap tile usage policy (https://operations.osmfoundation.org/policies/tiles/)
+const attribution = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+
+// HTTP Referer header is required by the OpenStreetMap tile usage policy (https://operations.osmfoundation.org/policies/tiles/)
+const tileLayerOptions = {
+	referrerPolicy: 'strict-origin-when-cross-origin',
+}
+
+const linkAriaLabel = t('spreed', 'Open this location in OpenStreetMap')
+const iconUrl = imagePath('spreed', 'icon-marker-openstreetmap.svg')
+
+const center = computed(() => [Number(props.latitude), Number(props.longitude)])
+const mapLink = computed(() => 'https://www.openstreetmap.org/'
+	+ `?mlat=${props.latitude}`
+	+ `&mlon=${props.longitude}`
+	+ `#map=${linkZoom}/${props.latitude}/${props.longitude}`)
+</script>
+
 <template>
 	<a
 		:href="mapLink"
@@ -15,14 +78,11 @@
 		<LMap
 			:zoom="previewZoom"
 			:center="center"
-			:options="{
-				scrollWheelZoom: false,
-				zoomControl: false,
-				dragging: false,
-				attributionControl: false,
-			}"
+			:options="mapOptions"
 			@scroll.prevent="">
-			<LTileLayer :url="url" />
+			<LTileLayer
+				:url="url"
+				:options="tileLayerOptions" />
 			<LControlAttribution
 				position="bottomright"
 				:prefix="attribution" />
@@ -36,101 +96,6 @@
 	</a>
 </template>
 
-<script>
-import { t } from '@nextcloud/l10n'
-import { imagePath } from '@nextcloud/router'
-import {
-	LControlAttribution,
-	LIcon,
-	LMap,
-	LMarker,
-	LTileLayer,
-} from '@vue-leaflet/vue-leaflet'
-
-// Leaflet icon patch | re-uses images from ~leaflet package
-import 'leaflet/dist/leaflet.css'
-import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'
-import 'leaflet-defaulticon-compatibility'
-
-export default {
-	name: 'LocationCard',
-
-	components: {
-		LControlAttribution,
-		LIcon,
-		LTileLayer,
-		LMap,
-		LMarker,
-	},
-
-	props: {
-		/**
-		 * The latitude of the location
-		 */
-		latitude: {
-			type: Number,
-			required: true,
-		},
-
-		/**
-		 * The longitude of the location
-		 */
-		longitude: {
-			type: Number,
-			required: true,
-		},
-
-		/**
-		 * The name of the location
-		 */
-		name: {
-			type: String,
-			default: '',
-		},
-
-		wide: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	data() {
-		return {
-			url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-			// The zoom level of the map in the messages list
-			previewZoom: 13,
-			// The zoom level of the map in the new openstreetmap tab upon
-			// Opening the link
-			linkZoom: 18,
-
-			attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
-		}
-	},
-
-	computed: {
-		center() {
-			return [this.latitude, this.longitude]
-		},
-
-		mapLink() {
-			return `https://www.openstreetmap.org/?mlat=${this.latitude}&mlon=${this.longitude}#map=${this.linkZoom}/${this.latitude}/${this.longitude}`
-		},
-
-		linkAriaLabel() {
-			return t('spreed', 'Open this location in OpenStreetMap')
-		},
-
-		iconUrl() {
-			return imagePath('spreed', 'icon-marker-openstreetmap.svg')
-		},
-	},
-
-	methods: {
-		t,
-	},
-}
-</script>
-
 <style lang="scss" scoped>
 .location {
 	display: flex;

src/env.d.ts

@@ -36,6 +36,8 @@ declare global {
 		export default content
 	}
 
+	declare module '*.css'
+
 	// @nextcloud/webpack-vue-config build globals
 	const appName: string
 	const appVersion: string