Was eine Webseite über dich erfährt

Der Server, den du baust, heißt Tracker. Lege daneben tracker.rb an. Der Anfang ist ein Webserver, wie du ihn schon kennst: Er liest die Anfrage, legt die Header in einen Hash und antwortet unter / mit einer Seite, auf der alle Header stehen.

require 'socket'
require 'uri'
require 'cgi'

# Schickt eine vollständige HTTP-Antwort, auf Wunsch mit weiteren Headern
def respond(client, status, type, body, extra = {})
  client.print "HTTP/1.1 #{status}\r\n"
  client.print "Content-Type: #{type}\r\n"
  client.print "Content-Length: #{body.bytesize}\r\n"
  extra.each { |name, value| client.print "#{name}: #{value}\r\n" }
  client.print "Connection: close\r\n"
  client.print "\r\n"
  client.print body
  client.close
end

# Text, der in HTML sicher ist: aus < wird &lt; und so weiter
def h(text)
  CGI.escapeHTML(text.to_s)
end

# Ein wenig CSS, damit die Seiten lesbar sind
STYLE = "<style>body { font-family: system-ui, sans-serif; margin: 2em; }\n" \
        "table { border-collapse: collapse; }\n" \
        "th, td { padding: 0.3em 0.8em; border-bottom: 1px solid #ddd; text-align: left; vertical-align: top; }\n" \
        "th { color: #666; font-weight: normal; }\n" \
        "td { word-break: break-all; }</style>\n"

# Die Seite unter /: alle Header, die der Browser geschickt hat
def headers_page(headers)
  rows = headers.map { |name, value| "<tr><th>#{h(name)}</th><td>#{h(value)}</td></tr>" }
  "<!DOCTYPE html><meta charset='utf-8'><title>Was ich über dich weiß</title>\n#{STYLE}" \
    "<h1>Was dieser Server über dich weiß</h1>\n<table>\n#{rows.join("\n")}\n</table>\n"
end

server = TCPServer.new(8000)
puts "Der Tracker wartet auf Port 8000 ..."

loop do
  Thread.new(server.accept) do |client|
    method, target = client.gets.to_s.split(' ')
    # Die Header in einen Hash: »Name: Wert«
    headers = {}
    while (line = client.gets) && line != "\r\n"
      name, value = line.split(':', 2)
      headers[name.strip.downcase] = value.to_s.strip
    end
    path, query = target.to_s.split('?', 2)
    params = URI.decode_www_form(query.to_s).to_h
    puts "#{method} #{target}"
    puts "  Referer: #{headers['referer']}" if headers['referer']

    case path
    when '/'
      respond(client, '200 OK', 'text/html; charset=utf-8', headers_page(headers))
    else
      respond(client, '404 Not Found', 'text/plain; charset=utf-8', "Die Seite #{path} gibt es nicht.\n")
    end
  end
end

Neu gegenüber deinem Webserver sind zwei Kleinigkeiten:

• respond nimmt als fünften Parameter einen Hash mit weiteren Headern, etwa 'Cache-Control' => 'no-store'. Ohne ihn bleibt alles wie bisher.
• h macht Text sicher für HTML. Was im Browser eingestellt ist, landet hier auf einer Seite, und ein < darin würde sonst als Tag gelesen.

Starte den Tracker:

ruby tracker.rb

Der Server, den du baust, heißt Tracker. Lege daneben tracker.py an. Der Anfang ist ein Webserver, wie du ihn schon kennst: Er liest die Anfrage, legt die Header in ein dict und antwortet unter / mit einer Seite, auf der alle Header stehen.

import html
import socket
import threading
from urllib.parse import parse_qsl


def respond(client, status, content_type, body, extra=None):
    """Schickt eine vollständige HTTP-Antwort, auf Wunsch mit weiteren Headern."""
    data = body.encode() if isinstance(body, str) else body
    head = (f'HTTP/1.1 {status}\r\n'
            f'Content-Type: {content_type}\r\n'
            f'Content-Length: {len(data)}\r\n')
    for name, value in (extra or {}).items():
        head += f'{name}: {value}\r\n'
    head += 'Connection: close\r\n\r\n'
    client.sendall(head.encode() + data)


def h(text):
    """Text, der in HTML sicher ist: aus < wird &lt; und so weiter"""
    return html.escape(str(text if text is not None else ''))


# Ein wenig CSS, damit die Seiten lesbar sind
STYLE = ('<style>body { font-family: system-ui, sans-serif; margin: 2em; }\n'
         'table { border-collapse: collapse; }\n'
         'th, td { padding: 0.3em 0.8em; border-bottom: 1px solid #ddd; text-align: left; vertical-align: top; }\n'
         'th { color: #666; font-weight: normal; }\n'
         'td { word-break: break-all; }</style>\n')


def headers_page(headers):
    """Die Seite unter /: alle Header, die der Browser geschickt hat"""
    rows = '\n'.join(f'<tr><th>{h(name)}</th><td>{h(value)}</td></tr>' for name, value in headers.items())
    return ("<!DOCTYPE html><meta charset='utf-8'><title>Was ich über dich weiß</title>\n" + STYLE +
            f'<h1>Was dieser Server über dich weiß</h1>\n<table>\n{rows}\n</table>\n')


def handle(client):
    with client, client.makefile('rb') as reader:
        request_line = reader.readline().decode()
        method, _, rest = request_line.partition(' ')
        target, _, version = rest.partition(' ')
        # Die Header in ein dict: »Name: Wert«
        headers = {}
        for line in reader:
            if line == b'\r\n':
                break
            name, _, value = line.decode().partition(':')
            headers[name.strip().lower()] = value.strip()
        path, _, query = target.partition('?')
        params = dict(parse_qsl(query))
        print(method, target)
        if 'referer' in headers:
            print('  Referer:', headers['referer'])

        if path == '/':
            respond(client, '200 OK', 'text/html; charset=utf-8', headers_page(headers))
        else:
            respond(client, '404 Not Found', 'text/plain; charset=utf-8', f'Die Seite {path} gibt es nicht.\n')


server = socket.create_server(('', 8000))
print('Der Tracker wartet auf Port 8000 ...')

while True:
    client, address = server.accept()
    threading.Thread(target=handle, args=(client,), daemon=True).start()

Neu gegenüber deinem Webserver sind zwei Kleinigkeiten:

• respond nimmt als fünften Parameter ein dict mit weiteren Headern, etwa {'Cache-Control': 'no-store'}. Ohne es bleibt alles wie bisher.
• h macht Text sicher für HTML. Was im Browser eingestellt ist, landet hier auf einer Seite, und ein < darin würde sonst als Tag gelesen.

Starte den Tracker:

python3 tracker.py

Unter die require-Zeilen kommen das Bild und der Name der Datei:

require 'cgi'# Ein Bild, das niemand sieht: ein einziges durchsichtiges Pixel im Format GIFPIXEL = 'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'.unpack1('m')# Hier schreibt der Tracker jeden Besuch auf, eine Zeile pro BesuchLOG = File.expand_path('visits.log', __dir__)$log_lock = Mutex.new

Die 42 Bytes des Bildes stehen hier in Base64, einer Schreibweise für Bytes in lauter druckbaren Zeichen; unpack1('m') macht wieder Bytes daraus. Unter headers_page kommt eine Funktion, die einen Besuch aufschreibt:

  "<h1>Was dieser Server über dich weiß</h1>\n<table>\n#{rows.join("\n")}\n</table>\n"end# Eine Zeile im Protokoll: wann, wer, welche Seite, worum es dort gehtdef log_visit(visitor, page, keywords)  line = [Time.now.strftime('%Y-%m-%d %H:%M:%S'), visitor, page, keywords].join("\t")  $log_lock.synchronize { File.write(LOG, line + "\n", mode: 'a') }  puts "  Besuch: #{line}"end

Jede Zeile hat vier Spalten, getrennt durch Tabs ("\t"): die Zeit, wer besucht hat, welche Seite, und ihre Stichwörter. Wer besucht hat, weiß der Tracker noch nicht; bis dahin steht dort ein -. Der Lock sorgt dafür, dass zwei Threads nicht gleichzeitig in die Datei schreiben. Vor else kommt der neue Pfad:

    when '/'      respond(client, '200 OK', 'text/html; charset=utf-8', headers_page(headers))    when '/pixel.gif'      # no-store: Der Browser soll das Bild jedes Mal neu holen      log_visit('-', params['page'], params['keywords'])      respond(client, '200 OK', 'image/gif', PIXEL, 'Cache-Control' => 'no-store')    else

Zu den import-Zeilen kommen base64, os und time, darunter das Bild und der Name der Datei:

import base64import htmlimport osimport socketimport threadingimport timefrom urllib.parse import parse_qsl# Ein Bild, das niemand sieht: ein einziges durchsichtiges Pixel im Format GIFPIXEL = base64.b64decode('R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')# Hier schreibt der Tracker jeden Besuch auf, eine Zeile pro BesuchLOG = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'visits.log')log_lock = threading.Lock()

Die 42 Bytes des Bildes stehen hier in Base64, einer Schreibweise für Bytes in lauter druckbaren Zeichen; b64decode macht wieder Bytes daraus. Unter headers_page kommt eine Funktion, die einen Besuch aufschreibt:

def log_visit(visitor, page, keywords):
    """Eine Zeile im Protokoll: wann, wer, welche Seite, worum es dort geht"""
    line = '\t'.join([time.strftime('%Y-%m-%d %H:%M:%S'), visitor, page or '', keywords or ''])
    with log_lock:
        with open(LOG, 'a') as f:
            f.write(line + '\n')
    print('  Besuch:', line)

Jede Zeile hat vier Spalten, getrennt durch Tabs ('\t'): die Zeit, wer besucht hat, welche Seite, und ihre Stichwörter. Wer besucht hat, weiß der Tracker noch nicht; bis dahin steht dort ein -. Der Lock sorgt dafür, dass zwei Threads nicht gleichzeitig in die Datei schreiben. Vor else kommt der neue Pfad:

        if path == '/':            respond(client, '200 OK', 'text/html; charset=utf-8', headers_page(headers))        elif path == '/pixel.gif':            # no-store: Der Browser soll das Bild jedes Mal neu holen            log_visit('-', params.get('page'), params.get('keywords'))            respond(client, '200 OK', 'image/gif', PIXEL, {'Cache-Control': 'no-store'})        else:

Er braucht dafür Zufall, require 'securerandom' kommt zu den anderen require-Zeilen. Unter /pixel.gif sucht er die Kennung im Cookie; fehlt sie, würfelt er eine neue und schickt sie mit Set-Cookie mit:

    when '/pixel.gif'      visitor = parse_cookies(headers['cookie'].to_s)['visitor']      # no-store: Der Browser soll das Bild jedes Mal neu holen      extra = { 'Cache-Control' => 'no-store' }      if visitor.to_s.empty?        visitor = SecureRandom.hex(4)        # Ein Jahr lang schickt der Browser die Kennung bei jeder Anfrage mit        extra['Set-Cookie'] = "visitor=#{visitor}; Max-Age=31536000; Path=/"      end      log_visit(visitor, params['page'], params['keywords'])      respond(client, '200 OK', 'image/gif', PIXEL, extra)    else

SecureRandom.hex(4) sind vier zufällige Bytes als acht Hexziffern, etwa 3f9a1c2b. Ohne Header Cookie ist headers['cookie'] nil, und to_s macht daraus einen leeren String.

Er braucht dafür Zufall, import secrets kommt zu den anderen import-Zeilen. Unter /pixel.gif sucht er die Kennung im Cookie; fehlt sie, würfelt er eine neue und schickt sie mit Set-Cookie mit:

        elif path == '/pixel.gif':            visitor = parse_cookies(headers.get('cookie', '')).get('visitor')            # no-store: Der Browser soll das Bild jedes Mal neu holen            extra = {'Cache-Control': 'no-store'}            if not visitor:                visitor = secrets.token_hex(4)                # Ein Jahr lang schickt der Browser die Kennung bei jeder Anfrage mit                extra['Set-Cookie'] = f'visitor={visitor}; Max-Age=31536000; Path=/'            log_visit(visitor, params.get('page'), params.get('keywords'))            respond(client, '200 OK', 'image/gif', PIXEL, extra)        else:

secrets.token_hex(4) sind vier zufällige Bytes als acht Hexziffern, etwa 3f9a1c2b.

Unter count_keywords kommt die Funktion, die die Seite baut:

# Die Seite unter /profil: was der Tracker über diese Kennung gesammelt hat
def profile_page(visitor, visits, counts, headers)
  pages = visits.map { |page, keywords| "<li>#{h(page)}</li>" }
  interests = counts.sort_by { |keyword, count| -count }.first(5).map do |keyword, count|
    "<li>#{h(keyword)} (#{count})</li>"
  end
  "<!DOCTYPE html><meta charset='utf-8'><title>Dein Profil</title>\n#{STYLE}" \
    "<h1>Dein Profil</h1>\n" \
    "<p>Deine Kennung: #{h(visitor || 'keine')}</p>\n" \
    "<p>Dein Browser: #{h(headers['user-agent'])}<br>Deine Sprache: #{h(headers['accept-language'])}</p>\n" \
    "<h2>Seiten, auf denen du warst</h2>\n<ol>\n#{pages.join("\n")}\n</ol>\n" \
    "<h2>Was dich vermutlich interessiert</h2>\n<ol>\n#{interests.join("\n")}\n</ol>\n"
end

und vor else der Pfad:

      respond(client, '200 OK', 'image/gif', PIXEL, extra)    when '/profil'      visitor = parse_cookies(headers['cookie'].to_s)['visitor']      lines = File.exist?(LOG) ? File.readlines(LOG, chomp: true) : []      visits = visits_of(lines, visitor)      counts = count_keywords(visits.map { |page, keywords| keywords })      respond(client, '200 OK', 'text/html; charset=utf-8', profile_page(visitor, visits, counts, headers))    else

Unter count_keywords kommt die Funktion, die die Seite baut:

def profile_page(visitor, visits, counts, headers):
    """Die Seite unter /profil: was der Tracker über diese Kennung gesammelt hat"""
    pages = '\n'.join(f'<li>{h(page)}</li>' for page, keywords in visits)
    top = sorted(counts.items(), key=lambda pair: -pair[1])[:5]
    interests = '\n'.join(f'<li>{h(keyword)} ({count})</li>' for keyword, count in top)
    return ("<!DOCTYPE html><meta charset='utf-8'><title>Dein Profil</title>\n" + STYLE +
            '<h1>Dein Profil</h1>\n'
            f"<p>Deine Kennung: {h(visitor or 'keine')}</p>\n"
            f"<p>Dein Browser: {h(headers.get('user-agent'))}<br>Deine Sprache: {h(headers.get('accept-language'))}</p>\n"
            f'<h2>Seiten, auf denen du warst</h2>\n<ol>\n{pages}\n</ol>\n'
            f'<h2>Was dich vermutlich interessiert</h2>\n<ol>\n{interests}\n</ol>\n')

und vor else der Pfad:

            respond(client, '200 OK', 'image/gif', PIXEL, extra)        elif path == '/profil':            visitor = parse_cookies(headers.get('cookie', '')).get('visitor')            lines = []            if os.path.exists(LOG):                with open(LOG) as f:                    lines = f.read().splitlines()            visits = visits_of(lines, visitor)            counts = count_keywords([keywords for page, keywords in visits])            respond(client, '200 OK', 'text/html; charset=utf-8', profile_page(visitor, visits, counts, headers))        else: