随着互联网技术的飞速发展,Web前端开发已经成为构建网站和应用程序的重要环节。然而,Web前端开发中存在许多安全问题,这些问题不仅会影响用户体验,还可能给企业和个人带来严重的经济损失。但是web前端安全方面技术包含的东西较多，我们这里着重聊一聊关于XSS 的危害与防范！

    XSS 的危害

    让我们简单谈谈 XSS 的危害。注入的脚本可能会进行 JavaScript 函数劫持，覆盖我们代码中原有的函数，修改 js 原型链上的函数，或在原函数基础上添加额外行为。例如，将网络请求的响应发送到攻击者的服务器。

    JavaScript 函数劫持是什么？它是在目标函数触发之前重写某个函数的过程。例如：

let _write = document.write.bind(document);

document.write = function(x) {

if(typeof(x) == "undefined") { return; }

_write(x);

    注入的脚本还可能对用户进行内存攻击。如果知道用户使用的浏览器、操作系统，攻击者就有可以实施一次精准的浏览器内存攻击。通过 XSS，可以读取浏览器的 UserAgent 对象。

alert(navigator.userAgent);

    该对象提供了客户端的信息，如操作系统版本：Mac OS X 10_15_7，浏览器版本：Chrome/114.0.0.0

    注入的脚本可能强制弹出广告页面、刷流量，也可能进行大量的 DDoS 攻击，导致网络拥塞。此外它还可能控制受害者的机器向其他网站发起攻击。

    如果信贷产品的网页存在 XSS 漏洞，黑客可以注入一段脚本，调用查询借还记录的接口，并将响应结果发送到自己的服务器。

    第三方统计脚本有机会窃取用户的敏感信息，如浏览历史、真实 IP、地理位置、设备信息，并将其传送给攻击者。此外AG网址AG95·CC我们使用的第三方依赖和 npm 包也有可能窃取用户信息。在这方面集团对代码进行了白盒扫描，已一定程度上规避问题。但最好我们在选择第三方包时，选择可信赖的包。

    XSS 防范方法

    XSS 防范方法通常有以下几种：

①慎防第三方内容：对于流行的统计脚本和第三方依赖，要谨慎使用。

②输入校验和输出编码：进行输入校验，包括长度限制、值类型是否正确以及是否包含特殊字符（如 <>）。同时，在输出时进行相应的编码，根据输出的位置选择适当的编码方式，如 HTML 编码和 URL 编码。

③使用 HttpOnly 属性：防范 XSS 攻击后的 "cookie 劫持"。

使用 Secure 属性，确保 Cookie 只在加密的 HTTPS 连接中传输，降低 "cookie 劫持" 的风险。

④避免使用 localStorage 存储敏感信息。

⑤使用 Content-Security-Policy（内容安全策略）：可以通过指定只允许加载来自特定域名的脚本，防范 XSS 攻击，例如，可以使用以下配置只允许加载来自 mjt.jd.com 域名的脚本

# 只允许加载来自特定域名的脚本

add_header Content-Security-Policy "script-src mjt.jd.com";