前端对返回的json数据预防XSS攻击

在前端处理从后端接收到的JSON数据时，预防跨站脚本（XSS）攻击是一个非常重要的安全措施。XSS攻击可以通过注入恶意脚本到网页中，从而窃取用户信息或执行其他有害操作。以下是一些有效的方法来防止XSS攻击：

当将数据插入到HTML文档中时，应该根据数据放置的位置进行适当的编码：

• HTML内容：使用HTML实体编码，例如将 < 转换为 <。
• 属性值：先进行HTML实体编码，然后用双引号或单引号包围。
• JavaScript：转义特殊字符，如 \、’、”、< 和 >。
• URLs：使用URL编码。

为了预防XSS攻击，你可以对返回的JSON数据进行HTML转义处理。这里提供一个简单的JavaScript函数，用于转义字符串中的特殊字符，从而防止XSS攻击：

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '<',
    '>': '>',
    '"': '"',
    "'": '''
  };
  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

// 假设你有一个JSON对象
var jsonData = {
  message: "<script>alert('XSS');</script>"
};

// 转义JSON对象中的字符串值
for (var key in jsonData) {
  if (typeof jsonData[key] === 'string') {
    jsonData[key] = escapeHtml(jsonData[key]);
  }
}

// 输出转义后的JSON对象
console.log(jsonData);

XSS 有哪些注入的方法：

• 在 HTML 中内嵌的文本中，恶意内容以 script 标签形成注入。
• 在内联的 JavaScript 中，拼接的数据突破了原本的限制（字符串，变量，方法名等）。
• 在标签属性中，恶意内容包含引号，从而突破属性值的限制，注入其他属性或者标签。
• 在标签的 href、src 等属性中，包含 javascript: 等可执行代码。
• 在 onload、onerror、onclick 等事件中，注入不受控制代码。
• 在 style 属性和标签中，包含类似 background-image:url(“javascript:…”); 的代码（新版本浏览器已经可以防范）。
• 在 style 属性和标签中，包含类似 expression(…) 的 CSS 表达式代码（新版本浏览器已经可以防范）。

总之，如果开发者没有将用户输入的文本进行合适的过滤，就贸然插入到 HTML 中，这很容易造成注入漏洞。攻击者可以利用漏洞，构造出恶意的代码指令，进而利用恶意代码危害数据安全。