davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>“Hey Google, stop tracking me” (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.magiclasso.co/insights/hey-google/">

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
  <header>
    <h1>“Hey Google, stop tracking me”</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="https://www.magiclasso.co/insights/hey-google/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <p>It’s common knowledge that Google has used their political, marketing and technical prowess <a href="https://www.magiclasso.co/insights/google-undermines-adblock/">to stop and co-opt effective ad blocking</a> on the web. What hasn’t been clear until recently is how Google is using the Chrome web browser to track individuals, even when ad blocking and in-built tracking prevention is enabled.</p>

<h3 id="tracking-three-ways">Tracking three ways</h3>

<p>Google recently invented a third way to track who you are and what you view on the web.</p>

<p>The first wave of web tracking worked via cookies. Each visitor to a page would be given a unique ID which would be stored within a browser cookie. Using third-party JavaScript tracking, this cookie was then cross-referenced and retrieved on pages you visited, even across different websites.</p>

<p>Eventually a profile of your browsing history would be created. Google (and other ad companies) then used this profile to determine the best ads to serve you, in order to prompt a click and a purchase.</p>

<p>However as cookie-based tracking became more obvious and intolerable, users employed ad blockers to prevent and block these cookies.</p>

<p>Consequently ad networks deployed a second way to track users called browser fingerprinting. Browser fingerprinting consists of collecting data about the configuration of your browser and system when you visit a site. This process can reveal a surprising amount of information about your software and hardware environment, and ultimately can be used to construct a unique identifier of you, called a browser fingerprint.</p>

<p>The browser fingerprint is then used to, once again, target advertising. In order to reduce the effectiveness of fingerprinting, some browsers like Safari have been changing how they identify the browser and its features to websites. This has effectively neutered this tracking approach.</p>

<p>With the first and second tracking approaches no longer as effective, Google has decided to up the ante and deploy tracking directly via its Chrome browser.</p>

<h3 id="chromes-unique-install-id">Chrome’s unique install ID</h3>

<p>As an open-source project, it’s possible to view the source code for the Chrome web browser. Insightful contributors to the code have <a href="https://github.com/w3ctag/design-reviews/issues/467#issuecomment-581944600">recently discovered</a> an insidious third way that Google tracks you across the web.</p>

<p>Each and every install of Chrome, since version 54, have generated a unique ID. Depending upon which settings you configure, the unique ID may be longer or shorter.</p>

<p>Irrespective, when used in combination with other configuration features, Google now generates and retains a unique ID in each Chrome installation. The ID represents your particular Chrome install, and as soon as you log into any Google account, is likely also linked directly to your individual Google profile.</p>

<p>The evil next step is that this unique ID is then sent (in the “x-client-data” field of a Chrome web request) to Google every time the browser accesses a Google web property. This ID is not sent to any non-Google web requests; thereby restricting the tracking capability to Google itself.</p>

<p>As well as being immoral, this step may also be illegal (at least in privacy sensitive jurisdictions) as it’s retaining and sending personal identifiers without informed consent.</p>

<p>So every time you visit a Google web page or use a third party site which uses some Google resource, this ID is sent to Google and can be used to track which website or individual page you are viewing. As Google’s services such as scripts, captchas and fonts are used extensively on the most popular web sites, it’s likely that Google tracks most web pages you visit.</p>

<p>Unfortunately for users of Google Chrome, this third wave tracking identifier will not be removed by using VPNs or Chrome based ad blockers.</p>

<h3 id="who-can-you-trust">Who can you trust?</h3>

<p>It has been repeatedly demonstrated that Google cannot be trusted with user privacy.  Their business model depends upon tracking and surveilling web users.</p>

<p>For a user who wants online privacy, the only option is to use a web browser whose creators aren’t funded via advertising. Creators who aren’t incentivised to continually gather more information about you. Luckily there are a number of alternative options available including Firefox or Safari. If you’re still using Google Chrome, it’s time to switch to a browser that isn’t built to monetise your privacy.</p>
  </main>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script type="text/javascript">
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>