Как отключить сторонний cookie для тэгов <img>?

Есть ли какое-либо решение для отключения файлов cookie для изображений, загружаемых со сторонних доменов, с использованием методов HTML5 или JavaScript?

Я ищу что-то похожее на атрибут sandbox для тега <iframe>, referrerpolicy или crossorigin для тега <img>.

Ответ 1

Обновление: Этот обходной путь больше не работает для:

Firefox 68
Safari 12.1.2

После нескольких дней испытаний с этой проблемой я могу подтвердить, что это невозможно сделать с помощью тега <img> и любых доступных в настоящее время методов.

Правильный способ - использовать прокси-сервер без файлов cookie для изображений, как это делает Google, но в данный момент это слишком ресурсоемкий для нас.

Приемлемое решение:

Чтобы отключить cookie, замените <img> на <iframesandbox>;
Для отображения изображения внутри <iframe> используйте URI данных со встроенным CSS;
Чтобы эмулировать поведение размера тега <img>, используйте CSS background-size: cover, который масштабирует изображение, это позволяет установить ширину и высоту для <iframe>, который применяется к внутреннему изображению;
Используйте атрибуты ARIA, чтобы указать role="img" и aria-label в качестве замены alt.

Пример:

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

Ответ 2

Не идеальное решение, но вы можете использовать iframe для загрузки изображения, а затем использовать CSS-обман для маскировки iframe.

<iframe class="img-frame" sandbox src="https://www.google.com/favicon.ico" />

В противном случае я не знаю о чистом HTML-способе удаления файлов cookie. Я не верю, что вы можете изменить куки iframes из родителя с помощью JS, если политика cors из iframe предотвращает это.

Ответ 3

В большинстве случаев это не вариант, но если стороннее изображение обслуживается с заголовком Access-Control-Allow-Origin, который включает в себя * или ваш хост, можно использовать атрибут crossorigin="anonymous" для отключения куки. В этих случаях вам, вероятно, следует также включить referrerpolicy="no-referrer" для большей конфиденциальности.

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

Ответ 4

На самом деле я не могу подтвердить, что приведенный ниже код выполняет то, что вы хотите (потому что у меня так много средств защиты от отслеживания в моих браузерах, на моей машине и в моей сети...) Но я просто хочу добавить еще один вариант: вы уже пытались загрузить изображения с помощью JavaScript?
(Сначала я написал "AJAX" вместо "javascript" - Сэмюэл Виллемс, спасибо, что сообщили мне о моей ошибке.)

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