Blog

[網站開發]淺談域、CORS和同源策略：瀏覽器安全的基礎知識

前端應用程式（例如網頁或移動應用）運行在與後端不同的域名、端口或協議時，瀏覽器的同源策略會阻止跨域請求，這就是跨源資源共享（CORS）機制發揮作用的時候。

域

一個完整的域由協議、主機和端口號三部分組成。例如，http://example.com:80 中，協議是 HTTP，主機是 example.com，端口號是 80。這些部分組合在一起形成了一個唯一的網路地址，稱為域。

CORS

CORS跨域資源共享（Cross-Origin Resource Sharing），是一種Web瀏覽器的安全機制，用於控制瀏覽器如何允許來自不同源的網頁對資源的訪問。同源策略是瀏覽器的一項安全功能，它限制了來自不同源（域、協議、端口）的JavaScript腳本對網頁內容的訪問，這是為了防止跨站腳本攻擊。

那什麼是相同的源?

兩個 URL 具有相同源，如果它們的協議（通常是 HTTP 或 HTTPS）、主機（域名）和端口號（如果有的話）完全相同。換句話說，如果兩個 URL 的協議、主機和端口號都相同，則它們被視為相同的源。例如：

  • http://example.com:80 和 http://example.com:80/page1
  • https://example.com:443 和 https://example.com:443/page2

這兩組 URL 都被視為相同的源，因為它們的協議、主機和端口號都相同。反之，只要有一個不一樣就是不同的源。

在Spring Security中配置CORS步驟簡略概述：

  1. 添加CORS配置類：創建一個類，標記為@Configuration，並且擁有WebMvcConfigurer或WebMvcConfigurerAdapter的實現。在這個類中，你可以使用addCorsMappings方法來配置CORS規則。
  2. 註冊CORS配置類：確保你的CORS配置類被Spring Boot應用程序正確註冊，這通常通過在@SpringBootApplication類上添加@EnableWebMvc或者@Configuration類的註解來實現。
  3. 定義CORS規則：在CORS配置類中，通過調用addCorsMappings方法，定義允許跨域請求的路徑、允許的來源、允許的HTTP方法和標頭等。
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true); // 允許發送Cookie資訊
    }
}

@Configuration
@EnableWebSecurity
public class WebSecurityConfig {
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http, JwtRequestFilter jwtRequestFilter) throws Exception {
        http
                .csrf(csrf -> csrf.disable()) //禁用CSRF
                .authorizeHttpRequests(authorize -> authorize
                        .requestMatchers("/api/auth/*").permitAll()
                        .anyRequest().authenticated()
                )
                .addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);//設置JWT過濾
        return http.build();
    }
...略
}
Tags: , ,

發佈留言