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>
+    <script src="/assets/js/theme.js"></script>
-        (function() {
+    <script src="/assets/js/lang-redirect.js"></script>
            // 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>
 </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');
    }
 })();