Icones et activation URL ressources #12

Sous un SPIP 4.0.5 avec la branche dev/spip4 du plugin à jour.

J'ai activé l'URL ressources dans Configuration > Fonctions avancées > Optimisations et compression.

Je me retrouve avec des erreurs de ce type:

Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://cdn.lolibrius.fr/plugins/albums/prive/themes/spip/images/albums-add-xx.svg. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.

Cela concerne ces cinq ressources:

/plugins/albums/prive/themes/spip/images/albums-add-xx.svg
/plugins-dist/medias/prive/themes/spip/images/documents-liste-xx.svg
/plugins-dist/medias/prive/themes/spip/images/documents-liste-courte-xx.svg
/plugins-dist/medias/prive/themes/spip/images/documents-cases-xx.svg
/plugins/albums/prive/themes/spip/images/documents-mini-xx.svg

Les icones du plugin Media apparaissent bien et sont correctement chargées : sur une même page ?exec=article les icones apparaissent sur le bloc Illustrations mais pas sur les Albums.

La seule différence que je note dans mon onglet Réseau des Outils de développement:

Les icônes du plugin Médias sont chargées ainsi dans les css :

background-image: url(#CHEMIN_IMAGE{media-image-16.png});

Tandis que dans Albums c'est fait comme ça :

mask-image: url("#CHEMIN_IMAGE{documents-liste-xx.svg}");

Je n'ai pas moyen de tester les ressource en local, est-ce que tu peux essayer en changeant les appels dans les css des albums ? (avec recalcul + refraichissement du cache navigateur)

mask-image: url("#CHEMIN_IMAGE{documents-liste-16.png}");

Salut @tcharlss

Alors, je viens d'essayer en modifiant 3 appels :

.icone-albums_docs-grand:before {
        mask-image: url("#CHEMIN_IMAGE{documents-liste-16.png}");
}
.icone-albums_docs-liste:before {
        mask-image: url("#CHEMIN_IMAGE{documents-liste-courte-16.png}");
}
.icone-albums_docs-cases:before {
        mask-image: url("#CHEMIN_IMAGE{documents-cases-16.png}");
}

Et j'obtiens tout de même les mêmes erreurs:

Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://cdn.xxx.fr/plugins-dist/medias/prive/themes/spip/images/documents-liste-xx.svg?16px. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.

Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://cdn.xxx.fr/plugins-dist/medias/prive/themes/spip/images/documents-liste-courte-xx.svg?16px. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.

Blocage d’une requête multiorigine (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://cdn.xxx.fr/plugins-dist/medias/prive/themes/spip/images/documents-cases-xx.svg?16px. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.

Bon c'était un coup dans l'eau au cas-où.

En tout cas je ne m'explique pas la différence, dans les 2 cas les ressources viennent du même serveur (https://cdn.xxx.fr), pourquoi ça pouine dans un cas et pas dans l'autre ?

J'ai jamais utilisé cette option de configuration, peut-être qu'il manque la directive Access-Control-Allow-Origin dans les entêtes des réponses ?

Mais je ne sais pas s'il s'agit de réglages à faire au niveau du serveur, ou bien des choses qui devraient être ajoutées par SPIP en php dans les entêtes.

En tout cas je ne vois pas ce qui pourrait être fait spécifiquement au niveau du plugin.

Je viens de tester en commentant les usages de mask-* et en utilisant background-image :

[class*=icone-albums_]:before,
[class*=icone-albums-after_]:after {
        content: '';
        display: inline-block;
        width: 1em;
        height: 1em;
//      mask-repeat: no-repeat;
//      mask-size: contain;
        background-color: currentColor;
        vertical-align: middle;
}
[class*=icone-albums_].btn:not(.btn_icone):before {
        margin-inline-end: 0.33em;
}
[class*=icone-albums-after_].btn:not(.btn_icone):after {
        margin-inline-start: 0.33em;
}
.icone-albums_docs-grand:before {
//      mask-image: url("#CHEMIN_IMAGE{documents-liste-16.png}");
        background-image: url("#CHEMIN_IMAGE{documents-liste-16.png}");
}

L'erreur CORS correspondante à ce fichier disparaît et l'icone s'affiche logiquement bien.

EDIT : Une recherche m'amène à ce post:

The difference between the properties is that background-image uses CORS_NONE but masks use CORS_ANONYMOUS (which is to say, the later uses LOAD_CORS_ANONYMOUS and the former does not).

Et pour préciser encore, ça te fait ça dans tous les navs ? ou Chrome, FF ?

Oui, sous Firefox, Chromium et Epiphany (WebKit)...

Ouais c'est propre à CSS, de ce que je lis pour l'instant mask requière CORS, alors que background non. Du coup c'est quoi, le CDN qui est mal configuré ? Si t'utilises pas de CDN mais que c'est sur le même domaine, là ça marche ?

Oui, lorsque l'option URL ressource n'est pas configuré dans Configuration > Fonctions avancées, les icones s'affichent correctement.

Du coup, ce serait bien un problème de configuration du site CDN ?
Il faut que j'ajoute une directive dans le vhost du coup, du genre Access-Control-Allow-Origin: https://domain.tld ?

Ça je n'en ai aucune idée, je n'ai absolument jamais rien compris à CORS et j'y pige que dalle en optimisation d'hébergement. :D
Mais je suppute que si on a un domaine séparé pour les assets ou docs, il faut bien le configurer correctement https://geekflare.com/fr/enable-cors-apache-nginx/

Donc... Dans la configuration du CDN, il faut ajouter dans le vhost:

Header set Access-Control-Allow-Origin "https://domaine-principal.tld"

Le problème semble réglé... Merci et désolé pour le bruit :-/

Je poursuis, histoire de documenter le plus possible la chose...

Du coup, les fonts n'étaient plus loadées... la faute à cette partie de mon .htaccess, issue de je ne sais plus où :-/ :

# ----------------------------------------------------------------------
# Allow loading of external fonts
# ----------------------------------------------------------------------
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "http(s)?://(www\.)?(DOMAINE.TLD|CDN.DOMAINE.TLD)$" AccessControlAllowOrigin=$0
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
        Header merge Vary Origin
    </IfModule>
</FilesMatch>

Deux solutions : soit éditer le vhost comme vu précédemment, soit modifier la première ligne de ce morceau de code en ajoutant les extensions des images à celles des fonts.