Challenge 21: Suggestion for the solution's description #6

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