@datagouv/components-next 1.0.2-dev.30 → 1.0.2-dev.31

package/dist/{vue3-xml-viewer.common-CwN-5lms.js → vue3-xml-viewer.common-DkEC3fSC.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-BMXOPzsN.js";
+import { g as Ke } from "./main-BLApSdTQ.js";
 import We from "vue";
 function Fe($, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.30",
+  "version": "1.0.2-dev.31",
   "private": false,
   "type": "module",
   "engines": {

package/src/components/ResourceAccordion/JsonPreview.client.vue

@@ -23,6 +23,9 @@
         : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")
       }}
     </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error === 'cors'">
+      {{ t("Ce fichier JSON ne peut pas être prévisualisé car il est hébergé sur un site distant qui restreint l'accès (CORS). Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
     <PreviewUnavailable v-else-if="error === 'network'">
       {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.") }}
     </PreviewUnavailable>
@@ -37,8 +40,8 @@ import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
 import { useComponentsConfig } from '../../config'
 import PreviewUnavailable from './PreviewUnavailable.vue'
 import type { Resource } from '../../types/resources'
+import { getResourceFilesize, getResourceCorsStatus } from '../../functions/resources'
 import { useTranslation } from '../../composables/useTranslation'
-import { getResourceFilesize } from '../../functions/datasets'
 
 const JsonViewer = defineAsyncComponent(() =>
   import('vue3-json-viewer').then((module) => {
@@ -62,36 +65,37 @@ const fileTooLarge = ref(false)
 
 const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
 
-const shouldLoadJson = computed(() => {
-  const size = fileSizeBytes.value
-  if (!size) {
-    // If we don't know the size, don't risk loading a potentially huge file
-    return false
-  }
-
-  // Check if maxJsonPreviewCharSize is configured
-  if (!config.maxJsonPreviewCharSize) {
-    // If no limit is set, don't load unknown files
-    return false
-  }
+const corsStatus = computed(() => getResourceCorsStatus(props.resource))
 
+const isSizeAllowed = computed(() => {
+  const size = fileSizeBytes.value
   // Convert maxJsonPreviewCharSize from characters to bytes (rough estimate)
   // Assuming average 1 byte per character for JSON
   const maxByteSize = config.maxJsonPreviewCharSize
 
+  // If we don't know the size or the max size, don't risk loading a potentially huge file
+  if (!size || !maxByteSize) return false
+
   return size <= maxByteSize
 })
 
 const fetchJsonData = async () => {
-  // Check if file is too large or size is unknown before making the request
-  if (!shouldLoadJson.value) {
+  error.value = null
+  fileTooLarge.value = false
+
+  // Check if file is too large or size is unknown
+  if (!isSizeAllowed.value) {
     fileTooLarge.value = true
     return
   }
 
-  loading.value = true
-  error.value = null
+  // Check if CORS is allowed
+  if (corsStatus.value === 'blocked') {
+    error.value = 'cors'
+    return
+  }
 
+  loading.value = true
   try {
     const response = await fetch(props.resource.url)
     // const response = await fetch('/test-data.json') // For testing locally without CORS issues

package/src/components/ResourceAccordion/Metadata.vue

@@ -7,9 +7,8 @@ import DescriptionTerm from '../DescriptionTerm.vue'
 import { useFormatDate } from '../../functions/dates'
 import { filesize } from '../../functions/helpers'
 import ExtraAccordion from '../ExtraAccordion.vue'
-import { getResourceTitleId, getResourceLabel } from '../../functions/resources'
+import { getResourceTitleId, getResourceLabel, getResourceFilesize } from '../../functions/resources'
 import { useTranslation } from '../../composables/useTranslation'
-import { getResourceFilesize } from '../../functions/datasets'
 
 const props = defineProps<{
   resource: Resource

package/src/components/ResourceAccordion/PdfPreview.client.vue

@@ -24,6 +24,9 @@
         : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")
       }}
     </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error === 'cors'">
+      {{ t("Ce fichier PDF ne peut pas être prévisualisé car il est hébergé sur un site distant qui restreint l'accès (CORS). Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
     <PreviewUnavailable v-else-if="error === 'network'">
       {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.") }}
     </PreviewUnavailable>
@@ -41,8 +44,8 @@ import type { PDFDocumentProxy } from 'pdfjs-dist'
 import PreviewUnavailable from './PreviewUnavailable.vue'
 import { useComponentsConfig } from '../../config'
 import type { Resource } from '../../types/resources'
+import { getResourceFilesize, getResourceCorsStatus } from '../../functions/resources'
 import { useTranslation } from '../../composables/useTranslation'
-import { getResourceFilesize } from '../../functions/datasets'
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker
 
@@ -97,6 +100,8 @@ async function renderPage(pageNum: number) {
 
 const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
 
+const corsStatus = computed(() => getResourceCorsStatus(props.resource))
+
 const shouldLoadPdf = computed(() => {
   const size = fileSizeBytes.value
   if (!size) {
@@ -110,14 +115,21 @@ const shouldLoadPdf = computed(() => {
 })
 
 const loadPdf = async () => {
+  error.value = null
+  fileTooLarge.value = false
+
   if (!shouldLoadPdf.value) {
     fileTooLarge.value = true
     return
   }
 
-  loading.value = true
-  error.value = null
+  // Check if CORS is allowed
+  if (corsStatus.value === 'blocked') {
+    error.value = 'cors'
+    return
+  }
 
+  loading.value = true
   try {
     const loadingTask = pdfjsLib.getDocument({
       url: props.resource.url,

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -387,9 +387,8 @@ import { trackEvent } from '../../functions/matomo'
 import CopyButton from '../CopyButton.vue'
 import { useComponentsConfig } from '../../config'
 import { getOwnerName } from '../../functions/owned'
-import { getResourceFormatIcon, getResourceTitleId, detectOgcService } from '../../functions/resources'
+import { getResourceFormatIcon, getResourceTitleId, detectOgcService, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
 import BrandedButton from '../BrandedButton.vue'
-import { getResourceExternalUrl, getResourceFilesize } from '../../functions/datasets'
 import { useTranslation } from '../../composables/useTranslation'
 import { useHasTabularData } from '../../composables/useHasTabularData'
 import Metadata from './Metadata.vue'

package/src/components/ResourceAccordion/XmlPreview.client.vue

@@ -15,6 +15,9 @@
         : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")
       }}
     </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="error === 'cors'">
+      {{ t("Ce fichier XML ne peut pas être prévisualisé car il est hébergé sur un site distant qui restreint l'accès (CORS). Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
     <PreviewUnavailable v-else-if="error === 'network'">
       {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.") }}
     </PreviewUnavailable>
@@ -29,9 +32,9 @@ import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
 import { useComponentsConfig } from '../../config'
 import PreviewUnavailable from './PreviewUnavailable.vue'
 import type { Resource } from '../../types/resources'
+import { getResourceFilesize, getResourceCorsStatus } from '../../functions/resources'
 import { useTranslation } from '../../composables/useTranslation'
 import '../../types/vue3-xml-viewer.d'
-import { getResourceFilesize } from '../../main'
 
 const XmlViewer = defineAsyncComponent(() =>
   import('vue3-xml-viewer').then((module) => {
@@ -53,36 +56,37 @@ const fileTooLarge = ref(false)
 
 const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
 
-const shouldLoadXml = computed(() => {
-  const size = fileSizeBytes.value
-  if (!size) {
-    // If we don't know the size, don't risk loading a potentially huge file
-    return false
-  }
-
-  // Check if maxXmlPreviewCharSize is configured
-  if (!config.maxXmlPreviewCharSize) {
-    // If no limit is set, don't load unknown files
-    return false
-  }
+const corsStatus = computed(() => getResourceCorsStatus(props.resource))
 
+const isSizeAllowed = computed(() => {
+  const size = fileSizeBytes.value
   // Convert maxXmlPreviewCharSize from characters to bytes (rough estimate)
   // Assuming average 1 byte per character for XML
   const maxByteSize = config.maxXmlPreviewCharSize
 
+  // If we don't know the size or the max size, don't risk loading a potentially huge file
+  if (!size || !maxByteSize) return false
+
   return size <= maxByteSize
 })
 
 const fetchXmlData = async () => {
-  // Check if file is too large or size is unknown before making the request
-  if (!shouldLoadXml.value) {
+  error.value = null
+  fileTooLarge.value = false
+
+  // Check if file is too large or size is unknown
+  if (!isSizeAllowed.value) {
     fileTooLarge.value = true
     return
   }
 
-  loading.value = true
-  error.value = null
+  // Check if CORS is allowed
+  if (corsStatus.value === 'blocked') {
+    error.value = 'cors'
+    return
+  }
 
+  loading.value = true
   try {
     const response = await fetch(props.resource.url)
     // const response = await fetch('/test-data.xml') // For testing locally without CORS issues

package/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -325,8 +325,7 @@ import DataStructure from '../ResourceAccordion/DataStructure.vue'
 import Metadata from '../ResourceAccordion/Metadata.vue'
 import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
 import { filesize, summarize } from '../../functions/helpers'
-import { getResourceFormatIcon } from '../../functions/resources'
-import { getResourceExternalUrl, getResourceFilesize } from '../../functions/datasets'
+import { getResourceFormatIcon, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
 import { trackEvent } from '../../functions/matomo'
 import { useComponentsConfig } from '../../config'
 import { useFormatDate } from '../../functions/dates'

package/src/config.ts

@@ -5,6 +5,8 @@ import type { FetchOptions } from 'ofetch'
 export type PluginConfig = {
   name: string // Name of the application (ex: data.gouv.fr)
   baseUrl: string
+  /** Hostnames allowed in Access-Control-Allow-Origin for resource preview CORS checks (e.g. data.gouv.fr). */
+  trustedDomains?: string[]
   apiBase: string
   devApiKey?: string | null
   datasetQualityGuideUrl?: string

package/src/functions/datasets.ts

@@ -1,6 +1,4 @@
 import { useComponentsConfig } from '../config'
-import type { Dataset, DatasetV2 } from '../types/datasets'
-import type { CommunityResource, Resource } from '../types/resources'
 
 function constructUrl(baseUrl: string, path: string): string {
   const url = new URL(baseUrl)
@@ -14,18 +12,3 @@ export function getDatasetOEmbedHtml(type: string, id: string): string {
   const staticUrl = constructUrl(config.baseUrl, 'oembed.js')
   return `<div data-udata-${type}="${id}"></div><script data-udata="${config.baseUrl}" src="${staticUrl}" async defer></script>`
 }
-
-export function isCommunityResource(resource: Resource | CommunityResource): boolean {
-  return 'organization' in resource || 'owner' in resource
-}
-
-export function getResourceExternalUrl(dataset: Dataset | DatasetV2 | Omit<Dataset, 'resources' | 'community_resources'>, resource: Resource | CommunityResource): string {
-  return `${dataset.page}${isCommunityResource(resource) ? '/community-resources' : ''}?resource_id=${resource.id}`
-}
-
-export function getResourceFilesize(resource: Resource): null | number {
-  if (resource.filesize) return resource.filesize
-  if ('analysis:content-length' in resource.extras) return resource.extras['analysis:content-length'] as number
-
-  return null
-}

package/src/functions/resources.ts

@@ -1,13 +1,15 @@
 import { readonly, type Component } from 'vue'
 
 import { RiEarthLine, RiMap2Line } from '@remixicon/vue'
+import { useComponentsConfig } from '../config'
 import Archive from '../components/Icons/Archive.vue'
 import Code from '../components/Icons/Code.vue'
+import type { Dataset, DatasetV2 } from '../types/datasets'
 import Documentation from '../components/Icons/Documentation.vue'
 import Image from '../components/Icons/Image.vue'
 import Link from '../components/Icons/Link.vue'
 import Table from '../components/Icons/Table.vue'
-import type { Resource } from '../types/resources'
+import type { CommunityResource, Resource } from '../types/resources'
 import { useTranslation } from '../composables/useTranslation'
 
 export function getResourceFormatIcon(format: string): Component | null {
@@ -129,3 +131,56 @@ export const detectOgcService = (resource: Resource) => {
   }
   return false
 }
+
+export function isCommunityResource(resource: Resource | CommunityResource): boolean {
+  return 'organization' in resource || 'owner' in resource
+}
+
+export function getResourceExternalUrl(dataset: Dataset | DatasetV2 | Omit<Dataset, 'resources' | 'community_resources'>, resource: Resource | CommunityResource): string {
+  return `${dataset.page}${isCommunityResource(resource) ? '/community-resources' : ''}?resource_id=${resource.id}`
+}
+
+export function getResourceFilesize(resource: Resource): null | number {
+  if (resource.filesize) return resource.filesize
+  if ('analysis:content-length' in resource.extras) return resource.extras['analysis:content-length'] as number
+
+  return null
+}
+
+type CorsStatus = 'allowed' | 'blocked' | 'unknown'
+
+export const getResourceCorsStatus = (resource: Resource): CorsStatus => {
+  const extras = resource.extras
+  if (!extras || !('check:cors:allow-origin' in extras)) {
+    return 'unknown'
+  }
+
+  const allowOrigin = extras['check:cors:allow-origin'] as string | undefined
+  const rawMethods = extras['check:cors:allow-methods'] as string | undefined
+
+  // Check if allow-origin is '*' or contains one of our trusted domains
+  const config = useComponentsConfig()
+  const trustedDomains = config.trustedDomains ?? []
+  const hasPublicCors = allowOrigin === '*'
+  const hasSpecificCors = allowOrigin
+    ? trustedDomains.some((domain) => {
+        try {
+          const hostname = new URL(allowOrigin).hostname
+          return hostname === domain || hostname.endsWith(`.${domain}`)
+        }
+        catch {
+          return false
+        }
+      })
+    : false
+
+  const isOriginAllowed = hasPublicCors || hasSpecificCors
+
+  // Ensure GET method is allowed
+  const allowedMethods = rawMethods
+    ? rawMethods.split(',').map(m => m.trim().toUpperCase())
+    : []
+  const supportsGet = allowedMethods.length === 0 || allowedMethods.includes('GET')
+
+  return isOriginAllowed && supportsGet ? 'allowed' : 'blocked'
+}

package/dist/JsonPreview.client-DWP5adeD.js

@@ -1,72 +0,0 @@
-import { defineComponent as z, defineAsyncComponent as C, ref as l, computed as x, onMounted as J, openBlock as t, createElementBlock as c, createVNode as S, unref as r, toDisplayString as i, createBlock as p, withCtx as d, createTextVNode as f, createCommentVNode as N } from "vue";
-import { u as B, a as L, b as V, _ as h } from "./main-BMXOPzsN.js";
-const b = { class: "fr-text--xs" }, E = { key: 0 }, P = {
-  key: 1,
-  class: "text-gray-medium"
-}, j = /* @__PURE__ */ z({
-  __name: "JsonPreview.client",
-  props: {
-    resource: {}
-  },
-  setup(y) {
-    const T = C(
-      () => import("./vue3-json-viewer-BgCuOAH6.js").then((e) => (Promise.resolve({                     }), e.JsonViewer))
-    ), m = y, v = B(), { t: n } = L(), s = l(null), u = l(!1), a = l(null), g = l(!1), _ = x(() => V(m.resource)), w = x(() => {
-      const e = _.value;
-      if (!e || !v.maxJsonPreviewCharSize)
-        return !1;
-      const o = v.maxJsonPreviewCharSize;
-      return e <= o;
-    }), k = async () => {
-      if (!w.value) {
-        g.value = !0;
-        return;
-      }
-      u.value = !0, a.value = null;
-      try {
-        const e = await fetch(m.resource.url);
-        if (!e.ok)
-          throw new Error(`HTTP error! status: ${e.status}`);
-        const o = await e.json();
-        s.value = o;
-      } catch (e) {
-        console.error("Error loading JSON:", e), e instanceof TypeError ? a.value = "network" : a.value = "generic", s.value = null;
-      } finally {
-        u.value = !1;
-      }
-    };
-    return J(() => {
-      k();
-    }), (e, o) => (t(), c("div", b, [
-      s.value ? (t(), c("div", E, [
-        S(r(T), {
-          value: s.value,
-          boxed: "",
-          sort: "",
-          theme: "light",
-          "max-depth": 3,
-          "expand-depth": 2,
-          "indent-width": 2
-        }, null, 8, ["value"])
-      ])) : u.value ? (t(), c("div", P, i(r(n)("Chargement de l'aperçu JSON...")), 1)) : g.value ? (t(), p(h, { key: 2 }, {
-        default: d(() => [
-          f(i(_.value ? r(n)("Le fichier JSON est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.") : r(n)("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")), 1)
-        ]),
-        _: 1
-      })) : a.value === "network" ? (t(), p(h, { key: 3 }, {
-        default: d(() => [
-          f(i(r(n)("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.")), 1)
-        ]),
-        _: 1
-      })) : a.value ? (t(), p(h, { key: 4 }, {
-        default: d(() => [
-          f(i(r(n)("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.")), 1)
-        ]),
-        _: 1
-      })) : N("", !0)
-    ]));
-  }
-});
-export {
-  j as default
-};

package/dist/Swagger.client-mrRTl6ll.js

@@ -1,4 +0,0 @@
-import { i as f } from "./main-BMXOPzsN.js";
-export {
-  f as default
-};

package/dist/XmlPreview.client-C0zaJXWA.js

@@ -1,64 +0,0 @@
-import { defineComponent as z, defineAsyncComponent as C, ref as o, computed as x, onMounted as X, openBlock as t, createElementBlock as c, createVNode as L, unref as r, toDisplayString as i, createBlock as f, withCtx as m, createTextVNode as p, createCommentVNode as B } from "vue";
-import { u as S, a as V, b as E, _ as d } from "./main-BMXOPzsN.js";
-const M = { class: "fr-text--xs" }, P = { key: 0 }, b = {
-  key: 1,
-  class: "text-gray-medium"
-}, $ = /* @__PURE__ */ z({
-  __name: "XmlPreview.client",
-  props: {
-    resource: {}
-  },
-  setup(y) {
-    const T = C(
-      () => import("./vue3-xml-viewer.common-CwN-5lms.js").then((e) => e.v).then((e) => e.default || e.XmlViewer)
-    ), h = y, v = S(), { t: a } = V(), n = o(null), u = o(!1), l = o(null), g = o(!1), _ = x(() => E(h.resource)), w = x(() => {
-      const e = _.value;
-      if (!e || !v.maxXmlPreviewCharSize)
-        return !1;
-      const s = v.maxXmlPreviewCharSize;
-      return e <= s;
-    }), k = async () => {
-      if (!w.value) {
-        g.value = !0;
-        return;
-      }
-      u.value = !0, l.value = null;
-      try {
-        const e = await fetch(h.resource.url);
-        if (!e.ok)
-          throw new Error(`HTTP error! status: ${e.status}`);
-        const s = await e.text();
-        n.value = s;
-      } catch (e) {
-        console.error("Error loading XML:", e), e instanceof TypeError ? l.value = "network" : l.value = "generic", n.value = null;
-      } finally {
-        u.value = !1;
-      }
-    };
-    return X(() => {
-      k();
-    }), (e, s) => (t(), c("div", M, [
-      n.value ? (t(), c("div", P, [
-        L(r(T), { xml: n.value }, null, 8, ["xml"])
-      ])) : u.value ? (t(), c("div", b, i(r(a)("Chargement de l'aperçu XML...")), 1)) : g.value ? (t(), f(d, { key: 2 }, {
-        default: m(() => [
-          p(i(_.value ? r(a)("Le fichier XML est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.") : r(a)("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")), 1)
-        ]),
-        _: 1
-      })) : l.value === "network" ? (t(), f(d, { key: 3 }, {
-        default: m(() => [
-          p(i(r(a)("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.")), 1)
-        ]),
-        _: 1
-      })) : l.value ? (t(), f(d, { key: 4 }, {
-        default: m(() => [
-          p(i(r(a)("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.")), 1)
-        ]),
-        _: 1
-      })) : B("", !0)
-    ]));
-  }
-});
-export {
-  $ as default
-};