Allow CSP in Chrome and Firefox and Call Server API in Spring boot Bangla

ঠিক আছে 🔥। আমি তোমার জন্য একটি সম্পূর্ণ README-style document বানাচ্ছি, যেখানে Chrome এবং Firefox দুটোতেই Spring Boot backend-এর জন্য CSP এবং CORS ঠিকভাবে configure করার process step-by-step আছে।

README: CSP & CORS Configuration for Spring Boot (Chrome & Firefox)

Overview

এই document-এ দেখানো হয়েছে কিভাবে:

Spring Boot backend থেকে Content Security Policy (CSP) configure করা যায়।
Spring Boot backend থেকে Cross-Origin Resource Sharing (CORS) allow করা যায়।
Chrome ও Firefox-এ fetch/API calls চালাতে হয় কীভাবে।

⚠️ Important: নিচের setup mostly development/test environment-এর জন্য। Production environment-এ অবশ্যই CSP & CORS secure করে configure করতে হবে।

1. Spring Boot Backend Configuration

1.1 CSP (Content Security Policy)

Spring Boot WebFlux বা Spring MVC application-এ CSP header সেট করতে হবে:

a) WebFlux (reactive)

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.server.WebFilter;

@Configuration
public class SecurityHeaderConfig {

    @Bean
    public WebFilter cspHeaderFilter() {
        return (exchange, chain) -> {
            exchange.getResponse().getHeaders().add(
                "Content-Security-Policy",
                "default-src 'self'; frame-src 'self'; connect-src 'self';"
            );
            return chain.filter(exchange);
        };
    }
}

b) Spring MVC

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.filter.OncePerRequestFilter;

import jakarta.servlet.FilterChain;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;

@Configuration
public class SecurityHeaderConfig {

    @Bean
    public OncePerRequestFilter cspHeaderFilter() {
        return new OncePerRequestFilter() {
            @Override
            protected void doFilterInternal(HttpServletRequest request,
                                            HttpServletResponse response,
                                            FilterChain filterChain)
                    throws ServletException, IOException {
                response.setHeader("Content-Security-Policy",
                        "default-src 'self'; frame-src 'self'; connect-src 'self';");
                filterChain.doFilter(request, response);
            }
        };
    }
}

Note: 'self' means same origin. Development/test-এ সব allow করতে চাইলে connect-src * 'unsafe-inline' 'unsafe-eval' data: blob:; ব্যবহার করা যায়।

1.2 CORS Configuration

Browser fetch/API calls চলার জন্য CORS allow করতে হবে।

a) Global CORS Filter (Recommended for dev)

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class GlobalCorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOriginPattern("*"); // সব origin allow
        config.addAllowedHeader("*");        // সব header allow
        config.addAllowedMethod("*");        // GET, POST, PUT, DELETE, OPTIONS
        config.setAllowCredentials(true);    // credentials allow

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

b) Controller-Level (Optional)

@CrossOrigin(origins = "*")
@RestController
@RequestMapping("/api")
public class MyController {

    @PostMapping("/refresh-token")
    public ResponseEntity<String> refreshToken() {
        return ResponseEntity.ok("Token refreshed successfully!");
    }
}

⚠️ Production environment-এ * ব্যবহার করা ঠিক নয়, সেক্ষেত্রে নির্দিষ্ট frontend domain allow করা উচিত।

2. Frontend Testing (Chrome & Firefox)

2.1 Fetch Example

fetch("http://localhost:8080/oauth2/access-token-generation/refresh-token", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ refreshToken: "abcd1234" })
})
.then(res => res.text())
.then(console.log)
.catch(console.error);

2.2 Chrome

CSP & CORS normally Chrome enforce করে।
Development-এ যদি কোন CSP block হয়, Chrome debug করতে পারো:
```
chrome.exe --disable-web-security --user-data-dir="C:\temp\chrome-dev"
```

⚠️ Strictly development/testing only. Production-এ never use.

2.3 Firefox

Firefox CSP block করলে console warning দেয়।
Dev environment-এ:
1. Open console → paste code warning আসে
2. টাইপ করো: allow pasting
3. তারপর paste করে run করো
CORS block হলে Firefox তেমনভাবে error দেখাবে। Backend CORS enable করা থাকলে fetch কাজ করবে।

3. Notes

Development: সব allow করা যায় (*, unsafe-inline, unsafe-eval)।
Production: সবসময় specific origins ও domains ব্যবহার করা উচিত।
CSP ও CORS দুটি ভিন্ন security layer — একসাথে configure করতে হবে।

4. References

আমি চাইলে এই README Angular/React frontend specific proxy setup যোগ করেও upgrade করতে পারি, যাতে localhost:4200 → localhost:8080 fetch seamless কাজ করে।

চাও কি সেটা যোগ করি?

Blog of SH

এই ব্লগটি সন্ধান করুন