Flask返回的JSON字符串前端无法转为对象，仅识别为字符串如何解决

为什么渲染结果中会出现'转义符 #

Flask默认开启Jinja2模板的自动HTML转义机制：所有渲染到HTML模板中的字符串内容，都会自动把HTML敏感字符转义为对应的实体编码，避免出现HTML结构断裂、XSS注入等安全问题。单引号'对应的HTML实体编码就是'，你把json.dumps生成的JSON字符串直接填充到<input>的value属性时，触发了这个自动转义逻辑。

你的JSON处理流程存在的问题 #

• 把原始JSON字符串直接放到HTML属性中是错误设计：经过HTML转义后的字符串已经不符合JSON语法规范，JSON解析器无法识别HTML实体编码，会把'解析为非法的'字符，所以直接执行JSON.parse会抛出语法错误。
• 客户端测试逻辑存在认知错误：JSON.stringify(document.getElementById("data_from_server").value)的作用是把已经拿到的转义后字符串再包裹一层JSON字符串，两次嵌套后执行JSON.parse只能拿到原始的转义后字符串，本质还是不符合JSON规范的内容，所以typeof返回string，这个操作完全无法解决根本问题。

可行修复方案 #

1. 关闭对应变量的自动转义：如果你的JSON内容不存在用户可控的恶意输入，可以在模板渲染时使用Jinja2的safe过滤器关闭转义，注意value属性用单引号包裹，避免和JSON内部的双引号冲突：

<input type="hidden" id="data_from_server" value='{{ your_json_str|safe }}'>

2. 更稳妥的做法是直接把JSON渲染到script标签中：不需要使用隐藏input中转，客户端可以直接拿到可用的JS对象，省去解析步骤：

<script>
const serverData = {{ your_json_str|safe }};
</script>

3. 如果必须保留隐藏input的实现：客户端拿到值后先做HTML实体解码，再执行JSON解析：

const rawValue = document.getElementById("data_from_server").value;
const decodedValue = new DOMParser().parseFromString(rawValue, 'text/html').documentElement.textContent;
const data = JSON.parse(decodedValue);

内容的提问来源于stack exchange，提问作者user63898