M

MLOG

Svenska

Lås upp hemligheterna med CORS (Cross-Origin Resource Sharing) och lär dig hur du säkert aktiverar förfrågningar mellan domäner i dina webbapplikationer. Denna kompletta guide täcker allt från grunderna till avancerade konfigurationer, vilket säkerställer sömlös och säker kommunikation mellan olika ursprung.

CORS avmystifierat: En omfattande guide till Cross-Origin Resource Sharing

I dagens sammankopplade webb behöver applikationer ofta komma åt resurser från olika ursprung. Det är här Cross-Origin Resource Sharing (CORS) kommer in i bilden. CORS är en avgörande säkerhetsmekanism som styr hur webbläsare hanterar förfrågningar från ett ursprung (domän, protokoll och port) till ett annat. Att förstå CORS är avgörande för varje webbutvecklare för att bygga säkra och funktionella webbapplikationer.

Vad är Same-Origin Policy?

Innan vi dyker in i CORS är det viktigt att förstå Same-Origin Policy (SOP). SOP är en grundläggande säkerhetsmekanism som implementeras i webbläsare. Dess syfte är att förhindra skadliga skript på en webbplats från att komma åt känslig data på en annan webbplats. Ett ursprung definieras av kombinationen av protokoll (t.ex. HTTP eller HTTPS), domän (t.ex. example.com) och portnummer (t.ex. 80 eller 443). Två URL:er anses ha samma ursprung om de delar samma protokoll, domän och port.

Exempel:

SOP begränsar skript från att komma åt resurser från ett annat ursprung om inte specifika åtgärder, såsom CORS, finns på plats för att tillåta det.

Varför är CORS nödvändigt?

Även om Same-Origin Policy är avgörande för säkerheten, kan den också vara restriktiv. Många moderna webbapplikationer är beroende av att hämta data från olika servrar, som API:er eller content delivery networks (CDN). CORS erbjuder ett kontrollerat sätt att lätta på SOP och tillåta legitima förfrågningar mellan olika ursprung samtidigt som säkerheten upprätthålls.

Tänk dig ett scenario där en webbapplikation som ligger på http://example.com behöver hämta data från en API-server på http://api.example.net. Utan CORS skulle webbläsaren blockera denna förfrågan på grund av SOP. CORS tillåter API-servern att explicit specificera vilka ursprung som får komma åt dess resurser, vilket gör att webbapplikationen kan fungera korrekt.

Hur CORS fungerar: Grunderna

CORS fungerar genom en serie HTTP-rubriker som utbyts mellan klienten (webbläsaren) och servern. Servern använder dessa rubriker för att informera webbläsaren om den får tillgång till den begärda resursen. Den centrala HTTP-rubriken som är involverad är Access-Control-Allow-Origin.

Scenario 1: Enkel förfrågan

En "enkel förfrågan" är en GET-, HEAD- eller POST-förfrågan som uppfyller specifika kriterier (t.ex. att Content-Type-rubriken är en av application/x-www-form-urlencoded, multipart/form-data, eller text/plain). I detta fall skickar webbläsaren förfrågan direkt till servern, och servern svarar med Access-Control-Allow-Origin-rubriken.

Klientförfrågan (från http://example.com):

GET /data HTTP/1.1
Host: api.example.net
Origin: http://example.com

Serversvar (från http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "data": "Some data from the server"
}

I detta exempel svarar servern med Access-Control-Allow-Origin: http://example.com, vilket indikerar att förfrågningar från http://example.com är tillåtna. Om ursprunget i förfrågan inte matchar värdet i Access-Control-Allow-Origin-rubriken (eller om rubriken inte finns), kommer webbläsaren att blockera svaret och förhindra klientsidans skript från att komma åt datan.

Scenario 2: Preflight-förfrågan (för komplexa förfrågningar)

För mer komplexa förfrågningar, som de som använder HTTP-metoder som PUT, DELETE, eller de med anpassade rubriker, utför webbläsaren en "preflight"-förfrågan med HTTP OPTIONS-metoden. Denna preflight-förfrågan frågar servern om tillstånd innan den faktiska förfrågan skickas. Servern svarar med rubriker som specificerar vilka metoder, rubriker och ursprung som är tillåtna.

Klientens preflight-förfrågan (från http://example.com):

OPTIONS /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header

Serversvar (från http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header, Content-Type
Access-Control-Max-Age: 3600

Förklaring av rubriker:

Om serverns preflight-svar indikerar att förfrågan är tillåten, fortsätter webbläsaren med den faktiska förfrågan. Annars blockerar webbläsaren förfrågan.

Klientens faktiska förfrågan (från http://example.com):

PUT /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
X-Custom-Header: some-value
Content-Type: application/json

{
  "data": "Some data to be updated"
}

Serversvar (från http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "status": "Data updated successfully"
}

Vanliga CORS-rubriker

Här är en genomgång av de viktigaste CORS-rubrikerna du behöver förstå:

CORS i olika serverspråk

Att implementera CORS innebär vanligtvis att konfigurera din serverapplikation för att skicka lämpliga CORS-rubriker. Här är exempel på hur man gör detta i olika språk och ramverk:

Node.js med Express

Du kan använda middleware-paketet cors:

const express = require('express');
const cors = require('cors');

const app = express();

// Aktivera CORS för alla ursprung (ANVÄND MED FÖRSIKTIGHET I PRODUKTION)
app.use(cors());

// Alternativt, konfigurera CORS för specifika ursprung
// app.use(cors({
//   origin: 'http://example.com'
// }));

app.get('/data', (req, res) => {
  res.json({ message: 'Detta är CORS-aktiverat för alla ursprung!' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Python med Flask

Du kan använda tillägget Flask-CORS:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# Alternativt, konfigurera CORS för specifika ursprung
# CORS(app, resources={r"/api/*": {"origins": "http://example.com"}})

@app.route("/data")
def hello():
    return {"message": "Detta är CORS-aktiverat för alla ursprung!"}

if __name__ == '__main__':
    app.run(debug=True)

Java med Spring Boot

Du kan konfigurera CORS i din Spring Boot-applikation med hjälp av annoteringar eller konfigurationsklasser:

Med annoteringar:

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://example.com") // Tillåt förfrågningar från http://example.com
public class DataController {

    @GetMapping("/data")
    public String getData() {
        return "Detta är CORS-aktiverat för http://example.com!";
    }
}

Med konfiguration:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/data")
                .allowedOrigins("http://example.com") // Tillåt förfrågningar från http://example.com
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

PHP

 "Detta är CORS-aktiverat för http://example.com!");
echo json_encode($data);
?>

CORS och säkerhetsaspekter

Även om CORS möjliggör förfrågningar mellan olika ursprung är det avgörande att implementera det på ett säkert sätt. Här är några viktiga överväganden:

Felsökning av CORS-problem

CORS-problem kan vara frustrerande att felsöka. Här är några vanliga problem och hur man löser dem:

Felsökningsverktyg:

Avancerade CORS-scenarier

Även om de grundläggande CORS-koncepten är relativt enkla, finns det några mer avancerade scenarier att överväga:

Bästa praxis för CORS

För att säkerställa en säker och effektiv CORS-implementering, följ dessa bästa praxis:

Slutsats

CORS är en kritisk säkerhetsmekanism som möjliggör kontrollerade förfrågningar mellan olika ursprung i webbapplikationer. Att förstå hur CORS fungerar och hur man konfigurerar det korrekt är avgörande för varje webbutvecklare. Genom att följa riktlinjerna och bästa praxis som beskrivs i denna omfattande guide kan du bygga säkra och funktionella webbapplikationer som sömlöst interagerar med resurser från olika ursprung.

Kom ihåg att alltid prioritera säkerhet och undvika alltför tillåtande CORS-konfigurationer. Genom att noggrant överväga säkerhetskonsekvenserna av dina CORS-inställningar kan du skydda dina applikationer och data från obehörig åtkomst.

Vi hoppas att den här guiden har hjälpt dig att avmystifiera CORS. Glad kodning!