Home > CS > 2024 > ๐Ÿ’พ [CS] CORS๋ž€?

๐Ÿ’พ [CS] CORS๋ž€?
CS

๐Ÿ’พ [CS] CORS๋ž€?

1๏ธโƒฃ CORS.

  • CORS(Cross-Origin Resource Sharing)๋Š” ์›น ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์„œ๋กœ ๋‹ค๋ฅธ ์ถœ์ฒ˜(๋„๋ฉ”์ธ, ํ”„๋กœํ† ์ฝœ, ๋˜๋Š” ํฌํŠธ)๋ฅผ ๊ฐ€์ง„ ๋ฆฌ์†Œ์Šค ๊ฐ„์˜ ์š”์ฒญ์„ ์•ˆ์ „ํ•˜๊ฒŒ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๋ณด์•ˆ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.
  • CORS(Cross-Origin Resource Sharing)๋Š” ์›น ํŽ˜์ด์ง€๊ฐ€ ๋‹ค๋ฅธ ์ถœ์ฒ˜์˜ ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ•  ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ๋ณด์•ˆ ์ œ์•ฝ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

2๏ธโƒฃ ์™œ CORS๊ฐ€ ํ•„์š”ํ•œ๊ฐ€?

  • ์›น ๋ณด์•ˆ ๋ชจ๋ธ์—์„œ ๋™์ผ ์ถœ์ฒ˜ ์ •์ฑ…(Same-Origin Policy)์€ ๋ณด์•ˆ์ƒ์˜ ์ด์œ ๋กœ, ์›น ํŽ˜์ด์ง€์—์„œ ๋กœ๋“œ๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ž์‹ ์ด ๋กœ๋“œ๋œ ์ถœ์ฒ˜ ์™ธ๋ถ€์˜ ๋ฆฌ์†Œ์Šค์— ์ ‘๊ทผํ•˜๋Š” ๊ฒƒ์„ ์ œํ•œํ•ฉ๋‹ˆ๋‹ค.
    • ์ฆ‰, ํ•œ ์›น ํŽ˜์ด์ง€์—์„œ ๋กœ๋“œ๋œ ์Šคํฌ๋ฆฝํŠธ๋Š” ๋‹ค๋ฅธ ์ถœ์ฒ˜์˜ ๋ฆฌ์†Œ์Šค(์˜ˆ: API ์—”๋“œํฌ์ธํŠธ, ์ด๋ฏธ์ง€ ๋“ฑ)์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
    • ์ด ๋ณด์•ˆ ์ •์ฑ…์€ ์‚ฌ์ดํŠธ ๊ฐ„ ์š”์ฒญ ์œ„์กฐ(CSRF)์™€ ๊ฐ™์€ ๊ณต๊ฒฉ์„ ๋ฐฉ์ง€ํ•˜๋Š” ๋ฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.
  • ํ•˜์ง€๋งŒ, ๋งŽ์€ ๊ฒฝ์šฐ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ์™ธ๋ถ€ API๋‚˜ ๋‹ค๋ฅธ ๋„๋ฉ”์ธ์— ์žˆ๋Š” ๋ฆฌ์†Œ์Šค์— ์ ‘๊ทผํ•ด์•ผ ํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
    • ์ด๋•Œ, CORS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํŠน์ • ์ถœ์ฒ˜์—์„œ ์˜ค๋Š” ์š”์ฒญ์„ ํ—ˆ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

3๏ธโƒฃ CORS์˜ ๋™์ž‘ ๋ฐฉ์‹.

  • CORS๋Š” ์„œ๋ฒ„๊ฐ€ ํด๋ผ์ด์–ธํŠธ์˜ ์š”์ฒญ์— ๋Œ€ํ•ด ๋‹ค๋ฅธ ์ถœ์ฒ˜์—์„œ์˜ ์ ‘๊ทผ์„ ํ—ˆ์šฉํ• ์ง€ ์—ฌ๋ถ€๋ฅผ HTTP ํ—ค๋”๋ฅผ ํ†ตํ•ด ๋ช…์‹œํ•ฉ๋‹ˆ๋‹ค.

CORS๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ณผ์ •.

  • 1. Preflight Request
    • ๋ธŒ๋ผ์šฐ์ €๋Š” ์‹ค์ œ ์š”์ฒญ์„ ๋ณด๋‚ด๊ธฐ ์ „์— OPTIONS ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด ์„œ๋ฒ„์— โ€œ์‚ฌ์ „ ์š”์ฒญ(preflight request)โ€์„ ๋ณด๋ƒ…๋‹ˆ๋‹ค.
      • ์ด ์š”์ฒญ์€ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋ณด๋‚ด๋ ค๊ณ  ํ•˜๋Š” ์‹ค์ œ ์š”์ฒญ์˜ ๋ฉ”์„œ๋“œ์™€ ํ—ค๋”๊ฐ€ ์„œ๋ฒ„์—์„œ ํ—ˆ์šฉ๋˜๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.
  • 2. ์„œ๋ฒ„ ์‘๋‹ต
    • ์„œ๋ฒ„๋Š” Access-Control-Allow-Origin ๋“ฑ์˜ CORS ๊ด€๋ จ ํ—ค๋”๋ฅผ ํฌํ•จํ•œ ์‘๋‹ต์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
      • ์ด ์‘๋‹ต์„ ํ†ตํ•ด ๋ธŒ๋ผ์šฐ์ €๋Š” ํ•ด๋‹น ์ถœ์ฒ˜์˜ ์š”์ฒญ์„ ํ—ˆ์šฉํ• ์ง€ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
  • 3. ์‹ค์ œ ์š”์ฒญ
    • ์„œ๋ฒ„๊ฐ€ ํ—ˆ์šฉํ•œ ๊ฒฝ์šฐ, ๋ธŒ๋ผ์šฐ์ €๋Š” ์‹ค์ œ ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ต๋‹ˆ๋‹ค.

4๏ธโƒฃ ์ฃผ์š” CORS ํ—ค๋”.

  • Access-Control-Allow-Origin
    • ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ ‘๊ทผ์„ ํ—ˆ์šฉ๋ฐ›์€ ์ถœ์ฒ˜๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
    • ๋ชจ๋“  ์ถœ์ฒ˜๋ฅผ ํ—ˆ์šฉํ•˜๋ ค๋ฉด *๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
Access-Control-Allow-Origin: https://example.com
  • Access-Control-Allow-Methods
    • ์„œ๋ฒ„๊ฐ€ ํ—ˆ์šฉํ•˜๋Š” HTTP ๋ฉ”์„œ๋“œ(GET, POST, PUT, DELETE ๋“ฑ)๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
Access-Control-Allow-Methods: GET, POST
  • Access-Control-Allow-Credentials
    • ์„œ๋ฒ„๊ฐ€ ํด๋ผ์ด์–ธํŠธ์˜ ์ž๊ฒฉ ์ฆ๋ช…(์ฟ ํ‚ค, ์ธ์ฆ ํ—ค๋” ๋“ฑ)์„ ํฌํ•จํ•œ ์š”์ฒญ์„ ํ—ˆ์šฉํ• ์ง€ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
      • ๊ฐ’์œผ๋กœ๋Š” true ๋˜๋Š” false๊ฐ€ ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
Access-Control-Allow-Credentials: true
  • Access-Control-Max-Age
    • ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์‚ฌ์ „ ์š”์ฒญ์˜ ๊ฒฐ๊ณผ๋ฅผ ์บ์‹œํ•  ์ˆ˜ ์žˆ๋Š” ์‹œ๊ฐ„์„ ์ดˆ ๋‹จ์œ„๋กœ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
Access-Control-Max-Age: 3600

5๏ธโƒฃ CROS ์„ค์ • ์˜ˆ์‹œ(์„œ๋ฒ„ ์ธก)

  • ์„œ๋ฒ„ ์ธก์—์„œ CORS๋ฅผ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์‚ฌ์šฉ ์ค‘์ธ ์›น ์„œ๋ฒ„ ๋˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.
    • ๋‹ค์Œ์€ Java SpringBoot ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ CORS๋ฅผ ์„ค์ •ํ•˜๋Š” ์˜ˆ์ž…๋‹ˆ๋‹ค.
import org.springframework.context.annotation.Bean;
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 WebConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("https://example.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowedCredentials(true)
                .maxAge(3600);
            
    }
}
  • ์œ„ ์„ค์ •์€ ํŠน์ • ์ถœ์ฒ˜(https://example.com)์—์„œ ์˜ค๋Š” ๋ชจ๋“  ๊ฒฝ๋กœ์˜ ์š”์ฒญ์— ๋Œ€ํ•ด CORS๋ฅผ ํ—ˆ์šฉํ•˜๊ณ , ํŠน์ • HTTP ๋ฉ”์„œ๋“œ์™€ ํ—ค๋”๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

6๏ธโƒฃ ์š”์•ฝ.

  • CORS ๋Š” ์›น ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์„œ๋กœ ๋‹ค๋ฅธ ์ถœ์ฒ˜์˜ ๋ฆฌ์†Œ์Šค์— ์•ˆ์ „ํ•˜๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๊ธฐ ์œ„ํ•œ ๋ณด์•ˆ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.
  • CORS ๋Š” ์„œ๋ฒ„๊ฐ€ ์‘๋‹ต ํ—ค๋”๋ฅผ ํ†ตํ•ด ํŠน์ • ์ถœ์ฒ˜์˜ ์š”์ฒญ์„ ํ—ˆ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋ฉฐ, ์ด๋ฅผ ํ†ตํ•ด ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ์™ธ๋ถ€ API๋‚˜ ๋ฆฌ์†Œ์Šค์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • CORS ๋ฅผ ์ ์ ˆํžˆ ์„ค์ •ํ•˜๋ฉด, ๋ณด์•ˆ์„ฑ์„ ์œ ์ง€ํ•˜๋ฉด์„œ๋„ ๋‹ค์–‘ํ•œ ์ถœ์ฒ˜์—์„œ์˜ ๋ฆฌ์†Œ์Šค ์ ‘๊ทผ์„ ํ—ˆ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.