Flask使用Jinja2渲染数据库换行字段时出现JavaScript错误如何解决

错误原因 #

你碰到的语法错误本质是Jinja2默认的HTML自动转义仅处理<、>、&、"、'这几个HTML敏感字符，不会处理换行符。带换行的字符串直接塞入JS的双/单引号包裹的字符串中，会直接打断字符串结构，触发语法错误。

你尝试的方案的问题 #

• 用反引号模板字面量的方案虽然能临时解决换行问题，但安全风险极高：如果用户提交的内容包含${恶意JS代码}格式的字符串，会直接触发模板字符串注入，执行任意前端代码，完全不符合安全要求。
• 加safe过滤器的方案不仅解决不了换行问题，还会直接关闭HTML转义，引入高风险XSS漏洞，完全不可用。

正确修复方案 #

使用Jinja2内置的tojson过滤器传递变量，这是官方推荐的向JS传值的安全方案，写法如下：

const item = {{ item | tojson }};

方案优势： #

• tojson会自动将Python字符串转换为合法的JS字面量，自动转义换行符、引号、特殊字符，不需要你额外包裹任何引号，完美解决换行导致的语法错误。
• 默认自动做安全转义处理，不需要加safe过滤器，不会引入XSS漏洞，符合安全规范。

注意：不要在{{ item | tojson }}外面额外加单引号、双引号或者反引号，过滤器输出的结果本身就是合法的JS值，额外加引号反而会触发语法错误。

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