İçerik Güvenliği Politikası (CSP) Rehberi

İçerik Güvenliği Politikası (CSP), modern web güvenliğinin temel taşıdır. Tarayıcıya hangi kaynakların yüklenebileceğini ve çalıştırılabileceğini söyleyen bir HTTP başlığıdır. CSP, siteniz için bir güvenlik duvarı görevi görür ve Cross-Site Scripting (XSS), clickjacking ve diğer kod enjeksiyon saldırılarının neden olduğu hasarı önler veya azaltır. CSP'nin düzgün yapılandırılması, hassas kullanıcı verileri veya finansal işlemlerle ilgilenen her site için kritik öneme sahiptir.

CSP Nedir?

CSP olmadan, bir saldırgan sitenize kötü amaçlı bir script enjekte ederse, tarayıcı bu scripti meşru site kodunuzdan ayırt edemez. CSP, bir güvenilir kaynaklar beyaz listesi tanımlar — bu listede olmayan her şey engellenir. Bu, bir saldırganın sayfanıza kötü amaçlı bir script etiketi eklemeyi başarsa bile, tarayıcının bunu yürütmeyi reddedeceği anlamına gelir.

CSP, HTTP yanıt başlığı aracılığıyla sunulur. Tarayıcı sayfayı render ederken, CSP başlığını okur ve her kaynak isteğini (script'ler, stil sayfaları, görseller, yazı tipleri vb.) politika ile karşılaştırır. Politika ile eşleşmeyen herhangi bir kaynak engellenir ve bir raporlama uç noktası yapılandırılmışsa ihlal raporu gönderilir.

Temel CSP Direktifleri

default-src, diğer fetch direktifleri için geri dönüş işlevi görür. Diğer direktiflerden herhangi biri yoksa, default-src tarafından belirtilen kaynaklar kullanılır. Çoğu politika, daha spesifik direktiflerle gerektiğinde geçersiz kılınan katı bir default-src ile başlar.

CSP Neden Önemlidir?

script-src, JavaScript'in hangi kaynaklardan yüklenip çalıştırılabileceğini kontrol eder. Bu, XSS saldırılarını önlemek için en kritik direktiftir. Katı bir script-src, CSP'nin koruma mekanizmasının kalbidir. Modern en iyi uygulama, inline script'leri ve eval() kullanımını engelleyen nonce tabanlı veya hash tabanlı bir yaklaşım kullanmaktır.

CSP Nasıl Çalışır?

style-src, CSS stil sayfalarının ve inline stillerin hangi kaynaklardan yüklenebileceğini kontrol eder. Script'lerden daha az tehlikeli olsa da, kötü amaçlı CSS veri sızdırma ve sayfa düzenini manipüle etmek için kullanılabilir. Çoğu site, kendi kaynaklarından stil sayfalarına ve güvenilir CDN'lerden yazı tiplerine izin verir.

default-src

img-src, görsellerin hangi kaynaklardan yüklenebileceğini kontrol eder. Görseller XSS'e neden olamazken, kullanıcı aktivitesini izlemek, kullanıcıları parmak izi ile tanımlamak veya diğer bilgi toplama saldırılarını gerçekleştirmek için kullanılabilir. Çoğu site, kendi alanından ve güvenilir CDN'lerden gelen görsellere izin verir.

CSP Kaynak Değerleri

connect-src, fetch(), XMLHttpRequest, WebSocket ve EventSource aracılığıyla yapılan ağ isteklerini kontrol eder. Bu, API çağrılarınızın hangi arka uç hizmetlere bağlanabileceğini kısıtlamak için önemlidir. Uygulamanızın yapması gereken uç noktaları belirtin ve geri kalan her şeyi engelleyin.

script-src

Direktif	Kontrol Ettiği Kaynak	Örnek Değer
default-src	Tüm kaynak türleri için geri dönüş	'self'
default-src 'self'	Tüm kaynakları aynı origin ile sınırlar	Diğer direktiflerle geçersiz kılınan temel politika
script-src	JavaScript	'self' https://cdn.example.com
script-src 'self' https://cdn.example.com	Kendi kaynağından ve belirtilen CDN'den script'lere izin verir	XSS saldırılarını önler
style-src	CSS	'self' 'unsafe-inline'
style-src 'self' 'unsafe-inline'	Kendi kaynağından ve inline stillerden CSS'e izin verir	Stil sayfası yüklemesini kontrol eder
img-src	Görseller	'self' data: https:
img-src 'self' data: https:	Kendi kaynağından, data URL'lerden ve HTTPS'ten görsellere izin verir	Görsel yüklemesini kontrol eder
connect-src	Fetch/XHR/WebSocket	'self' https://api.example.com

style-src

Değer	Anlamı	Kullanım Örneği
connect-src 'self' https://api.example.com	Kendi kaynağına ve API uç noktasına bağlantılara izin verir	API isteklerini kısıtlar
font-src	Yazı Tipleri	'self' https://fonts.googleapis.com
font-src 'self' https://fonts.googleapis.com	Kendi kaynağından ve Google Fonts'tan yazı tiplerine izin verir	Web yazı tipi yüklemesini kontrol eder
frame-src	iframe'ler	'self' https://www.youtube.com

img-src

Directive	Controls	Example
frame-src 'self' https://www.youtube.com	Kendi kaynağından ve YouTube'dan iframe'lere izin verir	Gömülü içeriği kontrol eder
media-src	Ses/Video	'self'

CSP Oluşturma

<audio><video><object><embed><applet> için kaynakları kontrol eder.</p><table><thead><tr><th data-i18n-html="blog.content-security-policy-guide.74"> Source Value </th><th data-i18n-html="blog.content-security-policy-guide.75"> Meaning </th> </tr> </thead><tbody><tr><td data-i18n-html="blog.content-security-policy-guide.76">media-src 'self'</td><td data-i18n-html="blog.content-security-policy-guide.77">Yalnızca kendi kaynağından medyaya izin verir</td> </tr><tr><td data-i18n-html="blog.content-security-policy-guide.78">Medya yüklemesini kontrol eder</td><td data-i18n-html="blog.content-security-policy-guide.79">object-src</td> </tr><tr><td data-i18n-html="blog.content-security-policy-guide.80">Eklentiler</td><td data-i18n-html="blog.content-security-policy-guide.81">'none'</td> </tr><tr><td data-i18n-html="blog.content-security-policy-guide.82">object-src 'none'</td><td data-i18n-html="blog.content-security-policy-guide.83">Tüm eklentileri engeller</td> </tr><tr><td data-i18n-html="blog.content-security-policy-guide.84">Flash/Java'yı engeller (her zaman 'none' kullanın)</td><td data-i18n-html="blog.content-security-policy-guide.85">base-uri</td> </tr><tr><td data-i18n-html="blog.content-security-policy-guide.86">Belge taban URL'si</td><td data-i18n-html="blog.content-security-policy-guide.87">'self'</td> </tr><tr><td data-i18n-html="blog.content-security-policy-guide.88">base-uri 'self'</td><td data-i18n-html="blog.content-security-policy-guide.89">Yalnızca aynı origin'den base etiketlerine izin verir</td> </tr><tr><td data-i18n-html="blog.content-security-policy-guide.90">Base etiketi enjeksiyon saldırılarını önler</td><td data-i18n-html="blog.content-security-policy-guide.91">form-action</td> </tr><tr><td data-i18n-html="blog.content-security-policy-guide.92">Form gönderimleri</td><td data-i18n-html="blog.content-security-policy-guide.93">'self'</td> </tr><tr><td data-i18n-html="blog.content-security-policy-guide.94">form-action 'self'</td><td data-i18n-html="blog.content-security-policy-guide.95">Formları yalnızca aynı origin'e göndermeye kısıtlar</td> </tr> </tbody> </table><h2 data-i18n-html="blog.content-security-policy-guide.96">CSP Test ve Hata Ayıklama</h2><p data-i18n-html="blog.content-security-policy-guide.97"><base> öğesinde görünebilecek URL'leri kısıtlar. Bu, göreceli URL'leri yeniden yönlendirmek için base etiketini enjekte eden saldırıları önler. form-action, form gönderimleri için geçerli hedefleri kısıtlar. Bu, form verilerini saldırganın kontrolündeki bir uç noktaya gönderen form action enjeksiyon saldırılarını önler.</p><h3 data-i18n-html="blog.content-security-policy-guide.98">connect-src</h3><p data-i18n-html="blog.content-security-policy-guide.99">upgrade-insecure-requests, tarayıcıya tüm HTTP isteklerini HTTPS olarak yeniden yazmasını söyler. Bu, HTTP sayfalarındaki karışık içerik uyarılarını ortadan kaldırmanın ve tüm kaynakların güvenli bir şekilde yüklenmesini sağlamanın basit bir yoludur. block-all-mixed-content, HTTPS sayfalarında HTTP kaynaklarının yüklenmesini engeller.</p><pre><code>Content-Security-Policy-Report-Only: default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'; report-uri /csp-report</code></pre><h3 data-i18n-html="blog.content-security-policy-guide.100">font-src</h3><p data-i18n-html="blog.content-security-policy-guide.101">'none' hiçbir kaynağa izin vermez — en katı değerdir. 'self' aynı origin'den (şema, ana bilgisayar ve port) gelen kaynaklara izin verir. 'unsafe-inline' satır içi script'lere ve stillere izin verir — adından da anlaşılacağı gibi, bu güvensizdir ve XSS korumasını önemli ölçüde azaltır. 'unsafe-eval' eval() ve benzeri yöntemlere izin verir. 'unsafe-inline' ve 'unsafe-eval' kullanmaktan kaçının.</p><pre><code>{ "csp-report": { "document-uri": "https://example.com/page", "violated-directive": "script-src 'self'", "blocked-uri": "https://cdn.analytics.com/tracker.js", "line-number": 42 } }</code></pre><h3 data-i18n-html="blog.content-security-policy-guide.102">frame-src ve child-src</h3><p data-i18n-html="blog.content-security-policy-guide.103">'strict-dynamic' kaynak değeri, güveni yetkili bir script tarafından yüklenen script'lere genişletir. Bu, geçerli bir nonce'a sahip ana uygulama script'iniz ek script'leri dinamik olarak yüklerse, bu script'lerin kaynaklarını politikanızda listelemenize gerek kalmadan otomatik olarak güvenilir hale geldiği anlamına gelir. Bu, modern uygulamalar için önerilen yaklaşımdır ve nonce tabanlı politikalarla birlikte kullanılır.</p><pre><code>Content-Security-Policy-Report-Only: default-src 'none'; script-src 'self' cdn.analytics.com cdn.example.com; style-src 'self' fonts.googleapis.com; img-src 'self' data: cdn.example.com; font-src 'self' fonts.gstatic.com; connect-src 'self' api.example.com; frame-src www.youtube-nocookie.com; report-uri /csp-report</code></pre><h3 data-i18n-html="blog.content-security-policy-guide.104">media-src ve object-src</h3><p data-i18n-html="blog.content-security-policy-guide.105">nonce-* (number used once), her sayfa yüklemesinde değişen rastgele bir değerdir. Script etiketiniz geçerli nonce'ı içeriyorsa, yürütülmesine izin verilir. sha256-* (hash), bir script veya stil sayfasının SHA-256 hash'idir. Hash, politika hash'i ile eşleşen inline içeriklerin çalışmasına izin verir. Hash'ler statik içerik için kullanışlıdır, nonce'lar ise dinamik içerik için daha iyidir.</p><h2 data-i18n-html="blog.content-security-policy-guide.106">CSP Raporlaması</h2><div class="ad-slot" data-ad-slot="blog-mid"></div><p data-i18n-html="blog.content-security-policy-guide.107">https://, tüm HTTPS kaynaklarını belirli bir origin'den alır. data:, data: URL'lerine izin verir (örn. data:image/svg+xml). Görseller için kullanışlıdır ancak script'ler için data: kullanmaktan kaçının çünkü bu, XSS için bir vektör oluşturur.</p><pre><code>// Server generates a random nonce per request const nonce = crypto.randomUUID(); // CSP header includes the nonce Content-Security-Policy: default-src 'none'; script-src 'nonce-{random-nonce}' 'strict-dynamic'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'; // HTML includes the same nonce on script tags <script nonce="{random-nonce}"> // This script is allowed because its nonce matches console.log('Hello from authorized script'); </script></code></pre><p data-i18n-html="blog.content-security-policy-guide.108">Yalnızca raporlama modu, politikayı uygulamak yerine raporlamak için Content-Security-Policy-Report-Only başlığını kullanır. Bu, gerçek kullanıcıları etkilemeden politikanızı test etmenin en güvenli yoludur. Mevcut sitenize yeni bir CSP uygularken her zaman yalnızca raporlama moduyla başlayın.</p><h2 data-i18n-html="blog.content-security-policy-guide.109">Yaygın CSP Hataları</h2><p data-i18n-html="blog.content-security-policy-guide.110">ToolHub CSP Oluşturucu, görsel bir arayüz kullanarak CSP başlıkları oluşturmanıza olanak tanır. Politikaları test etmek için CSP Evaluator (Google tarafından) kullanın. CSP'yi test ederken tarayıcı geliştirici araçları konsolunda ihlal mesajlarını izleyin.</p><h3 data-i18n-html="blog.content-security-policy-guide.111">base-uri</h3><p data-i18n-html="blog.content-security-policy-guide.112"><meta> etiketi olarak sunabilirsiniz. HTTP başlık yaklaşımı tercih edilir çünkü tüm içerik türlerinde çalışır ve meta etiketinden daha erken işlenir. Nginx, Apache veya uygulama çerçeveniz aracılığıyla yapılandırın.</p><h3 data-i18n-html="blog.content-security-policy-guide.113">form-action</h3><p data-i18n-html="blog.content-security-policy-guide.114">report-uri, ihlal raporlarının POST edileceği bir URL belirtir. Bu, daha yeni Reporting API tarafından değiştirilmektedir. report-to, ihlal raporlaması için Reporting API'yi kullanır. Bu daha yeni yaklaşım, rapor formatı ve teslimatı üzerinde daha fazla kontrol sağlar.</p><h3 data-i18n-html="blog.content-security-policy-guide.115">upgrade-insecure-requests</h3><p data-i18n-html="blog.content-security-policy-guide.116">CSP ihlal raporlarını almak için bir uç nokta ayarlayın. Raporlar, engellenen kaynağın URL'sini, ihlal edilen direktifi ve sayfa URL'sini içeren JSON nesneleri olarak gönderilir. Bu raporları politikanızdaki sorunları belirlemek ve potansiyel saldırı girişimlerini tespit etmek için kullanın.</p><h3 data-i18n-html="blog.content-security-policy-guide.117">block-all-mixed-content</h3><p data-i18n-html="blog.content-security-policy-guide.118">Inline script'lere izin vermek, CSP'nin XSS'e karşı sağladığı korumanın çoğunu ortadan kaldırır. Bunun yerine, tüm JavaScript'i harici dosyalara taşıyın ve CSP'nizde güvenilir kaynakları belirtin. Inline script'ler kesinlikle gerekliyse, nonce veya hash kullanın — asla 'unsafe-inline' kullanmayın.</p><h3 data-i18n-html="blog.content-security-policy-guide.119">'none'</h3><p data-i18n-html="blog.content-security-policy-guide.120">Üçüncü taraf kaynakları (analitik, reklamlar, CDN'ler), politikanızda açıkça izin verilmelidir. Yalnızca ihtiyacınız olan belirli kaynakları listeleyin, joker karakterlerden kaçının. Hangi kaynakların gerekli olduğunu belirlemek için CSP Evaluator ve Raporlama URI gibi araçları kullanın.</p><h2 data-i18n-html="blog.content-security-policy-guide.121">CSP ve Diğer Güvenlik Başlıkları</h2><p data-i18n-html="blog.content-security-policy-guide.122">Karışık içerik, HTTPS sayfalarının HTTP kaynaklarını yüklemesi durumunda ortaya çıkar. CSP, yükseltme veya engelleme yoluyla karışık içeriği kontrol etmek için upgrade-insecure-requests ve block-all-mixed-content direktiflerini sağlar. Modern siteler, kullanıcı güvenini ve SEO sıralamasını korumak için tüm HTTP kaynaklarını engellemelidir.</p><h3 data-i18n-html="blog.content-security-policy-guide.123">'self'</h3><p data-i18n-html="blog.content-security-policy-guide.124">CSP ve reklamlar, reklam ağlarının script'leri ve izleme piksellerini dinamik olarak yüklemesi gerektiğinden tarihsel olarak çatışma yaşamıştır. Reklamlar için CSP'yi yapılandırırken, reklam sağlayıcılarınız tarafından kullanılan belirli alanları belirlemek için raporlama modunu kullanın, ardından yalnızca bu alanları beyaz listeye ekleyin.</p><h3 data-i18n-html="blog.content-security-policy-guide.125">'unsafe-inline'</h3><p data-i18n-html="blog.content-security-policy-guide.126">X-Frame-Options, sayfanızın bir iframe içinde gömülüp gömülemeyeceğini kontrol eder. CSP'nin frame-ancestors direktifi, aynı işlevi daha fazla esneklikle sağlar. X-Content-Type-Options, MIME tipi koklamayı engeller. Referrer-Policy, Referer başlığında ne kadar bilgi gönderileceğini kontrol eder. Permissions-Policy, kamera ve mikrofon gibi tarayıcı özelliklerine erişimi kontrol eder. HSTS, HTTPS bağlantılarını zorunlu kılar.</p><h2 data-i18n-html="blog.content-security-policy-guide.127">Sıkça Sorulan Sorular</h2><p data-i18n-html="blog.content-security-policy-guide.128">CSP olmadan, siteniz XSS saldırılarına, veri enjeksiyonuna ve clickjacking'e karşı savunmasızdır. Tarayıcı varsayılan olarak tüm script'leri ve kaynakları yürütür, bu nedenle bir saldırganın kötü amaçlı kod enjekte etmesi durumunda tarayıcı bunu engellemez. CSP, bu varsayılan davranışı kısıtlayan ek bir güvenlik katmanı sağlar.</p><ul><li data-i18n-html="blog.content-security-policy-guide.129">Veri enjeksiyon saldırılarını (XSS, clickjacking) önler</li><li data-i18n-html="blog.content-security-policy-guide.130">Karma içerik sorunlarını belirlemenize ve düzeltmenize yardımcı olur</li><li data-i18n-html="blog.content-security-policy-guide.131">Güvenlik ihlali tespiti için raporlama sağlar</li><li data-i18n-html="blog.content-security-policy-guide.132">PCI DSS ve diğer uyumluluk standartlarını karşılamak için gereklidir</li><li data-i18n-html="blog.content-security-policy-guide.133">Modern web uygulamaları için derinlemesine savunma stratejisinin bir parçasıdır</li> </ul><h2 data-i18n-html="blog.content-security-policy-guide.134"> Deploying CSP </h2><p data-i18n-html="blog.content-security-policy-guide.135">CSP, SEO'yu doğrudan etkilemez çünkü arama motoru botları genellikle CSP'yi uygulamaz. Ancak, CSP ile sağlanan güvenlik iyileştirmeleri dolaylı olarak SEO'ya fayda sağlar — Google, güvenli siteleri (HTTPS, güvenlik başlıkları) sıralama sinyali olarak kullanır. Ayrıca, CSP tarafından engellenen karışık içerik uyarıları, kullanıcı deneyimini ve hemen çıkma oranını etkileyebilir.</p><h3 data-i18n-html="blog.content-security-policy-guide.136">'unsafe-eval'</h3><pre><code>// Apache (.htaccess) Header set Content-Security-Policy "default-src 'self'; script-src 'self' cdn.example.com" // Nginx add_header Content-Security-Policy "default-src 'self'; script-src 'self' cdn.example.com"; // Express.js (Node) app.use((req, res, next) => { res.setHeader( 'Content-Security-Policy', "default-src 'self'; script-src 'self' cdn.example.com" ); next(); });</code></pre><h3 data-i18n-html="blog.content-security-policy-guide.137">'strict-dynamic'</h3><pre><code><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' cdn.example.com"></code></pre><div class="highlight">Profesyonel İpucu: Her zaman yalnızca raporlama moduyla (Content-Security-Policy-Report-Only) başlayın. Politikanızı gerçek trafikle test edin, ihlal raporlarını izleyin ve yalnızca tüm meşru kaynakların izin verildiğinden emin olduğunuzda uygulamaya geçin.</div><div class="cta-box"><p data-i18n-html="blog.content-security-policy-guide.138">Yalnızca raporlama moduyla başlayın ve ihlal raporlarını izleyin. Meşru kaynakların engellenmediğini doğruladıktan sonra, uygulama moduna geçin. Tarayıcı konsolunda CSP ihlal mesajlarını kontrol edin. Bu, politikanızı gerçek sitenizde test etmenin en güvenli yaklaşımıdır.</p><a href="https://tool-hub.cc/tools/csp-generator/" class="cta-btn" >CSP Oluşturucu</a > </div><div class="faq-section"><h2 data-i18n-html="blog.content-security-policy-guide.139"> Frequently Asked Questions </h2><div class="faq-item"><h3 data-i18n-html="blog.content-security-policy-guide.140">nonce-*</h3><p data-i18n-html="blog.content-security-policy-guide.141">Nonce, her sayfa yüklemesinde değişen rastgele bir değerdir ve HTML'deki script etiketine ve CSP başlığına eklenir. Hash, bir script'in içeriğinin kriptografik hash'idir ve CSP başlığına dahil edilir. Nonce'lar dinamik olarak oluşturulan içerik için daha iyidir, hash'ler ise statik içerik için daha uygundur.</p> </div><div class="faq-item"><h3 data-i18n-html="blog.content-security-policy-guide.142">sha256-*</h3><p data-i18n-html="blog.content-security-policy-guide.143">CSP, XSS saldırılarının riskini önemli ölçüde azaltır ancak özellikle DOM tabanlı XSS olmak üzere tüm XSS saldırılarını durdurmaz. CSP, derinlemesine savunma stratejisinin bir parçası olarak kullanılmalıdır; giriş doğrulama, çıkış kodlama ve diğer güvenlik en iyi uygulamalarıyla birlikte.</p> </div><div class="faq-item"><h3 data-i18n-html="blog.content-security-policy-guide.144">https://</h3><p data-i18n-html="blog.content-security-policy-guide.145"> No. CSP is a defense-in-depth layer, not a replacement for input validation and output encoding. You should still sanitize all user input, escape output, and follow secure coding practices. CSP provides an additional safety net that limits the damage if an XSS vulnerability is discovered, but it should not be your only line of defense. </p> </div><div class="faq-item"><h3 data-i18n-html="blog.content-security-policy-guide.146">data:</h3><p data-i18n-html="blog.content-security-policy-guide.147"> Use Content-Security-Policy-Report-Only to test your policy without breaking your site. Configure a report-uri endpoint to collect violation reports. Monitor the reports for a sufficient period (days or weeks) to identify all legitimate resources. Fix any violations by adding the necessary sources to your policy. Once no legitimate violations appear, switch to the enforcement header. </p> </div><div class="faq-item"><h3 data-i18n-html="blog.content-security-policy-guide.148">Yalnızca Raporlama Modu</h3><p data-i18n-html="blog.content-security-policy-guide.149"> Yes, a misconfigured CSP can block legitimate resources, causing broken functionality, missing images, failed API calls, and non-working scripts. This is why you should always test with report-only mode first and gradually tighten your policy. Using 'unsafe-inline' or 'unsafe-eval' weakens protection but may be necessary for legacy applications. </p> </div> </div><div class="ad-slot" data-ad-slot="blog-end"></div> </article><footer class="footer"><div class="footer-links"><a href="https://tool-hub.cc/tr/" data-i18n="footer.home">Ana Sayfa</a><a href="https://tool-hub.cc/tr/blog/" data-i18n="nav.blog">Blog</a><a data-i18n='nav.about' href='https://tool-hub.cc/about'>Hakkında</a ><a href='https://tool-hub.cc/json-tools'>JSON Tools</a><a href='https://tool-hub.cc/seo-tools'>SEO Tools</a><a href='https://tool-hub.cc/calculators'>Calculators</a><a href='https://tool-hub.cc/image-tools'>Image Tools</a><a href='https://tool-hub.cc/text-tools'>Text Tools</a><a href='https://tool-hub.cc/encoding-tools'>Encoding Tools</a><a href='https://tool-hub.cc/css-tools'>CSS Tools</a> </div><div class="footer-copy"><span data-i18n="footer.copyright" >© ToolHub Tüm hakları saklıdır.</span > </div> </footer> </div> <script src="../../assets/theme.js" defer></script> <script src="../../assets/clicks.js" defer></script> <script>(function(){var b=document.getElementById("static-lang-btn"),m=document.getElementById("static-lang-menu");if(!b||!m)return;b.addEventListener("click",function(e){e.stopPropagation();var open=m.classList.toggle("open");b.setAttribute("aria-expanded",open?"true":"false");});document.addEventListener("click",function(){m.classList.remove("open");b.setAttribute("aria-expanded","false");});})();</script> </body> </html>