pygy/index.html

## index.html
<!doctype html>
<title>ChargingGate </title>
<input type=checkbox id="hasGetBattery"><input type=checkbox id="batteryStatus">
<div id=ua></div>
<hr>
<h1>
  #ChargingGate?
</h1>
<p>
  Another day, another dystopian browser API...
</p>
<p>
Google Chrome, Microsoft Edge, Opera, and other Chromium derivatives let Web sites monitor the charging state of your device.
</p>
<p>
This is nifty for fingerprinying, as the status can be correlated across tabs and browsers, even if one session goes through a proxy/VPN, and the other doesn't.
</p>
<p>
Firefox, Safari, and Internet Explorer do not provide the battery status. Brave has the API enabled, but neutered (it behaves as if you were always charging).
</p>
<p>
That is this information freely available to anyone baffles the mind. The standard was misguided and has been deprecated, why is this still enabled, Google?
</p>
<pre>
<script>
if (typeof navigator.getBattery === "function") {

 hasGetBattery.checked = true

 navigator.getBattery().then(bm => {

    batteryStatus.checked = bm.charging

    bm.onchargingchange = e => (
      batteryStatus.checked = e.target.charging
    )
  })
}


ua.textContent = navigator.userAgent
for (const [name, rx] of Object.entries({
  Safari: /Version\/[\d+\.]+ Safari\/[\d+\.]+/i,
  "Microsoft Edge": /edge?/i,
  Opera: /OPR\//i,
  Firefox: /Gecko\/\d+ Firefox\/\d+/,
  "Google Chrome": /Chrome\/[\d\.]+ Safari\/[\d\.]+/,
  Chromium: /\bChrome\b/,
  "Your Unrecognized Browser": /.*/
})) {
  if (rx.test(navigator.userAgent)) {
    const title = document.head.firstChild
    title.textContent += (document.body.className = name)
    break
  }
}
var request = new XMLHttpRequest()

request.open('GET', 'https://api.duckduckgo.com/?q=useragent&format=json', true)

request.onload = function () {
  var data = JSON.parse(this.response)
  var isBrave = data['Answer'].includes('Brave');
  if(isBrave){
    document.body.className = "Brave"
  }
}
request.send()
</script>
</pre>
<style>
* {
  font-family: sans-serif;
}
body {
  max-width: 600px;
  margin: 0 auto;
  padding: 12px 15px;
}
body::before {
  content: attr(class);
  display: inline;
  font-size: 20px;
}
#ua {
  margin-top: 0.75em;
  font-size: 0.75em
}
p {
  margin-top: 1.5em;
  line-height: 1.5em;
}
input {
  -webkit-appearance:none;
  display: inline;
  pointer-events: none;
  font-size: 18px;
}
input:checked {
  display: none;
}
input + #batteryStatus {
  display:none;
}
input:checked + #batteryStatus {
  display:inline;
}
input::after {
  display: inline;
}
#hasGetBattery::before {
  content: "👍, thankfully, does not let Web sites access the battery status.";
}

#hasGetBattery:checked::before{
  content: "";
}
.Brave input#hasGetBattery:checked {
  margin: 0;
  display: inline;
}
.Brave input#hasGetBattery:checked::before{
  content: " 👍";
}
#batteryStatus::before {
  content: "🔋 tells Web pages that your device is";
}
#batteryStatus:checked::before {
  content: "🔌tells the Web that your device is";
}
#batteryStatus::after {
  font-weight: bold;
  content: " unplugged.";
}
#batteryStatus:checked::after {
  content: " plugged.";
}
.Brave #batteryStatus:checked::after {
  font-weight: normal;
  content: " plugged... no matter what its actual status is. Good.";
}
</style>
	<!doctype html>
	<title>ChargingGate </title>
	<input type=checkbox id="hasGetBattery"><input type=checkbox id="batteryStatus">
	<div id=ua></div>
	<hr>
	<h1>
	#ChargingGate?
	</h1>
	<p>
	Another day, another dystopian browser API...
	</p>
	<p>
	Google Chrome, Microsoft Edge, Opera, and other Chromium derivatives let Web sites monitor the charging state of your device.
	</p>
	<p>
	This is nifty for fingerprinying, as the status can be correlated across tabs and browsers, even if one session goes through a proxy/VPN, and the other doesn't.
	</p>
	<p>
	Firefox, Safari, and Internet Explorer do not provide the battery status. Brave has the API enabled, but neutered (it behaves as if you were always charging).
	</p>
	<p>
	That is this information freely available to anyone baffles the mind. The standard was misguided and has been deprecated, why is this still enabled, Google?
	</p>
	<pre>
	<script>
	if (typeof navigator.getBattery === "function") {

	hasGetBattery.checked = true

	navigator.getBattery().then(bm => {

	batteryStatus.checked = bm.charging

	bm.onchargingchange = e => (
	batteryStatus.checked = e.target.charging
	)
	})
	}



	ua.textContent = navigator.userAgent
	for (const [name, rx] of Object.entries({
	Safari: /Version\/[\d+\.]+ Safari\/[\d+\.]+/i,
	"Microsoft Edge": /edge?/i,
	Opera: /OPR\//i,
	Firefox: /Gecko\/\d+ Firefox\/\d+/,
	"Google Chrome": /Chrome\/[\d\.]+ Safari\/[\d\.]+/,
	Chromium: /\bChrome\b/,
	"Your Unrecognized Browser": /.*/
	})) {
	if (rx.test(navigator.userAgent)) {
	const title = document.head.firstChild
	title.textContent += (document.body.className = name)
	break
	}
	}
	var request = new XMLHttpRequest()

	request.open('GET', 'https://api.duckduckgo.com/?q=useragent&format=json', true)

	request.onload = function () {
	var data = JSON.parse(this.response)
	var isBrave = data['Answer'].includes('Brave');
	if(isBrave){
	document.body.className = "Brave"
	}
	}
	request.send()
	</script>
	</pre>
	<style>
	* {
	font-family: sans-serif;
	}
	body {
	max-width: 600px;
	margin: 0 auto;
	padding: 12px 15px;
	}
	body::before {
	content: attr(class);
	display: inline;
	font-size: 20px;
	}
	#ua {
	margin-top: 0.75em;
	font-size: 0.75em
	}
	p {
	margin-top: 1.5em;
	line-height: 1.5em;
	}
	input {
	-webkit-appearance:none;
	display: inline;
	pointer-events: none;
	font-size: 18px;
	}
	input:checked {
	display: none;
	}
	input + #batteryStatus {
	display:none;
	}
	input:checked + #batteryStatus {
	display:inline;
	}
	input::after {
	display: inline;
	}
	#hasGetBattery::before {
	content: "👍, thankfully, does not let Web sites access the battery status.";
	}

	#hasGetBattery:checked::before{
	content: "";
	}
	.Brave input#hasGetBattery:checked {
	margin: 0;
	display: inline;
	}
	.Brave input#hasGetBattery:checked::before{
	content: " 👍";
	}
	#batteryStatus::before {
	content: "🔋 tells Web pages that your device is";
	}
	#batteryStatus:checked::before {
	content: "🔌tells the Web that your device is";
	}
	#batteryStatus::after {
	font-weight: bold;
	content: " unplugged.";
	}
	#batteryStatus:checked::after {
	content: " plugged.";
	}
	.Brave #batteryStatus:checked::after {
	font-weight: normal;
	content: " plugged... no matter what its actual status is. Good.";
	}
	</style>