一、Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过给目标网站注入脚本，诱导用户点击，使得脚本最终在用户的浏览器上执行。为了和 CSS区分，改名为 XSS。
防范方法：CSP通用策略、HTML转义、过滤能够注入脚本的标签如 < script>、Cookie设置HttpOnly
修复xss问题建议统一步骤：
1、使用第三方库[email protected]，会自动转义<>等符号
import filterXSS from 'xss'; var html = filterXSS('<script>alert("xss");</scr' + 'ipt>'); alert(html);
2、如果是nextjs服务端渲染项目，会有水合过程，getStaticProps(服务端)与useRouter(客户端)都需要处理
二、Cross-site request forgery（跨站请求伪造）简称 CSRF，冒充用户在自动登录的网站上（带有Cookie），执行用户非本意的操作。
防范方法：
CSRF自动防御策略：同源检测（Origin 和 Referer 验证）。
CSRF主动防御措施：Token验证 或者 双重Cookie验证 以及配合Samesite Cookie。
保证页面的幂等性，后端接口不要在GET页面中做用户操作。
三、JavaScript包升级问题，在package.json添加resolutions对象，统一指定安全的依赖包
"resolutions": { "@mik-technology/new_core.theme": "0.0.8", "minimist": "1.2.6", "unset-value": "2.0.1", "nth-check": "2.1.1", "node-fetch": "2.6.7", "serialize-javascript": "3.1.0", "protobufjs": "6.11.3", "minimatch": "3.0.5", "moment": "2.29.4" },
四、安全部门配置next.config或nginx通用安全策略：
1、CSP白名单策略
CSP是防XSS的利器，可以把其理解为白名单，开发者通过设置CSP的内容，来规定浏览器可以加载的资源，CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。
default-src 'self' static.platform.michaels.com imgs.michaels.com akimages.shoplocal.com www.googletagmanager.com www.google-analytics.com optimize.google.com 'unsafe-inline' 'unsafe-eval' data:; 默认允许域名 connect-src *; 请求允许所有
备注：其他域名的静态文件需要转到static.platform.michaels.com
2、X-XSS-Protection旧浏览器XSS
当页面检测到反射的跨站点脚本 (XSS) 攻击时，此标头会阻止页面加载。Content-Security-Policy虽然当站点实施了对内联 JavaScript ( ) 使用的强禁用时，这种保护不是必需的'unsafe-inline'，但它仍然可以为不支持 CSP 的旧 Web 浏览器提供保护。
{ key: 'X-XSS-Protection', value: '1; mode=block' }
3、HSTS强制HTTPS
此标头通知浏览器它只能使用 HTTPS 访问，而不是使用 HTTP。使用下面的配置，所有当前和未来的子域将使用 HTTPS max-age2 年。这会阻止访问只能通过 HTTP 提供的页面或子域。
{ key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' }
4、X-Frame-Options框架iframe
此标头指示是否应允许该站点显示在iframe. 这可以防止点击劫持攻击。此标头已被 CSP 的frame-ancestors选项取代，该选项在现代浏览器中具有更好的支持。
{ key: 'X-Frame-Options', value: 'SAMEORIGIN' }
5、API权限策略
此标头允许您控制可以在浏览器中使用的功能和 API。它以前被命名为Feature-Policy. 您可以在此处查看权限选项的完整列表。
{ key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=(), interest-cohort=()' }
6、X-Content-Type-Options内容类型
Content-Type如果未明确设置标头，则此标头可防止浏览器尝试猜测内容的类型。这可以防止允许用户上传和共享文件的网站受到 XSS 攻击。例如，用户尝试下载图像，但将其视为不同Content-Type的可执行文件，这可能是恶意的。此标头也适用于下载浏览器扩展。此标头的唯一有效值是nosniff.
{ key: 'X-Content-Type-Options', value: 'nosniff' }
7、Referrer-Policy来源
此标头控制从当前网站（来源）导航到另一个网站时浏览器包含多少信息。您可以在此处阅读有关不同选项的信息。
{ key: 'Referrer-Policy', value: 'origin-when-cross-origin' }
标签：XSS,浏览器,value,此标头,Frontend,Security,com,CSP
From： https://www.cnblogs.com/jerry-mengjie/p/18165260