对包含的JSON进行字符串化<script> tags

Question

I'm trying to pass initial state from server to client by stringifying that state and storing it in global variable. Below is simplified version of what I'm doing.

// home.tsx
res.render('home', { appState: {script: '<script></script>'} });

// home.pug
doctype html
html
    head
        script.
            window.__initialState__ = !{JSON.stringify(appState)};
    body
        #root

Sadly the result looks like this

<script>window.__initialState__ = {"script":"<script></script>

which is not valid Javascript. My endgoal is to have server's appState object assigned to window.__initialState__.

Answer 1

The 1st part of your code is very confusing. However, as a general rule, you should always encode any HTML passed from the server to the client as string.

So you need to change the part of your server code that generated the line below:

let scriptObject = {script: '<script></script>'};

to this (assuming that you're using pug and node.js):

var htmlencode = require('htmlencode');
let scriptObject = {script: htmlencode.htmlEncode('<script></script>')};