Serving static resources with Flask - running afoul of Same-origin policy

Question

I’m having trouble serving static files (image assets, etc.) for a small game I’m working on in Phaser. I’m using flask-socketio on the server (and socket.io on the client-side) for networking which is why I’m trying to get this working under Flask. As far as I can tell, I must use Flask to serve the static resources because otherwise I run into the problem of the Same-origin policy.

Indeed, I tried serving the assets with nginx on a different port but I got this message in my browser console (Safari in this case): SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.

I looked in the Flask documentation on how to serve static files and it said to use “url_for.” However, that only works for HTML template files. I’m trying to load the static resources inside my javascript code using the Phaser engine like so (just for example):

this.load.image('player', 'assets/player.png’);   //this.load.image('player’, url);

where I cannot obviously use ‘url_for’ since it’s not a template file but javascript code.

So my question is, how do I serve my static resources so that I don’t violate the same-origin policy?

1. Is there another secure way to serve static resources in Flask besides using ‘url_for’?
2. Or should I be using nginx as a reverse proxy? In the flask-socketio documentation I found this nginx configuration snippet: Flask-SocketIO documentation (please scroll down to where it says "Using nginx as a WebSocket Reverse Proxy”)

Regarding #2, I don’t quite understand how that should work. If I should be doing #2, can someone kindly explain how I should configure nginx if Flask is listening on port 5000? Where in that snippet do I configure the path to my static assets on the filesystem? And in my javascript code, what url path do I use to reference the assets?

Answer 1

Normally, one would set up Nginx (or some other general web server) on the "main" port, and then configure it to forward certain requests to your application server (in this case, Flask) on a secondary port which is invisible/unknown to the client browser. Flask would provide the result to Nginx which would then forward the result to the user.

This is called a reverse-proxy, and Nginx is widely considered a good choice for this setup. In this way, all files are served to the client by Nginx, so the client doesn't notice that some of them actually come from your application server.

This is good from an architectural standpoint, because it isolates your webapp (somewhat) from the client, and allows it to conserve resources, e.g. by not serving static files and by having Nginx cache some of the webapp's results when it makes sense to do so.

If you're doing development, this may seem like a lot of overhead; but for production it makes a lot more sense. However, it is a good idea to have your dev environment mimic your prod environment as closely as possible.