When developing for the web, I often find myself wanting to pass a few variables from the server scripts to my javascript - data pulled from a database, and set differently on different pages running basically the same code. (Typically, this is something along the lines of example.com/slideshows/1 needing to know that that slideshow 1 has 8 images, and what their urls are, but that's just a random example; I'm looking for a general answer.)My normal approach is to include a short block of inline javascript that sets a few global variables or calls some initializer functions, which is straightforward and effective. It is not, however, Content Security Policy-friendly, since inline javascript is blocked by default, and not without reason. (I know the policy can be set to allow inline javascript if you have access to it, but even if you do that opens potential security issues.) I need a strategy that plays nicely with proper CSPs.I know that it could be done with an ajax call, but that's overkill for something that only needs to be set once, and adds an extra call that slows down the page load. In some cases, like the slideshow I mentioned, this could be handled by having the javascript examine other dynamically-constructed page elements to reconstruct the desired data, which is fine, but not a very general solution. What's the best way to handle this?(I almost posted this question on SO, but it seems kind of subjective; I can think of ways to do this, I just don't like any of them.)
What's the Content-Security-Policy-friendly way to hand data from the server to the browser on page load?
web development;javascript