使内联JS配置对象符合CSP（CSP级别1）

Question

My web application (JS part) needs to be configured by the server before loading. Right now it is done in the following manner:

<script>
var configObj = {
setting1: "blah",
setting2: {val1: 1, val2:2},
};
</script>
<script src="myapp.js">

Config is request-specific and is inlined by server when html response is built. It works well, but it violates unsafe-inline Content-Security Policy rule.

unfortunately we can't just rely on CSP Level 2 (hashes/nonces), we are stuck with Level 1 for now. Is there a proved/recommended way of configuring client app in a CSP-compliant way?

So far I am thinking about embedding it into some DOM element as string and then JSON.parsing it. Are there any other (better) options?

Answer 1

• You can move all config options into data-* attributes and then read them in then script.
• If you're worried about the compatibility of nonces, you may find this article interesting.