11536 sujets

JavaScript, DOM et API Web HTML5

[Résolu] LD-JSON déporté

Bonjour,
est-il possible de déporter un fichier LD-JSON de données structurées installé dans le html, comme on le fait avec un fichier JavaScript ? Comme c'est un script, il entre en conflit avec la politique CSP : script-src 'self';
J'ai eu récemment un problème, la console m'indiquait un blocage de script, blocage indiqué justement sur le fichier LD-JSON. Alors que j'avais fermé le premier fichier JSON avec </script> et ouvert le suivant avec <script>, la console pointait précisément l'erreur ici. Tout à fait à l'aveugle, j'ai supprimé les deux </script> et <sript> et le problème a disparu ! Exemple :
......
},
  "datePublished": "2023-11-18T12:25:20+0000",
  "dateModified": "2024-01-12T20:00:10+0000"
}
</script> /Suppression ici
<script type="application/ld+json"> /Suppression ici 
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      .......
.
Modérateur
Bonjour,

Comme personne ne répond, je me lance bien que je ne comprenne pas grand chose aux ld+json.

Si on ajoute un attribut src à une balise <script>, celui-ci doit contenir le nom d'un fichier de script. Or un contenu de type "application/ld+json" n'est pas un script. On ne peut donc pas utiliser un src pour spécifier le nom d'un fichier "déporté" (pour reprendre tes termes) contenant des données de type "application/ld+json.

Par contre, il semble qu'on puisse utiliser un script javascript qui lui peut être dans un fichier "déporté" qui injecterait le ld+json dans la page lors de son chargement (en créant à la volée une balise <script type="application/ld+json"> et en allant lire un fichier contenant des données ld+json, ou en construisant ces données avec du code js). Et malgré ce bricolage, il semble que ça soit utilisable par les outils capables d'interpréter les données contenus dans un ld+json. À vérifier tout de même car je n'ai rien testé.

Ceci étant, le mieux me semble être d'adapter ta CSP pour qu'elle accepte plusieurs <script type="application/ld+json"> en ligne. Il n'y a pas de raison qu'elle n'y arrive pas. C'est même bizarre qu'elle ait bloqué ce que tu nous as montré comme code.

Il doit y avoir autre chose qui conduit à ce blockage. Car même si on a une csp qui bloque tout comme dans l'exemple ci-dessous où il y a pourtant plusieurs <script type="application/ld+json">, la console de chrome reste silencieuse alors qu'elle rugit immédiatement si j'ajoute dans mon code une balise <script> avec du code js dedans :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'none';">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "@id": "http://dbpedia.org/resource/John_Lennon",
  "name": "John Lennon",
  "birthDate": "1940-10-09",
  "spouse": "https://dbpedia.org/page/Yoko_Ono"
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "@id": "https://dbpedia.org/page/Paul_McCartney",
  "name": "Paul McCartney",
  "birthDate": "1942-06-18",
  "spouse": "https://dbpedia.org/page/Heather_Mills"
}
</script>
</head>
<body>
<h1>Test</h1>
</body>
</html>


Amicalement,

PS:
Ce n'était pas l'objet de la question, mais il me semble que pour réunir deux objets {...} contenant du ld+json dans une seule balise <script type="application/ld+json"> (ce qui serait une très bonne idée même s'il n'y avait pas ce problème de CSP, car il n'est pas clair d'après ce que j'ai pu lire ici et là que les outils se goinfrant de ld+json soient tous capables d'en lire répartis sur plusieurs balises <script type="application/ld+json">), il faut probablement les encapsuler dans autre chose genre un tableau [{...},{...}]. À vérifier, en particulier la syntaxe exacte, et s'il faut rajouter des trucs genre des @id s'ils n'y sont pas déjà ! Dans le détail, ça doit dépendre pas mal de ton contenu.

Il y a un test en ligne possible de ces données à https://validator.schema.org
Modifié par parsimonhi (22 Mar 2025 - 15:45)
Salut,

merci pour la première réponse, JSON n'est pas un script (alors qu'il est entouré de <script> et </script !?) Pas possible de le déporter donc. Et je ne vais pas m'embarquer dans du Javascript pour pouvoir le faire, sans un grand intérêt. Voici ce qu'il s'est passé.
J'ai voulu sur l'un de mes sites expérimenter une petite apparition de texte au clic sur un bouton. Rien de plus simple, (je ne donne pas tout le code ici)
<input type="button" onclick="affCache('pr1');"
value="Parafaute on/off">
<div id="pr1" style="display:none" double black'>

Tout ça dans le html.
Sauf que la CSP a refusé le fonctionnement, à cause du style in-line, je pense. En tout cas, la console pointait deux erreurs, une vers ce script, que j'ai corrigé sur le htaccess en enlevant script-src 'self'; Il ne restait alors plus qu'une erreur pointée par la console. Curieusement, elle se situait sur le fichier LD-JSON, vers les deux </script> et <script>, comme mentionné dans mon post. Les enlever a réglé le problème. J'ai appris par la même occasion que l'on pouvait "chaîner" plusieurs LDJSON à la suite sans les fermer et ouvrir le prochain avec <script>, comme avec le Javascript. J'ai testé mes données truscturées en ligne et tout est OK de ce côté.
Pour le moment, je me retrouve avec une politique CSP amputée de scrip-src 'self'. Curieusement, Ligthouse ne crie pas et approuve la politique CSP.
Bon, tout fonctionne.
Allez, je donne le LD-JSON de la page en question :
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "name": "Stop Écriture Inclusive",
      "operatingSystem": "All",
      "applicationCategory": "BrowserApplication",
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.6",
        "ratingCount": "75"
      },
      "offers": {
  "@type": "Offer",
  "price": "0"
      }
    }       
    {
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "name": "Greasemonkey",
      "operatingSystem": "All",
      "applicationCategory": "BrowserApplication",
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.2",
        "ratingCount": "202 274"
      },
      "offers": {
  "@type": "Offer",
  "price": "0"
      }
    }
    </script>

Modifié par Bongota (22 Mar 2025 - 16:47)
Modérateur
Bonjour,
Bongota a écrit :
JSON n'est pas un script (alors qu'il est entouré de <script> et </script> !?)

Tu as tout à fait raison de t'étonner. Les spécificateurs ont exagéré sur ce coup-là !

Bongota a écrit :
J'ai voulu sur l'un de mes sites expérimenter une petite apparition de texte au clic sur un bouton. Rien de plus simple, (je ne donne pas tout le code ici)
<input type="button" onclick="affCache('pr1');"
value="Parafaute on/off">
<div id="pr1" style="display:none" double black'>

Tout ça dans le html.
Sauf que la CSP a refusé le fonctionnement, à cause du style in-line, je pense.
Peut-être s'il y a aussi dans la CSP des restrictions sur le css, mais aussi et surtout à cause du onclick="affCache('pr1');" qui est un bout de script js inline.

Bongota a écrit :
J'ai testé mes données structurées en ligne et tout est OK de ce côté.
Non ! Smiley cligne Il n'y a pas d'erreur, mais le 2e {...} est ignoré par le validateur (on le voit dans le résultat : seul le contenu du 1er {...} est compris par le validateur). Tu dois encapsuler tes deux {...} dans un tableau.

Bongota a écrit :
Pour le moment, je me retrouve avec une politique CSP amputée de scrip-src 'self'. Curieusement, Lighthouse ne crie pas et approuve la politique CSP.
Une CSP n'est pas obligatoire. Et l'erreur ne provenait pas de ton <script type="application/ld+json">. Si tu retires ton onclick="affCache('pr1');" de ton code html, ta CSP ne devrait plus bloquer, même si tu laisses le scrip-src 'self' dans cette CSP.

Note : tu as un ' qui traine après double black dans la ligne <div id="pr1" style="display:none" double black'>. C'est douteux.

Amicalement,
Vu pour le ' qui traînait. Oui, dans la CSP, il y a aussi une restriction sur le css.
Étrange, ma validation, qu'elle soit faite en entrant directement le code ou sur l'url du site, passe pour les deux fichiers JSON.
upload/1742664676-67790-json-test.png
Mais effectivement, quand je clique sur "données structurées détectées", je ne vois que le premier script. Et quand je remets
<script type="application/ld+json"> et </script> en place, j'ai bien deux données structurées détectées. En LD-JSON, il faut donc séparer les différents scripts.
Et dans le test en ligne, on a "Éléments valides" et "Éléments détectés", ce qui n'est pas la même chose. Je ne savais pas. C'est plutôt rare, généralement, il y a une erreur générale. Le LD-JSON n'accepte pas la moindre virgule qui manque ou qui est mal placée.
Déporter le LD-JSON n'a pas d'intérêt, dans la mesure où chaque page html demande souvent des données structurées différentes.
Modérateur
Bonjour,
Bongota a écrit :
En LD-JSON, il faut donc séparer les différents scripts.
... ou mettre les contenus dans un tableau ce que visiblement, tu ne sembles pas prêt à essayer ! Smiley cligne

Essaie :
<script type="application/ld+json">
[
      {
            "@context": "https://schema.org",
            "@type": "SoftwareApplication",
            "name": "Stop Écriture Inclusive",
            "operatingSystem": "All",
            "applicationCategory": "BrowserApplication",
            "aggregateRating": {
                  "@type": "AggregateRating",
                  "ratingValue": "4.6",
                  "ratingCount": "75"
            },
            "offers": {
                  "@type": "Offer",
                  "price": "0"
            }
      }, 
      {
            "@context": "https://schema.org",
            "@type": "SoftwareApplication",
            "name": "Greasemonkey",
            "operatingSystem": "All",
            "applicationCategory": "BrowserApplication",
            "aggregateRating": {
                  "@type": "AggregateRating",
                  "ratingValue": "4.2",
                  "ratingCount": "202 274"
            },
            "offers": {
                  "@type": "Offer",
                  "price": "0"
            }
      }
]
</script>

Amicalement,
" ce que visiblement, tu ne sembles pas prêt à essayer !"
Mon refus aurait été détecté même sans l'avoir formulé Smiley biggrin
Tu te rends compte, un samedi soir, me demander d'ajouter deux [.....] dans un code, c'est vraiment trop demander.
C'est fait, et ça fonctionne.
J'ai juste un avertissement (sans conséquences), sur le taux qui n'est pas donné.
Je ne peux pas mettre un taux en € ou en $, puisque c'est gratuit. Le code le dit que c'est gratuit.
Ces tableaux servent aussi à désigner une url ans le code LD-JSON
"thumbnailUrl": [
        "https://montiste.fr/Images/image.png"
       ],

Je mets résolu, merci pour l'aide et une meilleure connaissance de LD-JSON.
Prévenir un modérateur
Répondre au sujet
Aller à