Icones et activation URL ressources #12

Closed
opened 11 months ago by bricebou · 11 comments
Collaborator

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:

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: - Albums appelle https://cdn.example.fr/plugins-dist/medias/prive/themes/spip/images/documents-cases-xx.svg - Media appelle https://cdn.example.fr/plugins-dist/medias/prive/themes/spip/images/documents-cases-xx.svg?16px
Owner

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}");
Les icônes du plugin Médias sont chargées ainsi dans les css : ```css background-image: url(#CHEMIN_IMAGE{media-image-16.png}); ``` Tandis que dans Albums c'est fait comme ça : ```css 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) ```css mask-image: url("#CHEMIN_IMAGE{documents-liste-16.png}"); ```
Poster
Collaborator

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.
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. ```
Owner

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.

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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/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.
Poster
Collaborator

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).

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](https://bugzilla.mozilla.org/show_bug.cgi?id=1496505#c5): > 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 ?

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

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

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 ?

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 ?
Poster
Collaborator

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 ?

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/

Ç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/
Poster
Collaborator

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 :-/

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 :-/
bricebou closed this issue 10 months ago
Poster
Collaborator

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.

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.
Sign in to join this conversation.
No Milestone
No Assignees
3 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.