Content Security Policy (CSP) হল একটি নিরাপত্তা ফিচার যা ব্রাউজারের মাধ্যমে ওয়েব অ্যাপ্লিকেশনকে কী ধরনের রিসোর্স (যেমন স্ক্রিপ্ট, স্টাইল, ইমেজ, ইত্যাদি) লোড করতে দেওয়া হবে তা নির্দিষ্ট করে। CSP ওয়েব অ্যাপ্লিকেশনকে ক্রস-সাইট স্ক্রিপ্টিং (XSS) এবং ডেটা ইনজেকশন এটাক থেকে রক্ষা করতে সহায়তা করে।
Next.js-এ CSP কনফিগার করতে, আপনাকে একটি কাস্টম HTTP header ব্যবহার করতে হবে। Next.js-এ এই হেডারগুলো সাধারণত middleware বা custom server এর মাধ্যমে সেট করা হয়।
১. Next.js-এ CSP কনফিগার করার জন্য Middleware ব্যবহার করা
Next.js 12+ এর মাধ্যমে আপনি middleware ব্যবহার করে Content Security Policy (CSP) কনফিগার করতে পারেন। Middleware আপনাকে সার্ভার সাইডে HTTP headers কাস্টমাইজ করতে সাহায্য করবে।
উদাহরণ: CSP Middleware কনফিগারেশন
আপনি একটি middleware.js ফাইল তৈরি করতে পারেন যেখানে CSP হেডার সেট করা হবে।
// middleware.js
import { NextResponse } from 'next/server'
export function middleware(request) {
const response = NextResponse.next()
// Content Security Policy (CSP) হেডার যোগ করা
response.headers.set(
'Content-Security-Policy',
"default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' https://trusted-images.com;"
)
return response
}
ব্যাখ্যা:
default-src 'self': শুধুমাত্র সেই রিসোর্সগুলিকে লোড করার অনুমতি দেওয়া হবে যেগুলি একই ডোমেইন থেকে এসেছে।script-src 'self' https://trusted-cdn.com: স্ক্রিপ্ট ফাইল লোড করার জন্য শুধু নিজস্ব ডোমেইন এবং নির্দিষ্ট trusted CDN থেকে স্ক্রিপ্ট লোড করার অনুমতি।style-src 'self' 'unsafe-inline': স্টাইল শীট লোড করার জন্য নিজস্ব ডোমেইন এবং ইনলাইন স্টাইলগুলির অনুমতি দেওয়া হয়েছে।img-src 'self' https://trusted-images.com: শুধুমাত্র নিজস্ব ডোমেইন এবং নির্দিষ্ট ইমেজ সোর্স থেকে ছবি লোড করার অনুমতি।
২. Custom Server ব্যবহার করে CSP কনফিগার করা
Next.js-এ Custom Server ব্যবহার করলে, আপনি সহজেই আপনার HTTP হেডার কনফিগার করতে পারবেন। এটি একটি সাধারণ Node.js/Express সার্ভার হতে পারে।
উদাহরণ: Custom Server-এ CSP কনফিগারেশন
// server.js
const express = require('express')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
const server = express()
// CSP হেডার যোগ করা
server.use((req, res, next) => {
res.setHeader(
'Content-Security-Policy',
"default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' https://trusted-images.com;"
)
next()
})
// Next.js এর অন্যান্য রিকোয়েস্ট হ্যান্ডলিং
server.all('*', (req, res) => {
return handle(req, res)
})
server.listen(3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})
ব্যাখ্যা:
- এখানে, Express সার্ভার ব্যবহার করে Content Security Policy হেডারটি কনফিগার করা হয়েছে। প্রতিটি রিকোয়েস্টে CSP হেডার অ্যাড করা হবে এবং এর মাধ্যমে সাইটের নিরাপত্তা বৃদ্ধি পাবে।
server.use()ফাংশনটি সমস্ত রিকোয়েস্টের জন্য CSP হেডার সেট করবে।
৩. CSP Header সম্পর্কে আরও কিছু গুরুত্বপূর্ণ পয়েন্ট
'self': এটি ইঙ্গিত দেয় যে রিসোর্সটি শুধুমাত্র সেই ডোমেইন থেকে লোড করা যাবে যেখান থেকে পেজটি রেন্ডার হচ্ছে।'unsafe-inline': ইনলাইন স্ক্রিপ্ট এবং স্টাইলগুলির জন্য অনুমতি প্রদান করে, তবে এটি নিরাপত্তার জন্য ঝুঁকি তৈরি করতে পারে। সাধারণত এটি ব্যবহার করার সময় সতর্ক থাকতে হবে।'unsafe-eval': Eval ফাংশন ব্যবহার করার অনুমতি দেয়, যা XSS আক্রমণের জন্য ঝুঁকি সৃষ্টি করতে পারে। এটি ব্যবহার না করার পরামর্শ দেওয়া হয়।
৪. CSP-র সাথে Reporting (CSP Report Only Mode)
CSP হেডারের Report-Only মোড ব্যবহার করলে আপনি দেখতে পারবেন যে কোন রিসোর্স লোড করার চেষ্টা করা হয়েছে যা আপনার CSP পলিসি লঙ্ঘন করছে, কিন্তু তা সত্ত্বেও রিসোর্সগুলো ব্লক করা হবে না। এর মাধ্যমে আপনি নিরাপত্তা সমস্যাগুলি চিহ্নিত করতে পারবেন এবং পরে এগুলো নিয়ে কাজ করতে পারবেন।
// middleware.js
export function middleware(request) {
const response = NextResponse.next()
// CSP Report-Only মোড
response.headers.set(
'Content-Security-Policy-Report-Only',
"default-src 'self'; report-uri /api/csp-violation-report-endpoint;"
)
return response
}
ব্যাখ্যা:
report-uri: এই ইউআরএলটির মাধ্যমে আপনি সেগুলো চিহ্নিত করতে পারবেন, যেখানে CSP পলিসি ভঙ্গ হয়েছে।- এটি আপনাকে CSP Violations ট্র্যাক করতে এবং তা রিপোর্ট করতে সাহায্য করবে।
৫. CSP হেডার রিভিউ এবং টেস্টিং
CSP হেডার কনফিগার করার পর এটি সঠিকভাবে কাজ করছে কিনা তা যাচাই করা গুরুত্বপূর্ণ। আপনি Google CSP Evaluator ব্যবহার করে আপনার CSP হেডার যাচাই করতে পারেন, যা আপনার কনফিগারেশনটি নিরাপদ কি না তা পরীক্ষা করবে।
Content Security Policy (CSP) Next.js অ্যাপ্লিকেশনে এক ধরনের সিকিউরিটি ফিচার যা আপনার সাইটের রিসোর্সগুলোর সুরক্ষা নিশ্চিত করে। এই হেডার ব্যবহার করলে আপনি আপনার অ্যাপ্লিকেশনের নিরাপত্তা নিশ্চিত করতে পারবেন এবং XSS আক্রমণের মতো ঝুঁকি থেকে রক্ষা পেতে পারবেন।
Read more
