Content Security Policy (CSP) är en säkerhetsfunktion som hjälper till att förhindra Cross-Site Scripting (XSS) och datainjektionsattacker på din hemsida. CSP ger dig möjlighet att kontrollera vilka källor som får ladda olika typer av innehåll på din webbplats. Genom att begränsa vilka källor som är tillåtna minskar du risken för att skadlig kod injiceras eller körs på din hemsida.
För att implementera CSP på din hemsida med hjälp av en meta-tag följer du dessa steg:
Skapa en CSP-policy: Först måste du skapa en policy som definierar vilka källor som är tillåtna för att ladda innehåll på din webbplats. En policy består av en eller flera direktiv som specificerar vilka källor som är tillåtna för olika typer av innehåll, såsom skript, bilder, stilar och andra resurser. Exempel på direktiv inkluderar ”script-src”, ”img-src” och ”style-src”.Här är ett exempel på en grundläggande CSP-policy:default-src 'self';script-src 'self' https://ajax.googleapis.com;img-src 'self' https://example.com;style-src 'self' https://fonts.googleapis.com;
Denna policy tillåter endast innehåll från din egen domän (refererad till som ’self’) samt från några specifika externa källor (ajax.googleapis.com, example.com och fonts.googleapis.com).
Lägg till policy i din hemsida: När du har skapat din policy måste du lägga till den på din hemsida. Detta görs genom att lägga till en meta-tag i ditt HTML-dokuments head-sektion. Lägg till följande i din HTML-dokuments head-sektion:<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://ajax.googleapis.com; img-src 'self' https://example.com; style-src 'self' https://fonts.googleapis.com;">
Använda en CSP-generator och rapportverktyg: Om du är osäker på hur du ska skapa en CSP-policy kan du använda verktyg som report-uri.com, som har en CSP-generator där du kan använda en ”wizard” för att skapa en policy baserad på dina behov. Dessutom kan report-uri.com hjälpa dig att samla rapporter om eventuella CSP-policyöverträdelser som inträffar på din hemsida. För att använda rapportfunktionen, lägg till ”report-uri” direktivet i din CSP-policy och ange en rapporterings-URI till report-uri.com, till exempel:default-src 'self'; script-src 'self' https://ajax.googleapis.com; img-src 'self' https://example.com; style-src 'self' https://fonts.googleapis.com; report-uri https://yoursubdomain.report-uri.com/r/d/csp/reportOnly;
Testa och justera din policy: När du har implementerat din CSP-policy är det viktigt att testa din hemsida noggrant för att säkerställa att allt fungerar som det ska. Om du har blockerat något innehåll av misstag, kommer webbläsaren att visa varningar eller felmeddelanden i konsolen. Du kan använda dessa meddelanden för att justera din policy och säkerställa att allt innehåll laddas korrekt. För att testa din policy utan att faktiskt blockera något innehåll kan du använda en meta-tag med ”http-equiv” satt till ”Content-Security-Policy-Report-Only”. Detta låter dig se vilka element som skulle ha blockerats av din policy utan att faktiskt förhindra dem från att laddas. Det är användbart för att testa och felsöka din policy innan du implementerar den i produktion.<meta http-equiv="Content-Security-Policy-Report-Only" content="default-src 'self'; script-src 'self' https://ajax.googleapis.com; img-src 'self' https://example.com; style-src 'self' https://fonts.googleapis.com;">
Förbättra din policy över tid: Eftersom webbhotets säkerhetslandskap ständigt förändras och utvecklas är det viktigt att regelbundet granska och uppdatera din CSP-policy. Se till att du följer bästa praxis och håller dig informerad om nya säkerhetsrisker och rekommendationer.
Att implementera en CSP-policy på din hemsida är en viktig del av att skydda den från säkerhetshot och dataintrång. Genom att följa dessa steg och använda en begriplig policy kan du säkerställa att din hemsida är skyddad mot skadlig kod och att dina användares data förblir säkra.
