security(website): refactor inline scripts and click handlers to external files to achieve 100% strict CSP compliance

2026-08-06 09:27:44 +00:00 · 2026-05-18 21:21:38 +02:00
parent 44ee3fab25
commit aa1382b2ad
8 changed files with 99 additions and 102 deletions
@@ -17,7 +17,7 @@ sync.koalastuff.net {
    # Security Headers & Content Security Policy (CSP)
    header {
        # Strict Content Security Policy (restricts scripts and connections to self, forbids frames)
-        Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none';"
+        Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none';"
        # Prevent FLoC tracking
        Permissions-Policy interest-cohort=()
        # Security best practices
@@ -44,7 +44,7 @@ sync.koalastuff.net {
    # Security Headers & Content Security Policy (CSP)
    header {
        # Strict Content Security Policy (restricts scripts and connections to self, forbids frames)
-        Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none';"
+        Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'none';"
        # Prevent FLoC tracking
        Permissions-Policy interest-cohort=()
        # Security best practices
@@ -350,6 +350,61 @@ document.addEventListener('DOMContentLoaded', () => {
        });
    }

+    // Mobile Hamburger Menu Toggle
+    const hamburger = document.querySelector('.hamburger');
+    const navLinks = document.querySelector('.nav-links');
+    if (hamburger && navLinks) {
+        hamburger.addEventListener('click', () => {
+            navLinks.classList.toggle('open');
+        });
+    }
+
+    // Language Selection Umschalter
+    const toggleLanguage = (e) => {
+        if (e) e.preventDefault();
+        const html = document.documentElement;
+        const currentIsEnglish = html.classList.contains('lang-en');
+        const newLang = currentIsEnglish ? 'de' : 'en';
+        html.classList.remove('lang-en', 'lang-de');
+        html.classList.add('lang-' + newLang);
+        html.lang = newLang;
+        localStorage.setItem('koala_lang', newLang);
+        
+        // Update titles dynamically based on page
+        var path = window.location.pathname;
+        var isIndex = path === '/' || path.endsWith('index.html') || path.split('/').pop() === '';
+        var isJoin = path.endsWith('join.html');
+        
+        if (isIndex) {
+            const titles = { 
+                en: 'KoalaSync | Real-time Video Synchronization for Friends', 
+                de: 'KoalaSync | Echtzeit-Video-Synchronisation für Freunde' 
+            };
+            document.title = titles[newLang] || titles.en;
+        } else if (isJoin) {
+            const titles = { 
+                en: 'Join Room | KoalaSync', 
+                de: 'Raum beitreten | KoalaSync' 
+            };
+            document.title = titles[newLang] || titles.en;
+        }
+    };
+
+    document.querySelectorAll('.lang-toggle').forEach(btn => {
+        btn.addEventListener('click', toggleLanguage);
+    });
+
+    // Impressum Email Obfuscation Click Reveal
+    document.querySelectorAll('.email-reveal').forEach(el => {
+        el.addEventListener('click', function() {
+            const user = this.getAttribute('data-user');
+            const domain = this.getAttribute('data-domain');
+            if (user && domain) {
+                this.innerHTML = `${user}@${domain}`;
+            }
+        });
+    });
+
    checkInvite();
    updateDynamicVersion();
 });
@@ -7,26 +7,7 @@
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/png" href="assets/logo.png">
    <meta name="robots" content="noindex">
-    <script>
-        (function() {
-            var savedLang = localStorage.getItem('koala_lang');
-            var browserLang = navigator.language.startsWith('de') ? 'de' : 'en';
-            var activeLang = savedLang || browserLang;
-            document.documentElement.classList.add('lang-' + activeLang);
-            document.documentElement.lang = activeLang;
-        })();
-        
-        function toggleLanguage(e) {
-            if(e) e.preventDefault();
-            var html = document.documentElement;
-            var currentIsEnglish = html.classList.contains('lang-en');
-            var newLang = currentIsEnglish ? 'de' : 'en';
-            html.classList.remove('lang-en', 'lang-de');
-            html.classList.add('lang-' + newLang);
-            html.lang = newLang;
-            localStorage.setItem('koala_lang', newLang);
-        }
-    </script>
+    <script src="lang-init.js"></script>
 </head>
 <body>
    <div class="bg-blobs">
@@ -41,11 +22,11 @@
                <img src="assets/logo.png" alt="KoalaSync Logo">
                <span>KoalaSync</span>
            </a>
-            <button class="hamburger" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Menu">☰</button>
+            <button class="hamburger" aria-label="Menu">☰</button>
            <div class="nav-links">
                <a href="index.html"><span lang="de">Startseite</span><span lang="en">Home</span></a>
-                <a href="https://github.com/shik3i/KoalaSync" target="_blank">GitHub</a>
-                <a class="lang-toggle" onclick="toggleLanguage(event)">🌍 EN/DE</a>
+                <a href="https://github.com/Shik3i/KoalaSync" target="_blank">GitHub</a>
+                <a class="lang-toggle" style="cursor: pointer;">🌐 EN/DE</a>
            </div>
        </div>
    </nav>
@@ -7,26 +7,7 @@
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/png" href="assets/logo.png">
    <meta name="robots" content="noindex">
-    <script>
-        (function() {
-            var savedLang = localStorage.getItem('koala_lang');
-            var browserLang = navigator.language.startsWith('de') ? 'de' : 'en';
-            var activeLang = savedLang || browserLang;
-            document.documentElement.classList.add('lang-' + activeLang);
-            document.documentElement.lang = activeLang;
-        })();
-        
-        function toggleLanguage(e) {
-            if(e) e.preventDefault();
-            var html = document.documentElement;
-            var currentIsEnglish = html.classList.contains('lang-en');
-            var newLang = currentIsEnglish ? 'de' : 'en';
-            html.classList.remove('lang-en', 'lang-de');
-            html.classList.add('lang-' + newLang);
-            html.lang = newLang;
-            localStorage.setItem('koala_lang', newLang);
-        }
-    </script>
+    <script src="lang-init.js"></script>
 </head>
 <body>
    <div class="bg-blobs">
@@ -41,11 +22,11 @@
                <img src="assets/logo.png" alt="KoalaSync Logo">
                <span>KoalaSync</span>
            </a>
-            <button class="hamburger" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Menu">☰</button>
+            <button class="hamburger" aria-label="Menu">☰</button>
            <div class="nav-links">
                <a href="index.html"><span lang="de">Startseite</span><span lang="en">Home</span></a>
-                <a href="https://github.com/shik3i/KoalaSync" target="_blank">GitHub</a>
-                <a class="lang-toggle" onclick="toggleLanguage(event)">🌍 EN/DE</a>
+                <a href="https://github.com/Shik3i/KoalaSync" target="_blank">GitHub</a>
+                <a class="lang-toggle" style="cursor: pointer;">🌐 EN/DE</a>
            </div>
        </div>
    </nav>
@@ -68,8 +49,8 @@
                </h2>
                <p lang="de">Administrator KoalaSync (Privatperson)</p>
                <p lang="en">Administrator KoalaSync (Private Individual)</p>
-                <p lang="de">E-Mail: <span style="color: var(--accent); cursor: pointer; text-decoration: underline;" onclick="this.innerHTML='koalasync_admin' + '@' + 'koalamail.rocks'">[E-Mail anzeigen]</span></p>
-                <p lang="en">E-Mail: <span style="color: var(--accent); cursor: pointer; text-decoration: underline;" onclick="this.innerHTML='koalasync_admin' + '@' + 'koalamail.rocks'">[Show Email]</span></p>
+                <p lang="de">E-Mail: <span class="email-reveal" data-user="koalasync_admin" data-domain="koalamail.rocks" style="color: var(--accent); cursor: pointer; text-decoration: underline;">[E-Mail anzeigen]</span></p>
+                <p lang="en">E-Mail: <span class="email-reveal" data-user="koalasync_admin" data-domain="koalamail.rocks" style="color: var(--accent); cursor: pointer; text-decoration: underline;">[Show Email]</span></p>
            </section>

            <section style="opacity: 0.8;">
@@ -13,30 +13,7 @@
    <meta property="og:image" content="https://sync.koalastuff.net/assets/logo.png">
    <meta property="og:type" content="website">

-    <script>
-        (function() {
-            var savedLang = localStorage.getItem('koala_lang');
-            var browserLang = navigator.language.startsWith('de') ? 'de' : 'en';
-            var activeLang = savedLang || browserLang;
-            document.documentElement.classList.add('lang-' + activeLang);
-            document.documentElement.lang = activeLang;
-            var titles = { en: 'KoalaSync | Real-time Video Synchronization for Friends', de: 'KoalaSync | Echtzeit-Video-Synchronisation für Freunde' };
-            document.title = titles[activeLang] || titles.en;
-        })();
-        
-        function toggleLanguage(e) {
-            if(e) e.preventDefault();
-            var html = document.documentElement;
-            var currentIsEnglish = html.classList.contains('lang-en');
-            var newLang = currentIsEnglish ? 'de' : 'en';
-            html.classList.remove('lang-en', 'lang-de');
-            html.classList.add('lang-' + newLang);
-            html.lang = newLang;
-            localStorage.setItem('koala_lang', newLang);
-            var titles = { en: 'KoalaSync | Real-time Video Synchronization for Friends', de: 'KoalaSync | Echtzeit-Video-Synchronisation für Freunde' };
-            document.title = titles[newLang] || titles.en;
-        }
-    </script>
+    <script src="lang-init.js"></script>
 </head>
 <body>

@@ -52,7 +29,7 @@
                <img src="assets/logo.png" alt="KoalaSync Logo">
                <span>KoalaSync</span>
            </div>
-            <button class="hamburger" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Menu">☰</button>
+            <button class="hamburger" aria-label="Menu">☰</button>
            <div class="nav-links">
                <a href="#features"><span lang="en">Features</span><span lang="de">Funktionen</span></a>
                <a href="#how-it-works"><span lang="en">How it works</span><span lang="de">So funktioniert's</span></a>
@@ -60,7 +37,7 @@
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                    GitHub
                </a>
-                <a class="lang-toggle" onclick="toggleLanguage(event)" style="display: inline-flex; align-items: center; gap: 6px;">
+                <a class="lang-toggle" style="display: inline-flex; align-items: center; gap: 6px; cursor: pointer;">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 16px; height: 16px; display: block;"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
                    EN/DE
                </a>
@@ -7,30 +7,7 @@
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/png" href="assets/logo.png">
    <meta name="robots" content="noindex">
-    <script>
-        (function() {
-            var savedLang = localStorage.getItem('koala_lang');
-            var browserLang = navigator.language.startsWith('de') ? 'de' : 'en';
-            var activeLang = savedLang || browserLang;
-            document.documentElement.classList.add('lang-' + activeLang);
-            document.documentElement.lang = activeLang;
-            var titles = { en: 'Join Room | KoalaSync', de: 'Raum beitreten | KoalaSync' };
-            document.title = titles[activeLang] || titles.en;
-        })();
-        
-        function toggleLanguage(e) {
-            if(e) e.preventDefault();
-            var html = document.documentElement;
-            var currentIsEnglish = html.classList.contains('lang-en');
-            var newLang = currentIsEnglish ? 'de' : 'en';
-            html.classList.remove('lang-en', 'lang-de');
-            html.classList.add('lang-' + newLang);
-            html.lang = newLang;
-            localStorage.setItem('koala_lang', newLang);
-            var titles = { en: 'Join Room | KoalaSync', de: 'Raum beitreten | KoalaSync' };
-            document.title = titles[newLang] || titles.en;
-        }
-    </script>
+    <script src="lang-init.js"></script>
 </head>
 <body>
    <div class="bg-blobs">
@@ -45,14 +22,14 @@
                <img src="assets/logo.png" alt="KoalaSync Logo">
                <span>KoalaSync</span>
            </a>
-            <button class="hamburger" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Menu">☰</button>
+            <button class="hamburger" aria-label="Menu">☰</button>
            <div class="nav-links">
                <a href="index.html"><span lang="de">Startseite</span><span lang="en">Home</span></a>
                <a href="https://github.com/shik3i/KoalaSync" target="_blank" style="display: inline-flex; align-items: center; gap: 6px;">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                    GitHub
                </a>
-                <a class="lang-toggle" onclick="toggleLanguage(event)" style="display: inline-flex; align-items: center; gap: 6px;">
+                <a class="lang-toggle" style="display: inline-flex; align-items: center; gap: 6px; cursor: pointer;">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 16px; height: 16px; display: block;"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
                    EN/DE
                </a>
@@ -0,0 +1,26 @@
+(function() {
+    var savedLang = localStorage.getItem('koala_lang');
+    var browserLang = navigator.language.startsWith('de') ? 'de' : 'en';
+    var activeLang = savedLang || browserLang;
+    document.documentElement.classList.add('lang-' + activeLang);
+    document.documentElement.lang = activeLang;
+    
+    // Update titles dynamically based on page
+    var path = window.location.pathname;
+    var isIndex = path === '/' || path.endsWith('index.html') || path.split('/').pop() === '';
+    var isJoin = path.endsWith('join.html');
+    
+    if (isIndex) {
+        var titles = { 
+            en: 'KoalaSync | Real-time Video Synchronization for Friends', 
+            de: 'KoalaSync | Echtzeit-Video-Synchronisation für Freunde' 
+        };
+        document.title = titles[activeLang] || titles.en;
+    } else if (isJoin) {
+        var titles = { 
+            en: 'Join Room | KoalaSync', 
+            de: 'Raum beitreten | KoalaSync' 
+        };
+        document.title = titles[activeLang] || titles.en;
+    }
+})();