fix(redirection): redirige HTTP vers HTTPS via .htaccess

- Ajoute les règles mod_rewrite pour forcer HTTPS - Gère les reverse proxies via X-Forwarded-Proto - Exclut le chemin Let's Encrypt .well-known/acme-challenge
security(headers): ajoute les en-têtes HTTP de sécurité et refactorise les scripts inline pour CSP
2026-07-07 23:59:52 +04:00 · 2026-07-07 23:56:56 +04:00
9 changed files with 98 additions and 43 deletions
@@ -20,6 +20,9 @@ module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/robots.txt");
  eleventyConfig.addPassthroughCopy("src/sitemap.xml");

+  // Copy Apache security headers config to the site root
+  eleventyConfig.addPassthroughCopy({ "src/.htaccess": ".htaccess" });
+
  // Watch CSS files for changes
  eleventyConfig.addWatchTarget("src/assets/css/");

@@ -0,0 +1,28 @@
+<IfModule mod_rewrite.c>
+    RewriteEngine On
+    # Redirect HTTP to HTTPS, including behind reverse proxies
+    RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/
+    RewriteCond %{HTTPS} off
+    RewriteCond %{HTTP:X-Forwarded-Proto} !https
+    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
+</IfModule>
+
+<IfModule mod_headers.c>
+    # Force HTTPS for one year
+    Header always set Strict-Transport-Security "max-age=31536000"
+
+    # Prevent MIME sniffing
+    Header always set X-Content-Type-Options "nosniff"
+
+    # Prevent clickjacking (also enforced via CSP frame-ancestors)
+    Header always set X-Frame-Options "DENY"
+
+    # Control referrer leakage
+    Header always set Referrer-Policy "strict-origin-when-cross-origin"
+
+    # Restrict browser features
+    Header always set Permissions-Policy "geolocation=(), microphone=(), camera=(), payment=(), usb=(), magnetometer=(), gyroscope=()"
+
+    # Content Security Policy (no unsafe-inline/unsafe-eval in script-src)
+    Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' https://organisationka.b-cdn.net; font-src 'self' https://fonts.gstatic.com; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; object-src 'none'"
+</IfModule>
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ locale }}">
+<html lang="{{ locale }}" data-locale="{{ locale }}">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -100,43 +100,8 @@
    }
    </script>

-    <script>
-        (function() {
-            // Récupérer le thème stocké ou détecter le thème système
-            const storedTheme = localStorage.getItem('oki-theme');
-            const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-            let theme = storedTheme;
-
-            // Si pas de préférence stockée, utiliser le thème système
-            if (!storedTheme) {
-                theme = systemPrefersDark ? 'dark' : 'light';
-            }
-
-            // Appliquer le thème immédiatement
-            if (theme === 'light') {
-                document.documentElement.classList.add('light-theme');
-            }
-        })();
-    </script>
-
-    <script>
-        (function() {
-            // Redirection automatique selon la langue du navigateur, sauf choix explicite déjà mémorisé
-            var pref = localStorage.getItem('oki-lang-pref');
-            if (pref) return;
-
-            var browserLang = (navigator.language || navigator.userLanguage || '').toLowerCase();
-            var wantsEnglish = browserLang.indexOf('en') === 0;
-            var currentLocale = '{{ locale }}';
-
-            if (wantsEnglish && currentLocale !== 'en') {
-                window.location.replace('/en/' + window.location.hash);
-            } else if (!wantsEnglish && currentLocale === 'en') {
-                window.location.replace('/' + window.location.hash);
-            }
-        })();
-    </script>
+    <script src="/assets/js/theme.js"></script>
+    <script src="/assets/js/lang-redirect.js"></script>
 </head>
 <body>
    {% include "partials/nav.njk" %}
@@ -8,7 +8,7 @@
        <div class="faq-container">
            {% for item in t.faq.items %}
            <div class="faq-item">
-                <button class="faq-question" onclick="this.parentElement.classList.toggle('active')">
+                <button class="faq-question">
                    <span>{{ item.question }}</span>
                    <span class="faq-icon">+</span>
                </button>
@@ -31,9 +31,9 @@
            {% endfor %}
        </ul>
        {% if locale == 'en' %}
-        <a href="#" class="lang-switch" onclick="localStorage.setItem('oki-lang-pref','fr'); switchLanguage('fr'); return false;">{{ t.ui.lang_switch_label }}</a>
+        <a href="#" class="lang-switch" data-lang="fr">{{ t.ui.lang_switch_label }}</a>
        {% else %}
-        <a href="#" class="lang-switch" onclick="localStorage.setItem('oki-lang-pref','en'); switchLanguage('en'); return false;">{{ t.ui.lang_switch_label }}</a>
+        <a href="#" class="lang-switch" data-lang="en">{{ t.ui.lang_switch_label }}</a>
        {% endif %}
        <button id="theme-toggle" class="theme-toggle" aria-label="{{ t.ui.theme_toggle }}" title="{{ t.ui.theme_toggle }}">
            <span class="theme-icon theme-icon-dark">🌙</span>
@@ -26,7 +26,7 @@
                    <div class="custom-donation-form">
                        <input type="number" id="customAmountOneTime" placeholder="{{ t.support.custom_amount_placeholder }}" min="1" class="custom-amount-input">
                        <span class="currency-symbol">{{ t.support.one_time_suffix }}</span>
-                        <button onclick="handleCustomDonation('oneTime')" class="custom-donation-btn custom-donation-btn-primary">
+                        <button data-donation-type="oneTime" class="custom-donation-btn custom-donation-btn-primary">
                            {{ t.support.custom_amount_btn }}
                        </button>
                    </div>
@@ -49,7 +49,7 @@
                    <div class="custom-donation-form">
                        <input type="number" id="customAmountMonthly" placeholder="{{ t.support.custom_amount_placeholder }}" min="1" class="custom-amount-input custom-amount-input-monthly">
                        <span class="currency-symbol">{{ t.support.monthly_suffix }}</span>
-                        <button onclick="handleCustomDonation('monthly')" class="custom-donation-btn custom-donation-btn-secondary">
+                        <button data-donation-type="monthly" class="custom-donation-btn custom-donation-btn-secondary">
                            {{ t.support.custom_monthly_btn }}
                        </button>
                    </div>
@@ -0,0 +1,15 @@
+(function() {
+    // Redirection automatique selon la langue du navigateur, sauf choix explicite déjà mémorisé
+    var pref = localStorage.getItem('oki-lang-pref');
+    if (pref) return;
+
+    var browserLang = (navigator.language || navigator.userLanguage || '').toLowerCase();
+    var wantsEnglish = browserLang.indexOf('en') === 0;
+    var currentLocale = document.documentElement.dataset.locale || 'fr';
+
+    if (wantsEnglish && currentLocale !== 'en') {
+        window.location.replace('/en/' + window.location.hash);
+    } else if (!wantsEnglish && currentLocale === 'en') {
+        window.location.replace('/' + window.location.hash);
+    }
+})();
@@ -67,6 +67,18 @@

    // Ajouter l'événement au bouton
    themeToggle?.addEventListener('click', toggleTheme);
+
+    // Language switcher links
+    document.querySelectorAll('.lang-switch').forEach(function(link) {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            var lang = this.dataset.lang;
+            if (lang) {
+                localStorage.setItem('oki-lang-pref', lang);
+                switchLanguage(lang);
+            }
+        });
+    });
 })();

 // Language switch with page mapping
@@ -377,3 +389,18 @@ function handleCustomDonation(type) {

    window.location.href = stripeUrl;
 }
+
+// FAQ accordion toggle
+document.querySelectorAll('.faq-question').forEach(button => {
+    button.addEventListener('click', () => {
+        button.parentElement.classList.toggle('active');
+    });
+});
+
+// Custom donation buttons
+document.querySelectorAll('.custom-donation-btn').forEach(button => {
+    button.addEventListener('click', () => {
+        const type = button.dataset.donationType;
+        if (type) handleCustomDonation(type);
+    });
+});
@@ -0,0 +1,17 @@
+(function() {
+    // Récupérer le thème stocké ou détecter le thème système
+    const storedTheme = localStorage.getItem('oki-theme');
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    let theme = storedTheme;
+
+    // Si pas de préférence stockée, utiliser le thème système
+    if (!storedTheme) {
+        theme = systemPrefersDark ? 'dark' : 'light';
+    }
+
+    // Appliquer le thème immédiatement
+    if (theme === 'light') {
+        document.documentElement.classList.add('light-theme');
+    }
+})();