[日常开发问题：1] 后端返回数据中因包含＜script＞等标签，导致前端显示报错

报错解释：

这个报错通常意味着前端在渲染从后端接收到的数据时，遇到了不被期望的字符，比如 <script> 标签。如果这些标签直接渲染到页面中，可能会导致跨站脚本攻击（XSS），因此浏览器会阻止这种行为，并显示一个错误，通常是“Refused to execute script because its MIME type ('text/html') is not executable”或者类似的消息。

解决方法：

1. 对于后端返回的数据，进行HTML转义处理。即将<、>、&、"、'、/等字符转换为对应的HTML实体，例如<转换为<，>转换为>等。

2. 如果是通过JSON返回数据，可以使用JSON.stringify()时的第二个参数来转义：

   
   
   
   const data = { text: "<script>alert('XSS')</script>" };
   const safeData = JSON.stringify(data, (key, value) => {
     if (typeof value === 'string') {
       return value.replace(/[&<>"'`/]/g, match => {
         return {
           '&': '&amp;',
           '<': '&lt;',
           '>': '&gt;',
           '"': '&quot;',
           "'": '&#039;',
           '/': '&#x2F;',
         }[match];
       });
     }
     return value;
   });
   // 发送safeData到前端

3. 如果是通过模板引擎渲染，确保使用模板引擎的转义功能。
4. 对于富文本内容，考虑使用可信内容（即已知不含有XSS攻击代码的内容）或者使用第三方库（如DOMPurify）来确保内容的安全性。

确保在前端渲染数据之前，对所有的输出进行适当的转义处理，以防止XSS攻击。