Since the content, in our case, represents a complex object, in order to apply quotes we need to perform server-side serialization followed by client-side deserialization. In ColdFusion, it would look something like this:
To see this in action, I've tried to embed a payload that has some potentially malicious data:
As you can see, we safely embedded a JSON payload in the ColdFusion page response.
Now, to be clear, this safely transported untrusted user-provided content from the server to the client; but, it doesn't guarantee that the embedded values are safe to use within your Single-Page Application. Additional care must be taken when rendering user-provided content once it's in the SPA context. For example, if we then take the embedded configuration data and write it to the active document, bad things may happen:
Running this code does expose a vulnerability:
Anyway, this was mostly a note-to-self. But, hopefully other developers may find it helpful. And, as a caveat, I am not a web security expert by any means. As such, trust but verify that what I'm saying here makes sense.
Ironically enough, the demo code in this post has escaping issues.
You will see that two of the lines in the script-testing key look the
same. Well, they weren't the same - the second one used
> style encoding. Which,
somewhere along the path of my publishing pipeline, got unescaped.
Just goes to show how tricky it is to deal with all this stuff.
Just a quick follow-up to this post. Once you embed your JSON payload in the page response, you're going to want to consume it in some way. Since I use Angular, I wanted to look at how to pull this kind of configuration into my Angular bootstrapping process: