davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
							<!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` element
  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>iOS Privacy: Announcing InAppBrowser.com - see what JavaScript commands get injected through an in-app browser (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="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.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>
    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://krausefx.com/blog/announcing-inappbrowsercom-see-what-javascript-commands-get-executed-in-an-in-app-browser">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>iOS Privacy: Announcing InAppBrowser.com - see what JavaScript commands get injected through an in-app browser</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://krausefx.com/blog/announcing-inappbrowsercom-see-what-javascript-commands-get-executed-in-an-in-app-browser" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p><a href="https://krausefx.com/blog/ios-privacy-instagram-and-facebook-can-track-anything-you-do-on-any-website-in-their-in-app-browser">Last week I published a report</a> on the risks of mobile apps using in-app browsers. Some apps, like Instagram and Facebook, inject JavaScript code into third party websites that cause potential security and privacy risks to the user.</p>

<p>I was so happy to see the article featured by major media outlets across the globe, like <a href="https://www.theguardian.com/technology/2022/aug/11/meta-injecting-code-into-websites-visited-by-its-users-to-track-them-research-says">TheGuardian</a> and <a href="https://www.theregister.com/2022/08/12/meta_ios_privacy/">The Register</a>, generated a <a href="https://twitter.com/KrauseFx/status/1557412468368052225">over a million impressions on Twitter</a>, and was ranked <a href="https://news.ycombinator.com/item?id=32415470">#1 on HackerNews</a> for more than 12 hours. After reading through the replies and DMs, I saw a common question across the community:</p>

<div class="tiktokcontainer" id="desktop">
  <a href="https://krausefx.com/assets/posts/inappbrowser/app_screenshots/tiktok_top.png" target="_blank">
    <img src="https://krausefx.com/assets/posts/inappbrowser/app_screenshots/tiktok_top.png" alt="An iPhone showing the inappbrowser.com website, rendered inside TikTok, showing how there is CSS code being added, added monitoring for all taps and all keyboard inputs, as well as getting the coordinates of elements the user taps">
  </a>
  <h4>TikTok's In-App Browser injecting code to observe all taps and keyboard inputs, which can include passwords and credit cards</h4>
</div>

<p><strong>“How can I verify what apps do in their webviews?”</strong></p>

<p>Introducing <a href="https://InAppBrowser.com">InAppBrowser.com</a>, a simple tool to list the JavaScript commands executed by the iOS app rendering the page.</p>

<p>To try this this tool yourself:</p>

<ol>
  <li>Open an app you want to analyze</li>
  <li>Share the url <a href="https://InAppBrowser.com">https://InAppBrowser.com</a> somewhere inside the app (e.g. send a DM to a friend, or post to your feed)</li>
  <li>Tap on the link inside the app to open it</li>
  <li>Read the report on the screen</li>
</ol>

<div class="tiktokcontainer no-print" id="mobile">
  <a href="https://krausefx.com/assets/posts/inappbrowser/app_screenshots/tiktok_top.png" target="_blank">
    <img src="https://krausefx.com/assets/posts/inappbrowser/app_screenshots/tiktok_top.png" alt="An iPhone showing the inappbrowser.com website, rendered inside TikTok, showing how there is CSS code being added, added monitoring for all taps and all keyboard inputs, as well as getting the coordinates of elements the user taps">
  </a>
  <h4>TikTok's In-App Browser injecting code to observe all taps and keyboard inputs, which can include passwords and credit cards</h4>
</div>

<p>I started using this tool to analyze the most popular iOS apps that have their own in-app browser. Below are the results I’ve found.</p>

<p>For this analysis I have excluded all third party iOS browsers (Chrome, Brave, etc.), as they use JavaScript to offer some of their functionality, like a password manager. Apple requires all third party iOS browsers apps to use the Safari rendering engine <code class="language-plaintext highlighter-rouge">WebKit</code>.</p>

<p><strong><em>Important Note:</em></strong> This tool can’t detect all JavaScript commands executed, as well as doesn’t show any tracking the app might do using native code (like custom gesture recognisers). More details on this below.</p>

<p><strong>Fully Open Source</strong></p>

<p><a href="https://InAppBrowser.com">InAppBrowser.com</a> is designed for everybody to verify for themselves what apps are doing inside their in-app browsers. I have decided to open source the code used for this analysis, you can check it out on <a href="https://github.com/KrauseFx/inAppBrowser.com">GitHub</a>. This allows the community to update and improve this script over time.</p>

<h2 id="ios-apps-that-have-their-own-in-app-browser">iOS Apps that have their own In-App Browser</h2>

<ul>
  <li><strong>Option to open in default browser</strong>: Does the app provide a button to open the currently shown link in the default browser?</li>
  <li><strong>Modify page</strong>: Does the app inject JavaScript code into third party websites to modify its content? This includes adding tracking code (like inputs, text selections, taps, etc.), injecting external JavaScript files, as well as creating new HTML elements.</li>
  <li><strong>Fetch metadata</strong>: Does the app run JavaScript code to fetch website metadata? This is a harmless thing to do, and doesn’t cause any real security or privacy risks.</li>
  <li><strong>JS</strong>: A link to the JavaScript code that I was able to detect. Disclaimer: There might be other code executed. The code might not be a 100% accurate representation of all JS commands.</li>
</ul>

<p>Click on the <code class="language-plaintext highlighter-rouge">Yes</code> or <code class="language-plaintext highlighter-rouge">None</code> on the above table to see a screenshot of the app.</p>

<p><strong>Important</strong>: Just because an app injects JavaScript into external websites, doesn’t mean the app is doing anything malicious. There is no way for us to know the full details on what kind of data each in-app browser collects, or how or if the data is being transferred or used. This publication is stating the JavaScript commands that get executed by each app, as well as describing what effect each of those commands might have. For more background on the risks of in-app browsers, check out <a href="https://krausefx.com/blog/ios-privacy-instagram-and-facebook-can-track-anything-you-do-on-any-website-in-their-in-app-browser">last week’s publication</a>.</p>

<p>Even if some of the apps above have green checkmarks, they might use the new <code class="language-plaintext highlighter-rouge">WKContentWorld</code> isolated JavaScript, which I’ll describe below.</p>

<h2 id="tiktok-monitoring-all-keyboard-inputs-and-taps">TikTok monitoring all keyboard inputs and taps</h2>

<p><a href="https://krausefx.com/assets/posts/inappbrowser/app_screenshots/tiktok.png" target="_blank">
  <img class="details-for-specific-app" src="https://krausefx.com/assets/posts/inappbrowser/app_screenshots/tiktok_cut.png">
</a></p>

<p>When you open any link on the TikTok iOS app, it’s opened inside their in-app browser. While you are interacting with the website, <strong>TikTok subscribes to all keyboard inputs</strong> (including passwords, credit card information, etc.) and every tap on the screen, like which buttons and links you click.</p>

<ul>
  <li>TikTok iOS subscribes to every keystroke (text inputs) happening on third party websites rendered inside the TikTok app. This can include passwords, credit card information and other sensitive user data. (<code class="language-plaintext highlighter-rouge">keypress</code> and <code class="language-plaintext highlighter-rouge">keydown</code>). We can’t know what TikTok uses the subscription for, but from a technical perspective, <strong>this is the equivalent of installing a keylogger</strong> on third party websites.</li>
  <li>TikTok iOS subscribes to every tap on any button, link, image or other component on websites rendered inside the TikTok app.</li>
  <li>TikTok iOS uses a JavaScript function to get details about the element the user clicked on, like an image (<code class="language-plaintext highlighter-rouge">document.elementFromPoint</code>)</li>
</ul>

<p><a href="https://krausefx.com/assets/posts/inappbrowser/app_js/tiktok.js" target="_blank">Here</a> is a list of all JavaScript commands I was able to detect.</p>

<p><strong>Update:</strong> TikTok’s statement, as reported per <a href="https://www.forbes.com/sites/richardnieva/2022/08/18/tiktok-in-app-browser-research/">Forbes.com</a>:</p>

<blockquote>
  <p><strong>The company confirmed those features exist</strong> in the code, but said TikTok is not using them.</p>

  <p>“Like other platforms, we use an in-app browser to provide an optimal user experience, but the Javascript code in question is used only for debugging, troubleshooting and performance monitoring of that experience — like checking how quickly a page loads or whether it crashes,” spokesperson Maureen Shanahan said in a statement.</p>
</blockquote>

<p>The above statement confirms my findings. TikTok injects code into third party websites through their in-app browsers that behaves like a keylogger. However claims it’s not being used.</p>

<h2 id="instagram-does-more-than-just-inserting-pcmjs">Instagram does more than just inserting <code class="language-plaintext highlighter-rouge">pcm.js</code></h2>

<p><a href="https://krausefx.com/assets/posts/inappbrowser/app_screenshots/instagram.png" target="_blank">
  <img class="details-for-specific-app" src="https://krausefx.com/assets/posts/inappbrowser/app_screenshots/instagram_cut.png">
</a></p>

<p><a href="https://krausefx.com/blog/ios-privacy-instagram-and-facebook-can-track-anything-you-do-on-any-website-in-their-in-app-browser">Last week’s post</a> talked about how Meta injects the <a href="https://connect.facebook.net/en_US/pcm.js"><code class="language-plaintext highlighter-rouge">pcm.js</code></a> script onto third party websites. <a href="https://twitter.com/KrauseFx/status/1558867249691123712">Meta claimed</a> they only inject the script to respect the user’s ATT choice, and additional “security and user features”.</p>

<blockquote>
  <p>The code in question allows us to respect people’s privacy choices by helping aggregate events (such as making a purchase online) from pixels already on websites, before those events are used for advertising or measurement purposes.</p>
</blockquote>

<p>– <a href="https://twitter.com/andymstone/status/1557825414176940035">via this tweet</a></p>

<p>After improving the JavaScript detection, <strong>I now found some additional commands Instagram executes:</strong></p>

<ul>
  <li>Instagram iOS subscribes to every tap on any button, link, image or other component on external websites rendered inside the Instagram app.</li>
  <li>Instagram iOS subscribes to every time the user selects a UI element (like a text field) on third party websites rendered inside the Instagram app.</li>
</ul>

<p><a href="https://krausefx.com/assets/posts/inappbrowser/app_js/instagram.js" target="_blank">Here</a> is a list of all JavaScript commands I was able to detect.</p>

<p><strong>Note on subscribing</strong>: When I talk about “<em>App subscribes to</em>”, I mean that the app subscribes to the JavaScript events of that type (e.g. all taps). There is no way to verify what happens with the data.</p>

<p>Since iOS 14.3 (December 2020), Apple introduced the support of running JavaScript code in the <a href="https://developer.apple.com/documentation/webkit/wkcontentworld">context of a specified frame and content world</a>. JavaScript commands executed using this approach can still fully access the third party website, but can’t be detected by the website itself (in this case a tool like InAppBrowser.com).</p>

<blockquote>
  <p>Use a WKContentWorld object as a namespace to separate your app’s web environment from the environment of individual webpages or scripts you execute. Content worlds help prevent issues that occur when two scripts modify environment variables in conflicting ways. […]
Changes you make to the DOM are visible to all script code, regardless of content world.</p>
</blockquote>

<p>– <a href="https://developer.apple.com/documentation/webkit/wkcontentworld">Apple WKContentWorld Docs</a></p>

<p>This new system was initially built so that website operators can’t interfere with JavaScript code of browser plugins, and to make fingerprinting more difficult. As a user, you can check the source code of any browser plugin, as you are in control over the browser itself. However with in-app browsers we don’t have a reliable way to verify all the code that is executed.</p>

<p>So when Meta or TikTok want to hide the JavaScript commands they execute on third party websites, all they’d need to do is to update their JavaScript runner:</p>

<div class="language-swift highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Currently used code by Meta &amp; TikTok</span>
<span class="k">self</span><span class="o">.</span><span class="nf">evaluateJavaScript</span><span class="p">(</span><span class="n">javascript</span><span class="p">)</span>

<span class="c1">// Updated to use the new system</span>
<span class="k">self</span><span class="o">.</span><span class="nf">evaluateJavaScript</span><span class="p">(</span><span class="n">javascript</span><span class="p">,</span> <span class="nv">in</span><span class="p">:</span> <span class="kc">nil</span><span class="p">,</span> <span class="nv">in</span><span class="p">:</span> <span class="o">.</span><span class="n">defaultClient</span><span class="p">,</span> <span class="nv">completionHandler</span><span class="p">:</span> <span class="p">{</span> <span class="n">_</span> <span class="k">in</span> <span class="p">})</span>
</code></pre></div></div>

<p>For example, Firefox for iOS already <a href="https://github.com/mozilla-mobile/firefox-ios/blob/d613cb24d5dc717466f098e13625a3e0c5e4703e/Shared/Extensions/WKWebViewExtensions.swift#L19-L29">uses the new WKContentWorld system</a>. Due to the open source nature of Firefox and Google Chrome for iOS it’s easy for us as a community to verify nothing suspicious is happening.</p>

<p>Especially after the publicity of <a href="https://krausefx.com/blog/ios-privacy-instagram-and-facebook-can-track-anything-you-do-on-any-website-in-their-in-app-browser">last week’s post</a>, as well as this one, tech companies that still use custom in-app browsers will very quickly update to use the new <code class="language-plaintext highlighter-rouge">WKContentWorld</code> isolated JavaScript system, so their code becomes undetectable to us.</p>

<p>Hence, <strong>it becomes more important than ever to find a solution to end the use of custom in-app browsers</strong> for showing third party content.</p>

<h3 id="valid-use-cases-for-in-app-webviews">Valid use-cases for in-app webviews</h3>

<p>There are many valid reasons to use an in-app browser, particularly when an app accesses its own websites to complete specific transactions. For example, an airline app might not have the seat selection implemented natively for their whole airplane fleet. Instead they might choose to reuse the web-interface they already have. If they weren’t able to inject cookies or JavaScript commands inside their webview, the user would have to re-login while using the app, just so they can select their seat. Shoutout to Venmo, which uses their own in-app browser for all their internal websites (e.g. Terms of Service), but as soon as you tap on an external link, they automatically transition over to <code class="language-plaintext highlighter-rouge">SFSafariViewController</code>.</p>

<p>However, there are data privacy &amp; integrity issues when you use in-app browsers to visit non-first party websites, such as how Instagram and TikTok show all external websites inside their app. More importantly, those apps rarely offer an option to use a standard browser as default, instead of the in-app browser. And in some cases (like TikTok), there is no button to open the currently shown page in the default browser.</p>

<h2 id="ios-apps-that-use-safari">iOS Apps that use Safari</h2>

<p>The apps below follow Apple’s recommendation of using Safari or <code class="language-plaintext highlighter-rouge">SFSafariViewController</code> for viewing external websites. More context on <code class="language-plaintext highlighter-rouge">SFSafariViewController</code> in the <a href="https://krausefx.com/blog/ios-privacy-instagram-and-facebook-can-track-anything-you-do-on-any-website-in-their-in-app-browser">original article</a>.</p>

<p>All apps that use <code class="language-plaintext highlighter-rouge">SFSafariViewController</code> or <code class="language-plaintext highlighter-rouge">Default Browser</code> are on the safe side, and there is no way for apps to inject any code onto websites, even with the new <code class="language-plaintext highlighter-rouge">WKContentWorld</code> system.</p>

<h2 id="what-can-we-do">What can we do?</h2>

<p><strong>As a user of an app</strong></p>

<div id="youtube-button">
  <img src="https://krausefx.com/assets/posts/inappbrowser/app_screenshots/video-preview.png" alt="A link to the YouTube video showing the website in action inside the Instagram app">
  <p><b>Demo video of how to escape the Instagram In-App Browser</b></p>
</div>

<p>Most in-app browsers have a way to open the currently shown website in Safari. As soon as you land inside an in-app browser, use the <code class="language-plaintext highlighter-rouge">Open in Browser</code> feature to switch to a safer browser. If that button isn’t available, you will have to copy &amp; paste the URL to open the link in the browser of your choice. If the app makes it difficult to even do that, you can tap &amp; hold a link on the website and then use the Copy feature, which can be a little tricky to get right.</p>

<p>TikTok doesn’t have a button to open websites in the default browser.</p>

<p><strong>Update:</strong> According to some tweets, sometimes there is a way to open websites in the default browser.</p>

<p><strong>Companies using in-app browsers</strong></p>

<p>If you’re at a company where you have an in-app browser, use it only for your own pages and open all external links in the user’s default browser. Additionally, provide a setting to let users choose a default browser over an in-app browser experience. Unfortunately, these types of changes rarely get prioritized over features that move metrics inside of tech organizations. However, it’s so important for people to educate others on their team, and their managers, about the positive impact of making better security and privacy decisions for the user. These changes can be transparently marketed to users as an opportunity to build further trust.</p>

<p><strong>Major tech companies</strong></p>

<p>It’s important to call out how much movement there’s been in the privacy of data space, but it’s unclear how many of these changes have been motion vs. true progress for the industry and the user.</p>

<blockquote>
  <p>“Many tech companies take heat for ‘abusing their users’ privacy’, when in fact they try to balance out business priorities, great user experiences, and ensuring they are respecting privacy and user data. It’s clear why companies were motivated to provide an in-app experience for external websites in the first place.</p>

  <p>With the latest technology, companies can start to provide a smooth experience for the user, while respecting their privacy. It’s possible for iOS or Android developers to move the privacy standards and responsibility to Apple &amp; Google (e.g. stricter app reviews, more permission screens, etc.), however this is a much larger conversation where companies need to work together to define what standards should exist. We can’t have one or two companies set the direction for the entire industry, since a solution needs to work for the large majority of companies. Otherwise, we’re left in a world where companies are forced to get creative on finding ways to track additional user data from any source possible, or define their own standards of what’s best for user privacy, ultimately hurting the consumer and the product experience.”</p>
</blockquote>

<p>– <a href="https://twitter.com/hemal">Hemal Shah</a></p>

<p>Technology-wise <a href="https://webkit.org/blog/10882/app-bound-domains/">App-Bound Domains</a> seems to be an excellent new WebKit feature making it possible for developers to offer a safer in-app browsing experience when using <code class="language-plaintext highlighter-rouge">WKWebView</code>. As an app developer, you can define which domains your app can access (your own), and you won’t be able to control third party pages any more. To disable the protection, a user would have to explicitly disable it in the iOS settings app. However, at the time of writing, this system is not yet enabled by default.</p>

<h3 id="faqs-for-non-tech-readers">FAQs for non-tech readers</h3>

<ul>
  <li><strong>Can in-app browsers read everything I do online?</strong> Yes, if you are browsing through their in-app browser they technically can.</li>
  <li><strong>Do the apps above actually steal my passwords, address and credit card numbers?</strong> No! I wanted to showcase that bad actors could get access to this data with this approach. As shown in the past, if it’s possible for a company to get access to data legally and for free, without asking the user for permission, <a href="https://twitter.com/steipete/status/1025024813889478656">they will track it</a>.</li>
  <li><strong>How can I protect myself?</strong> Whenever you open a link from any app, see if the app offers a way to open the currently shown website in your default browser. During this analysis, every app besides TikTok offered a way to do this.</li>
  <li><strong>Are companies doing this on purpose?</strong> Building your own in-app browser takes a non-trivial time to program and maintain, significantly more than just using the privacy and user-friendly alternative that’s already been built into the iPhone for the past 7 years. Most likely there is some motivation there for the company to track your activities on those websites.</li>
  <li><strong>I opened InAppBrowser.com inside an app, and it doesn’t show any commands. Am I safe?</strong> No! First of all, the website only checks for one of many hundreds of attack vectors: JavaScript injection from the app itself. And even for those, as of December 2020, app developers can completely hide the JavaScript commands they execute, therefore there is no way for us to verify what is actually happening under the hood.</li>
</ul>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> 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 src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    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>