web-dev-qa-db-ja.com

<img>タグのサードパーティCookieを無効にする方法は？

HTML5またはJavaScript技術を使用してサードパーティのドメインからロードされた画像のCookieを無効にする解決策はありますか？

sandbox<iframe>タグの属性、 referrerpolicy または crossorigin<img>タグの属性に似たものを探しています。

javascripthtmlsecuritycookies
29
Valentin

更新：この回避策は、以下に対しては機能しません。

  • Firefox 68
  • Safari 12.1.2

この問題に数日間挑戦した後、<img>タグと現在利用可能なテクニックを使用してこれを実行できないことを確認できます。

正しい方法は、Googleのように画像にcookielessプロキシサーバーを使用することですが、現時点ではこれはリソースを大量に消費します。

許容できる回避策：

  • Cookieを無効にするには、<img>を<iframesandbox>に置き換えます。
  • <iframe>内に画像を表示するには、インラインCSSで Data URI を使用します。
  • <img>タグのサイズ変更動作をエミュレートするには、CSS background-size: cover を使用して画像を拡大縮小します。これにより、幅と高さを内部画像に適用される<iframe>に設定できます。
  • [〜＃〜] aria [〜＃〜] 属性を使用して、altの代わりにrole="img"およびaria-labelを指定します。

例：

<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

これはほとんどの場合オプションではありませんが、サードパーティのイメージがAccess-Control-Allow-Originまたはホストを含​​む*ヘッダーで提供されている場合、crossorigin="anonymous"属性を使用してCookieを無効にすることができます。これらの場合、プライバシーを強化するためにreferrerpolicy="no-referrer"も含める必要があります。

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

ほとんどのWebサイトはこのヘッダーを設定しないため、別のヘッダーを見つける必要があります。しかし、FacebookのAPIなど一部の機能はあり、これがそのような場合の最も簡単なソリューションです。

0
Jeremy Banks

理想的なソリューションではありませんが、iframeを使用して画像をロードし、cssトリックを使用してiframeをマスクできる場合があります。

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

そうでなければ、クッキーを削除する純粋なHTMLの方法を知りません。 iframeのcorsポリシーがそれを妨げている場合、JSを使用して親からiframe Cookieを変更できるとは思いません。

0
lanky