We are re-architecting some of our applications, and one of the requirements is to be able to adhere to content security policies that disallows inline scripts.

In general most of the event handlers and blocks of logic are already in external files, and moving the remaining stragglers isn't an issue, with the following exception.

We have settings that are stored in a SQL database, and we must make some of these values available to the .js files for the rendered HTML page.

Normally I'd do something like:

<script>
var ns.i = '<?= $i;?>',
    ns.j = '<?= $j;?>';
</script> 

Seems to me I have these potential options:

1. Put the required values in an associative array, json_encode it, put it in a hidden form field. This feels like a hack to me, but also the simplest from my perspective.
2. Create a div tag and put all the values in HTML 5 data attributes.
3. Create a form and put the values into hidden form fields.
4. Generate a nonce and set the nonce attribute on the script tag, and set the CSP header nonce.

I have thus far been unable to locate recommendations or documented best practices for this type of thing.

refactoring this code is a lot of work and I want to do my best to ensure we're doing it the best way possible at this time.