Existe-t-il une solution pour désactiver les cookies pour les images chargées depuis des domaines tiers en utilisant des techniques HTML5 ou JavaScript ?
Je cherche quelque chose de similaire à sandbox attribut pour <iframe> étiquette, referrerpolicy ou crossorigin attributs pour <img> étiquette.
Mise à jour : Cette solution de contournement ne fonctionne plus pour :
Après plusieurs jours de contestation de ce problème, je peux confirmer que cela ne peut pas être fait en utilisant la fonction <img> et toutes les techniques actuellement disponibles.
La bonne solution consiste à utiliser un serveur proxy sans cookie pour les images, comme le fait Google, mais cela demande trop de ressources pour nous pour le moment.
Solution de contournement acceptable :
<img> avec <iframesandbox> ;<iframe> utiliser URI des données avec des CSS en ligne ;<img> comportement de dimensionnement des balises, utilisation de CSS background-size: cover qui met l'image à l'échelle, ce qui permet de définir la largeur et la hauteur de l'image à l'aide de la fonction <iframe> qui s'applique à l'image intérieure ;role="img" et aria-label comme alt remplacement.Exemple :
<img width="100" height="75" alt="About company"
src="https://www.dtm.io/wp-content/uploads/2018/04/datamart-company.png" />
<iframe width="100" height="75" aria-label="About company" role="img"
frameborder="0" sandbox
src="data:text/html,<style>body{background:url('https://www.dtm.io/wp-content/uploads/2018/04/datamart-company.png') center/cover no-repeat;padding:0;margin:0;overflow:hidden}</style>"></iframe>
C'est intéressant et astucieux, mais je ne suis pas sûr que cela fonctionne comme décrit. Je l'ai essayé dans Firefox (en supprimant d'abord l'image originale du snippet pour éviter toute confusion), après avoir défini manuellement des cookies sur le domaine, et ils ont été inclus dans la requête de l'iframe : i.stack.imgur.com/s2P94.png
Cela semble fonctionner dans Chrome, mais en examinant les spécifications de la sandbox, la politique en matière de fonctionnalités et toute documentation que je peux trouver, je ne trouve aucune mention de la sandbox affectant les cookies. Il se peut qu'il ne s'agisse pas d'un comportement normalisé auquel nous pouvons nous fier pour tous les navigateurs.
@JeremyBanks, Aujourd'hui, j'ai retesté cette solution sur Chrome, Opera, Firefox et Safari sur macOS, Chrome et WebView sur Android et Safari sur iOS. Tout fonctionne bien. J'utilise cette approche depuis environ un an dans mon projet de prédilection anonace.com
Ce n'est pas une option dans la plupart des cas, mais si l'image de la tierce partie est servie avec un fichier Access-Control-Allow-Origin qui comprend * ou de votre hôte, il est possible d'utiliser la fonction crossorigin="anonymous" pour désactiver les cookies. Dans ces cas, vous devriez probablement aussi inclure referrerpolicy="no-referrer" pour une plus grande confidentialité.
<img
src="https://graph.facebook.com/officialstackoverflow/picture"
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>La plupart des sites Web ne définissent pas cet en-tête, et vous devrez trouver une alternative. Mais certains le font, comme l'API de Facebook, et c'est la solution la plus simple pour ces cas.
La question et les commentaires y faisaient allusion, mais j'ai pensé qu'il fallait l'écrire explicitement dans une réponse, car je n'étais pas clair à ce sujet lorsque j'ai lu ce fil pour la première fois.
Ce n'est pas une solution idéale, mais vous pouvez peut-être utiliser une iframe pour charger l'image, puis utiliser une astuce css pour masquer l'iframe.
<iframe class="img-frame" sandbox src="https://www.google.com/favicon.ico" />Sinon, je ne connais pas de méthode purement HTML pour supprimer les cookies. Je ne pense pas que vous puissiez modifier les cookies d'une iframe à partir du parent en utilisant JS, si la politique de cors de l'iframe l'empêche.
Merci pour votre réponse, c'était l'une de mes premières approches pour résoudre ce problème.
Bonne chance, si vous trouvez la réponse, merci de la laisser entendre, il serait intéressant de savoir si c'est possible.
-1 ; cela ne semble pas fonctionner (au moins dans Chrome, il envoie toujours des cookies à Google - vérifiez votre onglet réseau à l'adresse jsfiddle.net/mtpvuhj1 ), et dans un scénario typique (où vous ne faites pas confiance à la tierce partie, et c'est la raison pour laquelle vous voulez désactiver les cookies tiers), cela crée une faille de sécurité inacceptable. Ce n'est pas parce qu'une URL renvoie une image aujourd'hui qu'elle le fera toujours ; si le serveur tiers décide un jour de renvoyer une page HTML contenant un formulaire d'hameçonnage, en adoptant cette approche, vous aurez intégré ce formulaire dans votre page pour eux, ce qui est très mauvais.
Je ne peux pas vraiment confirmer que le code ci-dessous fait ce que vous souhaitez (parce que j'ai tellement de trucs de protection contre le pistage dans mes navigateurs, sur ma machine et sur mon réseau...). Mais juste pour ajouter une autre option : Avez-vous déjà essayé de charger les images via javascript ?
(J'ai initialement écrit " AJAX " au lieu de " javascript " - Samuel Willems, merci de m'avoir informé de mon erreur).
<html>
<script>
document.addEventListener('DOMContentLoaded', function () {
var eArr=document.getElementsByTagName('img'),e;
for (e of eArr) {
if (e.hasAttribute('data-src')) {
e.src=e.getAttribute('data-src');
}
}
});
</script>
<body>
<img src="" data-src="https://www.google.com/favicon.ico" alt="">
</body>
</html> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
1 votes
@JeremyBanks, merci pour vos commentaires. Mon idée principale est d'afficher des images provenant de domaines tiers, mais de ne pas leur permettre de définir/envoyer des cookies. Traitez cela comme une application Twitter personnalisée.
2 votes
Je l'ai. FYI cette question a été liée à une méta-discussion sur la façon dont Stack Overflow lui-même pourrait empêcher l'envoi de cookies et de référents à Facebook lors du chargement d'avatars Facebook sur le site.
1 votes
Ce qui est frustrant, c'est qu'il ne semble pas y avoir de moyen simple, conforme aux spécifications, et uniquement frontal, de faire cela. Jeremy Banks note que la réponse acceptée n'est pas garantie de fonctionner par la spécification. Utilisation de
crossorigin="anonymous"sur l'image est à proscrire parce qu'il fixe le nom de la requête mode à "cors", ce qui fait que la requête renvoie une erreur de réseau, à moins qu'une méthode appropriée ne soit utilisée.access-control-allow-originest émis par le serveur tiers. Utilisation defetchaveccredentials: 'omit', mode: 'no-cors'laisse la demande aboutir mais renvoie une réponse "opaque".2 votes
La meilleure idée que j'ai eue, que quelqu'un pourrait essayer dans les 23 prochaines heures s'il veut profiter de la prime de Jeremy, est d'utiliser
fetchsuivi de la mise en cache de la réponse opaque dansCacheStorageet ensuite servir cette réponse opaque comme une imagesrcen utilisant un travailleur de service ? Je n'ai pas le temps d'apprendre à utiliser les outils nécessaires à cette fin.1 votes
Et si on utilisait cloudimage.io/en/home ? Ils prennent une URL et la taille d'une image et la mettent automatiquement à l'échelle pour vous. Donc les cookies ne seront pas un problème car ils accèdent à l'URL ? @JeremyBanks