Content Security Policy (CSP)

Om din sajt använder CSP behöver du tillåta Besökskollen-scriptet.

Vad är CSP?

Content Security Policy är en säkerhetsfunktion som begränsar vilka scripts som får köras på din sajt. Om du ser fel som "Refused to load the script" i webbläsarens konsol beror det troligen på CSP.

CORB vs CSP

Det är viktigt att skilja mellan CSP (Content Security Policy) och CORB (Cross-Origin Read Blocking):

CSP-fel

Meddelande: Refused to load the script

Lösning: Lägg till besokskollen.se i din CSP (se nedan)

CORB-fel

Meddelande: blocked by CORB

Lösning: Detta är ett annat problem - kontakta oss

Tips: CORB är webbläsarens skydd mot cross-origin-svar och kräver korrekta CORS-headers från vår server. Om du ser detta fel, kontakta oss så hjälper vi dig.

Uppdatera din CSP

Lägg till besokskollen.se i din script-src-direktiv:

Content-Security-Policy: script-src 'self' https://besokskollen.se;

Fullständigt exempel

Här är ett exempel på en CSP-header som tillåter Besökskollen:

Content-Security-Policy: default-src 'self'; script-src 'self' https://besokskollen.se; script-src-elem 'self' https://besokskollen.se; connect-src 'self' https://besokskollen.se;

Direktiv som behövs

Direktiv	Värde	Syfte
script-src	https://besokskollen.se	Tillåter laddning av scriptet
script-src-elem	https://besokskollen.se	Tillåter externa script-taggar
connect-src	https://besokskollen.se	Tillåter API-anrop (tracking-data)

Viktigt om prioritet

CSP-headers kan sättas på flera ställen. Den som "vinner" beror på din serverkonfiguration:

Källa	Prioritet
Nginx/Apache config	Högst
.htaccess	Hög
PHP header()	Lägre
<meta>-tag	Lägst

Tips: Om scriptet fortfarande blockeras trots att du lagt till domänen i PHP, kolla om CSP sätts via .htaccess - den kan överskriva PHP-headers.

Meta-tag alternativ

Om du inte kan ändra HTTP-headers kan du använda en meta-tag i <head>:

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' https://besokskollen.se; script-src-elem 'self' https://besokskollen.se; connect-src 'self' https://besokskollen.se;">

Next.js

I Next.js kan du konfigurera CSP i next.config.js:

// next.config.js
const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: "default-src 'self'; script-src 'self' https://besokskollen.se; script-src-elem 'self' https://besokskollen.se; connect-src 'self' https://besokskollen.se;"
  }
];

module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: securityHeaders,
      },
    ];
  },
};

Vercel

På Vercel kan du lägga till headers i vercel.json:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self' https://besokskollen.se; script-src-elem 'self' https://besokskollen.se; connect-src 'self' https://besokskollen.se;"
        }
      ]
    }
  ]
}

Next.js på Vercel (rekommenderat)

Rekommendation: Om du kör Next.js på Vercel, använd vercel.json istället för next.config.js för att säkerställa att headers alltid skickas korrekt.

Här är ett komplett exempel som kombinerar tracking-scriptet med CSP-headers i vercel.json:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self' https://besokskollen.se; script-src-elem 'self' https://besokskollen.se; connect-src 'self' https://besokskollen.se;"
        }
      ]
    }
  ]
}

Lägg sedan till tracking-scriptet i din app/layout.tsx:

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="sv">
      <head>
        <Script
          defer
          data-site-id="DIN-SAJT-ID"
          data-api="https://besokskollen.se"
          src="https://besokskollen.se/script.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Apache / .htaccess

Om du sätter CSP via .htaccess (vanligt på Apache-servrar) kommer denna att överskriva eventuella PHP-headers.

Lägg till https://besokskollen.se i din .htaccess:

<IfModule mod_headers.c>
    Header set Content-Security-Policy "\
default-src 'self'; \
script-src 'self' https://besokskollen.se; \
script-src-elem 'self' https://besokskollen.se; \
connect-src 'self' https://besokskollen.se;"
</IfModule>

Obs: Om du har CSP i både PHP och .htaccess, ta bort CSP-headern från PHP (den ignoreras ändå) och uppdatera istället .htaccess.

Felsökning

Så här hittar du vilken CSP-header som faktiskt skickas:

Öppna DevTools (F12) → Network
Ladda om sidan
Klicka på HTML-dokumentet (första request)
Under Response Headers, leta efter Content-Security-Policy
Verifiera att besokskollen.se finns i script-src, script-src-elem och connect-src

Console vs Issues-panelen

CSP-fel kan dyka upp på olika ställen i DevTools:

Console-fliken

Visar direkta fel när scriptet blockeras. Leta efter röda meddelanden som börjar med Refused to

Issues-panelen

Visar detaljerade CSP-varningar med specifik information om vilka direktiv som blockerar. Öppna via F12 → More tools → Issues

Verifiera att headers skickas

Om du har lagt till CSP men det fortfarande inte fungerar, verifiera att headern faktiskt skickas:

Öppna DevTools (F12) → Network
Markera Disable cache (viktigt!)
Ladda om sidan (Ctrl+Shift+R)
Klicka på HTML-dokumentet och leta efter Content-Security-Policy under Response Headers
Om headern saknas: Kontrollera din server-konfiguration
Om headern finns men besokskollen.se saknas: Uppdatera CSP-värdet

Vanliga fel

script-src-elem saknas - Lägg till detta direktiv utöver script-src
PHP-ändringar hjälper inte - Kolla om .htaccess överskriver headers
Fel domän - Se till att det står exakt https://besokskollen.se

← Tillbaka till integrationsguider