I'm working on a learning management system using Django and React, and I want to restrict video content so that only users enrolled in a specific course can access it. To do this, I'm trying to set up CloudFront signed cookies. However, whenever I make a request to CloudFront from my React app (using Video.js for ABR streaming), it seems that the cookies aren't being sent. I'm receiving the error message: 'Missing Key-Pair-Id query parameter or cookie value.' Here's how I'm setting the cookies from the Django backend: I'm using `response.set_cookie()` for each CloudFront cookie, ensuring that they're set to secure, HttpOnly, and have the SameSite attribute set to 'None'. In my React app, I'm also configuring Video.js to enable cookies on all XHR calls by setting `withCredentials: true`. Despite this, when there's a restriction in place, I can't seem to get past this error. Any suggestions on what's going wrong?
2 Answers
It looks like you're setting the cookies through your Django site, but remember that cookies are domain-specific. If your Django backend and CloudFront are on different domains, those cookies won’t be sent along with requests to CloudFront. You will either need to ensure the domains match or find another method to handle authentication for CloudFront requests.
Consider using pre-signed URLs instead of cookies. Cookies are tied to specific domains, and since you're working with multiple domains, this could be causing your issues. Generate S3 pre-signed URLs with a set expiration time (like an hour), and pass those to CloudFront to serve your media. Just keep in mind that if users really want to snag your content, they might still find a way, so this is more about discouraging casual access.
Related Questions
Glassmorphism CSS Generator with Live Preview
Remove Duplicate Items From List
EAN Validator
EAN Generator
Cloudflare Cache Detector
HTTP Status Code Check