Den kompletta guiden till webbsäkerhet: CORS, CSP och HSTS

1. CORS (Cross-Origin Resource Sharing): Säkra dina API:er

För att förstå CORS måste du först förstå Same-Origin Policy (SOP). Som standard begränsar webbläsare webbsidor från att göra förfrågningar till en annan domän (ursprung) än den som levererade webbsidan. Till exempel kan ett skript på https://myblog.com inte godtyckligt hämta privat data från https://api.mybank.com. Detta är en kritisk inbyggd försvarsmekanism.

Moderna globala applikationer är dock kraftigt decentraliserade. Din frontend kan vara hostad på Vercel, ditt API på AWS och dina bilder på Cloudflare. CORS är protokollet som låter dig säkert kringgå SOP. Det använder specialiserade HTTP-headers för att tala om för webbläsaren: “Det är okej för denna specifika externa domän att komma åt mina resurser.”

• Preflight-förfrågan: För komplexa förfrågningar (som att skicka JSON-data via POST eller PUT) skickar webbläsaren först en osynlig OPTIONS-förfrågan (“preflighten”) för att fråga servern om den faktiska förfrågan är tillåten. Om servern godkänner skickas den riktiga förfrågan.
• Det ödesdigra misstaget: Många utvecklare blir frustrerade av CORS-fel och sätter helt enkelt Access-Control-Allow-Origin: * (jokertecknet). Detta är en katastrofal säkerhetssårbarhet, eftersom det tillåter i princip vilken webbplats som helst på internet att fråga ditt API. Ange alltid exakta, betrodda ursprung.

2. CSP (Content Security Policy): Det ultimata skölden mot XSS

Cross-Site Scripting (XSS) är en av de vanligaste och farligaste sårbarheterna på webben. Det inträffar när en hackare lyckas injicera skadlig JavaScript i din sajt (t.ex. genom en sårbar kommentarssektion). När en användare besöker sidan exekveras det skadliga skriptet, vilket stjäl deras sessionskakor eller omdirigerar dem till en nätfiskesajt.

CSP fungerar som en otroligt strikt dörrvakt för din webbsida. Det är en HTTP-header som låter webbplatsadministratörer deklarera en godkänd “vitlista” över dynamiska resurser som får laddas. Om ett skript försöker exekvera men dess ursprung inte finns på vitlistan blockerar webbläsaren det helt enkelt.

3. HSTS (HTTP Strict Transport Security): Att tvinga fram den säkra vägen

Du har installerat ett SSL/TLS-certifikat och din sajt laddas över HTTPS. Du är säker, eller hur? Inte helt. När en användare manuellt skriver in yourdomain.com i sin webbläsare återgår den initiala förfrågan ofta till det okrypterade http://-protokollet. I det ögonblick innan din server omdirigerar dem till https:// kan en hackare på samma öppna Wi-Fi-nätverk utföra en Man-In-The-Middle (MITM) SSL Stripping-attack och avlyssna trafiken.

HSTS eliminerar helt detta sårbarhetsfönster. När en server skickar HSTS-headern utfärdar den ett strikt kommando till webbläsaren: “Under nästa X tidsperiod, försök aldrig, aldrig ladda denna sajt via HTTP. Tvinga HTTPS internt innan förfrågan ens lämnar enheten.” Dessutom kan du skicka in din domän till den globala HSTS Preload List, som är hårdkodad i Chrome, Firefox och Safari, vilket säkerställer att användare ansluter säkert redan vid sitt första besök.

4. Implementation: Serverkonfigurationssnuttar

Att implementera dessa policyer kräver ändringar i din serverkonfiguration. Här är en produktionsklar snutt för Nginx som konfigurerar strikt CORS, en robust CSP, och HSTS med maximal säkerhet.

server {
    listen 443 ssl http2;
    server_name www.yourglobaldomain.com;

    # 1. HSTS-konfiguration
    # Framtvinga HTTPS under 1 år (31536000 sekunder), inkludera subdomäner och tillåt preloading
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

    # 2. CSP (Content Security Policy)-konfiguration
    # Tillåt endast skript från din domän och Google Analytics. Förbjud inline-skript.
    add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://www.google-analytics.com; img-src 'self' data: https:; style-src 'self' 'unsafe-inline';" always;

    # 3. CORS-konfiguration (för ett API-block)
    location /api/ {
        # Använd ALDRIG '*' i produktion. Ange exakta betrodda frontend-domäner.
        add_header 'Access-Control-Allow-Origin' 'https://www.yourfrontend.com' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;

        # Hantera preflight-förfrågningar
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'https://www.yourfrontend.com';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

Slutsats: Säkerhet är SEO

I det moderna webbekosystemet är säkerhet och SEO djupt sammanflätade. Google använder uttryckligen HTTPS som en rankningssignal, och deras algoritmer är mycket känsliga för användarsäkerhetsmått. Genom att korrekt implementera CORS, CSP och HSTS skyddar du inte bara dina användares data—du bygger en motståndskraftig, mycket pålitlig digital tillgång som sökmotorer med förtroende rekommenderar till globala publiker. Granska dina HTTP-headers idag och stäng dörrarna för illvilliga aktörer.

Tags: #WebSecurity #CORS #ContentSecurityPolicy #HSTS #CyberSecurity #GlobalSEO #HTTPS #TechStandards