web-dev-qa-db-fra.com

Comment désactiver les cookies tiers pour les balises <img>?

Existe-t-il une solution pour désactiver les cookies pour les images chargées à partir de domaines tiers à l'aide de techniques HTML5 ou JavaScript?

Je cherche quelque chose de similaire à l'attribut sandbox pour <iframe> tag, referrerpolicy ou crossorigin attributs pour <img> tag.

javascripthtmlsecuritycookies
29
Valentin

Mise à jour: Cette solution de contournement ne fonctionne plus pour:

  • Firefox 68
  • Safari 12.1.2

Après plusieurs jours de challenge avec ce problème, je peux confirmer que cela ne peut pas être fait en utilisant le <img> tag et toutes les techniques actuellement disponibles.

La bonne façon est d'utiliser un serveur proxy sans cookies pour les images comme le fait Google, mais cela est trop gourmand en ressources pour nous en ce moment.

Solution acceptable:

  • Pour désactiver le cookie, remplacez <img> avec <iframesandbox>;
  • Pour afficher l'image à l'intérieur de <iframe> use Data URI with CSS inline;
  • Pour émuler <img> le comportement de dimensionnement des balises utilise CSS background-size: cover qui redimensionne l'image, cela permet de régler la largeur et la hauteur sur <iframe> qui s'applique à l'image intérieure;
  • Utilisez les attributs ARIA pour spécifier 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>
24
Valentin

Ce ne sera pas une option dans la plupart des cas, mais si l'image tierce est servie avec un Access-Control-Allow-Origin en-tête comprenant * ou votre hôte, il est possible d'utiliser le crossorigin="anonymous" attribut pour désactiver les cookies. Dans ces cas, vous devez probablement également inclure referrerpolicy="no-referrer" pour plus d'intimité.

<img
  src="https://graph.facebook.com/officialstackoverflow/picture"
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

La plupart des sites Web ne définiront 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.

0
Jeremy Banks

Ce n'est pas une solution idéale, mais vous pouvez peut-être utiliser un iframe pour charger l'image, puis utiliser la ruse 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 HTML pure pour supprimer les cookies. Je ne crois pas que vous puissiez modifier les cookies iframes du parent à l'aide de JS, si la politique de cors d'iframe l'empêche.

0
lanky