Digital markedsføring

Cross-Origin Resource Sharing (CORS) og Websikkerhet – Alt du må vite

  • 15 Mart 2025
  • 24 min read
  • Hostragons-laget
Cross-Origin Resource Sharing (CORS) og Websikkerhet – Alt du må vite

Dette blogginnlegget gir en grundig gjennomgang av Cross-Origin Resource Sharing (CORS), en avgjørende del av websikkerheten. Her får du forklart hva CORS er og hvorfor det er viktig for både moderne webapplikasjoner og nettbaserte tjenester. Du får innsikt i historien bak CORS, utviklingen, og de viktigste fordelene. Vi presenterer en enkel guide til CORS-konfigurasjon, tekniske detaljer, typiske CORS-feil samt løsninger. For sikkerhet, finner du strategier og konkrete policyeksempler, og vanlige misforståelser blir avklart. Dette er en omfattende ressurs for norske webutviklere som vil forstå og sikre CORS i sine løsninger.

Hva er CORS og hvorfor er det viktig for webapplikasjoner?

Cross-Origin Resource Sharing (CORS) er en sikkerhetsmekanisme som lar nettlesere kontrollere om en nettside får tilgang til ressurser fra et annet domene. Kort sagt – det gir webapplikasjoner mulighet til å hente data (for eksempel fra API-er, fonter, bilder) på tvers av domener, men kun på serverens premisser. CORS er en av grunnpilarene i moderne websikkerhet, og spiller en nøkkelrolle for å beskytte både applikasjon og brukerdata.

CORS er særlig viktig for rammeverk som Single Page Applications (SPA) og mikrotjenester, der applikasjonen ofte kommuniserer med API-er på andre domener. Med CORS kan utviklere tillate sikker deling av data mellom tjenester, samtidig som man hindrer ondsinnede nettsteder fra å stjele sensitive brukerdata. Uten CORS ville ethvert nettsted potensielt kunne bruke JavaScript til å hente eller manipulere data fra andre nettsteder og deres brukere.

    Fordeler med CORS

  • Sikrer trygg datadeling mellom webapplikasjoner og eksterne domener.
  • Hindrer uautoriserte nettsteder fra å få tilgang til brukerdata.
  • Styrker sikkerheten rundt API-er og webtjenester.
  • Muliggjør moderne webutvikling (SPA, mikrotjenester) på en trygg måte.
  • Minimerer kompatibilitetsproblemer mellom nettlesere.
  • Gir utviklere detaljert kontroll over hvilke ressurser som kan deles og fra hvor.

CORS er en vital del av websikkerhet. Sammen med Same-Origin Policy (SOP) beskytter det både brukere og applikasjoner mot angrep. SOP tillater kun tilgang til ressurser på samme domene, protokoll og port. CORS gjør det mulig å gi kontrollert tilgang på tvers av disse, uten å svekke sikkerheten.

Riktig CORS-konfigurasjon er kritisk for sikkerhet. Feil oppsett åpner for sikkerhetsrisiko og angrep. Derfor må enhver webutvikler forstå hvordan CORS fungerer og hvordan det settes opp riktig.

Historien og utviklingen bak CORS

Cross-Origin Resource Sharing (CORS) er essensielt for dagens web, men det har vært en lang reise for å komme hit. I utgangspunktet var nettlesere begrenset av Same-Origin Policy, som kun tillot tilgang til ressurser på samme domene. Dette gjorde det vanskelig å bygge moderne applikasjoner som trengte data fra eksterne tjenester og API-er. CORS ble utviklet for å gi trygg og fleksibel tilgang på tvers av domener.

Behovet for CORS oppstod da webutviklere ønsket å hente data fra flere kilder i én applikasjon. For å løse dette, definerte World Wide Web Consortium (W3C) en standard som beskrev hvordan nettlesere og servere skal samhandle. Målet var å gi utviklere fleksibilitet samtidig som sikkerheten ivaretas.

År Utvikling Forklaring
Tidlig 2000-tall Første behov Utviklere ønsket å hente data fra eksterne domener.
2004 Første løsninger Teknikker som JSONP ble brukt, men var usikre.
2009 W3C standardisering W3C startet arbeidet med CORS-standarder.
2010+ Utbredt bruk CORS ble støttet av moderne nettlesere og fikk bredt gjennomslag.

Utviklingen av CORS har handlet om å balansere sikkerhet og fleksibilitet. De første løsningene fungerte for enkle brukstilfeller, men ble utvidet til å støtte mer avanserte scenarier. For eksempel ble preflight requests (forhåndsforespørsel) introdusert for å gi ekstra sikkerhet – serveren må godkjenne spesielle cross-origin-forespørsler før de sendes. Dette har gjort CORS til en hjørnestein i moderne webutvikling.

Utviklingsfaser for CORS

  1. Begrensninger i Same-Origin Policy
  2. Fremvekst av tidlige løsninger som JSONP (med sikkerhetsproblemer)
  3. W3C definerer standarder
  4. Preflight-forespørsler introduseres
  5. Støtte i moderne nettlesere

I dag er CORS avgjørende for sikker datadeling mellom webapplikasjoner. Men riktig oppsett er nødvendig for å unngå sikkerhetshull. Feilkonfigurerte CORS-policyer kan gi uvedkommende tilgang til sensitive data. Det er derfor viktig at norske utviklere kjenner til CORS-prinsippene og oppsett.

Hvorfor bruke CORS? Hovedfordeler

Cross-Origin Resource Sharing (CORS) er uunnværlig for å bygge sikre og fleksible webapplikasjoner. Det gir trygg datadeling på tvers av domener, og gir utviklere stor frihet til å integrere ulike tjenester og API-er. CORS gjør det mulig å bygge mer modulære og skalerbare løsninger, og gir bedre brukeropplevelse.

En av de viktigste fordelene med CORS er at det løser begrensningene fra Same-Origin Policy. Denne policyen tillater kun tilgang til ressurser på samme protokoll, port og domene. Med CORS kan serveren spesifisere hvilke eksterne domener som får tilgang, og hvilke HTTP-metoder som er lov.

Fordeler med CORS

  • Sikrer trygg tilgang til API-er på andre domener.
  • Gjør applikasjoner mer modulære og skalerbare.
  • Gir utviklere kontroll og fleksibilitet ved integrasjon.
  • Støtter rike og integrerte brukeropplevelser.
  • Reduserer sikkerhetsrisiko ved datadeling.

Tabellen under oppsummerer CORS-funksjoner og fordeler:

Funksjon Forklaring Fordel
Cross-origin forespørsler HTTP-forespørsler fra andre domener. Muliggjør datadeling og serviceintegrasjon.
Preflight forespørsler OPTIONS-metode for å sjekke CORS-policy før hovedforespørsel. Sikrer trygg datatransport og forhindrer sikkerhetsproblemer.
Tillatte domener Liste over domener som får tilgang til ressursene. Gir kontrollert og sikker tilgang.
Støtte for credentials Deling av cookies og autentiseringsdata. Støtter brukerøkter og personaliserte opplevelser.

Riktig CORS-konfigurasjon er avgjørende for sikkerhet. Feil oppsett kan gi angripere tilgang til sensitive data eller tillate kjøring av skadelig kode. Planlegg og test alltid CORS-policyen nøye.

Hvordan konfigurere CORS? Enkel veiledning

Å sette opp Cross-Origin Resource Sharing (CORS) riktig er nødvendig for å beskytte webapplikasjonen og styre datadeling. Feilkonfigurert CORS kan åpne for angrep, mens korrekt oppsett gir sikker og stabil drift.

Start alltid med å kartlegge hvilke ressurser applikasjonen trenger tilgang til, og hvilke domener som er trygge. Definer hvilke HTTP-metoder (GET, POST, PUT, DELETE osv.) som skal tillates. Det gir deg grunnlag for videre konfigurasjon.

    Steg for CORS-konfigurasjon

  1. Analyser behov: Finn ut hvilke eksterne ressurser som trengs.
  2. Sett opp serveren: Legg til relevante HTTP-headere.
  3. Angi Origin: Spesifiser tillatte domener.
  4. Definer HTTP-metoder: Bestem hvilke metoder som er tillatt.
  5. Konfigurer credentials: Tillat eller blokkér cookies og autentiseringsdata.
  6. Håndter feil: Gi brukeren meningsfulle feilmeldinger.

På serveren må du sette HTTP-headere korrekt. Access-Control-Allow-Origin angir hvilke domener som kan nå ressursen. Access-Control-Allow-Methods definerer tillatte metoder. Access-Control-Allow-Headers spesifiserer hvilke spesial-headere som kan brukes. Riktig oppsett gir sikker og kompatibel drift.

HTTP-header Forklaring Eksempel
Access-Control-Allow-Origin Tillatte domener https://example.com
Access-Control-Allow-Methods Tillatte HTTP-metoder GET, POST, PUT
Access-Control-Allow-Headers Tillatte spesial-headere Content-Type, Authorization
Access-Control-Allow-Credentials Tillat cookies/autentisering true

Feil bør håndteres og vises tydelig for brukeren. CORS-feil i nettleserens konsoll skyldes som regel feil policy på serveren. Sjekk serveroppsettet og oppdater policyen regelmessig for best mulig sikkerhet.

Tekniske detaljer om CORS

Cross-Origin Resource Sharing (CORS) lar nettsider på ett domene få tilgang til ressurser på et annet domene, protokoll eller port – hvis serveren tillater det. Dette er avgjørende for fleksibel webutvikling, men kan bli en sikkerhetsfelle om det ikke settes opp riktig.

For å forstå CORS må du først kjenne til begrepet "origin". En origin består av protokoll (http/https), domene (example.com) og port (80/443). Er én av disse ulik, regnes det som forskjellig origin. CORS bygger på Same-Origin Policy, som er standarden nettlesere bruker.

Scenario Forespørsel fra Målressurs Trenger CORS?
Samme domene http://example.com http://example.com/api Nei
Ulik port http://example.com:8080 http://example.com:3000/api Ja
Ulik protokoll http://example.com https://example.com/api Ja
Ulik domene http://example.com http://api.example.com/api Ja

CORS styres via HTTP-headere på serveren. Når en cross-origin-forespørsel sendes, må serveren svare med bestemte CORS-headere – for eksempel Access-Control-Allow-Origin – som angir hvilke domener som får tilgang. Du kan spesifisere én origin, flere, eller jokertegn (*) for alle. Jokertegn er risikabelt og bør kun brukes til offentlige, ikke-sensitive data.

    Tekniske CORS-funksjoner

  • Access-Control-Allow-Origin: Spesifiserer tillatte domener.
  • Access-Control-Allow-Methods: Definerer tillatte HTTP-metoder.
  • Access-Control-Allow-Headers: Bestemmer tillatte spesial-headere.
  • Access-Control-Expose-Headers: Headere som kan vises til klienten.
  • Access-Control-Allow-Credentials: Tillater cookies og autentisering på cross-origin.

Det finnes "simple requests" og "preflight requests". Simple requests er enkle (GET, HEAD, POST med standard headere), mens preflight krever en ekstra OPTIONS-forespørsel til serveren før selve forespørselen sendes – for å sjekke om det er tillatt.

CORS og sikkerhet

CORS er utviklet for å styrke sikkerheten, men feil oppsett kan gi sikkerhetsproblemer. Bruker du Access-Control-Allow-Origin: * åpner du for at alle domener får tilgang – noe som kan misbrukes av angripere. Du må alltid nøye spesifisere hvilke origins som får tilgang!

En annen fallgruve er Access-Control-Allow-Credentials. Denne headeren gir tillatelse til å sende cookies og autentiseringsdata på cross-origin. Feil bruk kan åpne for XSS og andre angrep.

CORS og ytelse

CORS påvirker også ytelsen. Preflight requests gir ekstra OPTIONS-forespørsler for hver cross-origin-forespørsel, noe som kan bli tungt i applikasjoner med mange slike kall. Optimaliser ved å bruke simple requests der det er mulig, og cache preflight-responsene hvis serveren tillater det.

Test og overvåk alltid CORS-policyen. Bruk nettleserens utviklerverktøy eller CORS-testverktøy for å avdekke feil og justere policyen. Sjekk serverens headere jevnlig.

Vanlige CORS-feil og løsninger

Vanlige CORS-feil og løsninger

Cross-Origin Resource Sharing (CORS)-feil er noe de fleste webutviklere støter på. Feil oppstår når en nettside prøver å hente ressurser fra et annet domene, og serveren ikke tillater det. Nettleseren håndhever Same-Origin Policy og blokkerer forespørselen hvis CORS ikke er riktig satt opp. Feilkonfigurasjon eller manglende headere er hovedårsaken til CORS-feil.

Feilkode Forklaring Løsning
No 'Access-Control-Allow-Origin' header is present Serveren sender ikke CORS-headeren. Legg til Access-Control-Allow-Origin på serveren.
'Access-Control-Allow-Origin' header contains invalid value 'null' Serveren sender feil origin, f.eks. 'null'. Sett korrekt domene eller * hvis det er trygt.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource. Nettleseren blokkerer forespørselen. Sjekk CORS-policyen på serveren og tillat riktig origin.
CORS preflight channel did not succeed. Preflight (OPTIONS) feilet. Sett riktige CORS-headere for OPTIONS-forespørselen.

Typiske CORS-feil vises i nettleserens konsoll, og gir ofte gode hint om hva som er galt. Mangler Access-Control-Allow-Origin må den legges til på serveren. Preflight-feil tyder på at OPTIONS ikke håndteres korrekt.

Løsninger på CORS-feil

  • Konfigurer 'Access-Control-Allow-Origin': Spesifiser tillatte domener på serveren.
  • Håndter preflight-forespørsler: Sørg for at serveren svarer korrekt på OPTIONS-forespørsler.
  • Bruk proxy-server: Send forespørselen via egen server for å omgå CORS.
  • JSONP (kun GET, ikke anbefalt): Brukes kun i spesielle tilfeller; har sikkerhetsrisiko.
  • Les feilmeldinger nøye: Konsollen gir ofte detaljerte forklaringer.
  • Test med CORS-verktøy: Bruk nettleserutvidelser eller online-verktøy for å finne feil.

Løsningene krever som regel endringer på serveren, men noen ganger kan man bruke proxy eller alternative teknikker. Vær alltid klar over at slike løsninger kan ha sikkerhetsrisiko – bruk helst korrekt serverkonfigurasjon.

Sikkerhet er det viktigste med CORS. Feil oppsett, som Access-Control-Allow-Origin: *, åpner for angrep. Bruk kun dette på offentlige tjenester, og spesifiser alltid trygge domener for sensitive data.

Sikkerhetsstrategier for CORS

Cross-Origin Resource Sharing (CORS) må settes opp med omtanke for å sikre applikasjonen. Manglende eller feilkonfigurerte headere gir sikkerhetshull. Du må følge beste praksis for å beskytte data og brukere.

Første steg er å spesifisere nøyaktige origins i Access-Control-Allow-Origin. Unngå jokertegn (*), med mindre det er nødvendig for offentlige data. Lag en liste over tillatte origins, og gi kun disse tilgang.

    Sikkerhetsstrategier for CORS

  • Tillat kun bestemte origins: Spesifiser hvilke domener som får tilgang, aldri bruk * for sensitive data.
  • Preflight Management: Håndter OPTIONS-forespørsler korrekt og sjekk headere nøye.
  • Riktig bruk av headere: Konfigurer Access-Control-Allow-Headers med kun nødvendige headere.
  • Styrk autentisering: Bruk ekstra sikkerhet for cookies og tokens.
  • Feilhåndtering og logging: Overvåk CORS-konfigurasjonen og logg feil.
  • Regelmessig revisjon: Gjennomgå CORS-policyen og oppdater den etter behov.

Tabellen viser hvilke headere som bør settes for å beskytte applikasjonen:

Header Forklaring Eksempel
Access-Control-Allow-Origin Gir tilgang til bestemte domener. https://example.com
Access-Control-Allow-Methods Tillatte HTTP-metoder. GET, POST, PUT, DELETE
Access-Control-Allow-Headers Tillatte headere. Content-Type, Authorization
Access-Control-Allow-Credentials Tillat cookies/tokens på cross-origin. true

Kontroller og oppdater CORS-policyen jevnlig. Nye trusler og sårbarheter oppstår, så CORS må revideres. Husk å vurdere alle tredjepartsbiblioteker og tjenester som applikasjonen bruker – de må også ha sikker CORS-konfigurasjon.

Eksempler på CORS-policy og implementering

Cross-Origin Resource Sharing (CORS)-policyer styrer hvilke domener som får tilgang til ressurser på tvers av nettsteder. Dette er sentralt for å beskytte brukere mot datatyveri og angrep. En CORS-policy gir kun tillatelse til spesifiserte origins, og blokkerer alle andre.

CORS implementeres på serveren, via HTTP-headere. Nettleseren leser disse og avgjør om forespørselen skal tillates. Er origin ikke tillatt, blokkerer nettleseren og sender feilmelding i konsollen. Dette gir sikkerhet uten å kreve endringer på klienten.

HTTP-header Forklaring Eksempel
Access-Control-Allow-Origin Tillatte domener https://example.com
Access-Control-Allow-Methods Tillatte HTTP-metoder GET, POST, PUT
Access-Control-Allow-Headers Tillatte spesial-headere X-Custom-Header, Content-Type
Access-Control-Allow-Credentials Tillat cookies/autentisering true

Feil oppsett gir sikkerhetsrisiko. Access-Control-Allow-Origin: * bør aldri brukes for sensitive data, kun for åpne offentlige API-er. Sikkerhetseksperter anbefaler å revidere policyen jevnlig og utføre tester.

CORS i ulike nettlesere

Alle moderne nettlesere støtter CORS-standarder, men det kan være små forskjeller i implementeringen. Nettleseren sjekker HTTP-headere fra serveren og avgjør om forespørselen skal tillates. Feil policy gir feilmelding og blokkerer forespørselen.

Eksempler på implementering og testing:

  1. Sett CORS-headere på serveren: Spesifiser tillatte origins i Access-Control-Allow-Origin.
  2. Håndter preflight: Svar korrekt på OPTIONS-forespørsel med nødvendige headere.
  3. Styr credentials: Bruk Access-Control-Allow-Credentials for å tillate eller blokkere cookies/tokens.
  4. Feilsøk: Bruk nettleserens utviklerverktøy for å finne CORS-feil og justere policyen.
  5. Sikkerhetstesting: Test policyen jevnlig med sikkerhetsverktøy for å finne svakheter.
  6. Følg beste praksis: Hold deg til anerkjente CORS-retningslinjer.

CORS er en sentral del av websikkerhet, og riktig oppsett beskytter brukerdata. Feil og mangler gir sikkerhetsrisiko. Norske utviklere må forstå og følge beste praksis.

CORS er et uunnværlig verktøy for moderne websikkerhet. Riktig policy stopper uvedkommende og beskytter brukerdata.

Vanlige misforståelser om CORS

Cross-Origin Resource Sharing (CORS) er ofte misforstått av utviklere. Dette fører til både overdreven frykt og feilkonfigurasjon. For å sikre både funksjonalitet og sikkerhet må man forstå hva CORS faktisk gjør – og ikke gjør.

Mange tror CORS er en slags brannmur – det er det ikke. CORS er en klientbasert sikkerhetsmekanisme: det er nettleseren som håndhever policyen, og serveren gir tillatelse via headere. CORS forhindrer ikke angrep, men styrer hvilke origins som får tilgang til data i nettleseren.

    Misforståelser og fakta

  • Feil: CORS beskytter mot alle cross-origin-angrep. Riktig: CORS styrer kun hvilke origins nettleseren tillater tilgang fra.
  • Feil: Å deaktivere CORS gir økt sikkerhet. Riktig: Uten CORS er du mer sårbar for angrep som XSS.
  • Feil: CORS gjelder bare GET-forespørsler. Riktig: CORS gjelder også for PUT, POST, DELETE osv.
  • Feil: CORS-feil skyldes alltid serveren. Riktig: Feil kan komme fra både server og klient.
  • Feil: CORS påvirker ikke requests til samme domene. Riktig: CORS aktiveres også hvis protokoll eller port er forskjellig.

Tabellen under viser vanlige CORS-scenarier og hvordan de skal konfigureres:

Scenario Forklaring Nødvendige CORS-headere
Enkel GET/HEAD-forespørsel Cross-origin GET eller HEAD Access-Control-Allow-Origin: * eller et spesifikt domene
Preflight (OPTIONS) PUT eller DELETE + spesial-headere Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers
Med credentials Cookies eller tokens sendes med Access-Control-Allow-Origin: [domene], Access-Control-Allow-Credentials: true
Tillater alle domener Åpner for alle origins Access-Control-Allow-Origin: * (bruk kun til offentlige data!)

Riktig forståelse av CORS er nøkkelen til sikker og funksjonell webutvikling. Husk: CORS er én sikkerhetsmekanisme, ikke en komplett løsning – kombiner alltid med andre tiltak.

Viktige punkter om CORS

Cross-Origin Resource Sharing (CORS) er sentralt for sikker datadeling i moderne applikasjoner. Det styrer hvilke domener som får tilgang til ressurser, og beskytter både brukere og applikasjon. Nettleseren bruker Same-Origin Policy som standard, og CORS gir fleksibel datadeling uten å svekke sikkerheten.

For å forstå CORS må du se på HTTP-headere. Access-Control-Allow-Origin spesifiserer hvilke origins som får tilgang. Bruker du jokertegn (*) gir du tilgang til alle, men dette bør ikke brukes for sensitive data.

CORS-headere og betydning

Bu yazıyı paylaş:

Hostragons-laget

Hosting, sunucu ve alan adı konularında uzman ekibimizden güncel rehberler. Projeniz için doğru çözümü birlikte bulalım.

Kontakt oss
Header Forklaring Eksempel