Challenge 21: Suggestion for the solution's description #6
Description
I tried the steps given in the solution but I still kept hitting a CORS issue (on Firefox). As I tried to debug what was wrong, I learned something that I felt readers could benefit from when they try out the solution steps for this challenge.
Visit the ./cors-exploit.html file in the same web browser
Opening cors-exploit.html in the same browser (by dragging and dropping the file into the browser) with main.js running on a separate tab still throws a CORS error because the browser opens the html file with the file:// protocol and this causes the browser to send the 'null' origin in the CORS request. Modern browsers have additional security restrictions for file:// origins making credentialed cross-origin requests.
To get around this issue, I spun up a python http server in the challenge directory like python3 -m http.server 8083, and accessed cors-exploit.html on localhost port 8083 to successfully get the api-key (see the final screenshot) in the browser console. I feel like the solution can benefit from mentioning this extra step about accessing the cors-exploit.html file from a different local server that simulates a cross-origin request.
Screenshots -
Seeing the CORS issue when accessing cors-exploit.html from filesystem
Null origin problem
Accessing cors-exploit.html via the python server