Web前端安全

一、Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过给目标网站注入脚本，诱导用户点击，使得脚本最终在用户的浏览器上执行。为了和 CSS区分，改名为 XSS。

防范方法：CSP通用策略、HTML转义、过滤能够注入脚本的标签如 < script>、Cookie设置HttpOnly

修复xss问题建议统一步骤：

1、使用第三方库xss@1.0.13，会自动转义<>等符号

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": {
"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"
},
四、通过next.config或nginx配置通用安全策略：

1、CSP白名单策略

CSP是防XSS的利器，可以把其理解为白名单，开发者通过设置CSP的内容，来规定浏览器可以加载的资源，CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。

const appNameArr = ['web-common', 'ssr-web', 'ssr-dc']; //nextjs脚手架添加项目名，不低于michaels-ssr@1.2.237
if (appNameArr.includes(app_name)) {
config.headers = async () => {
return [
{
// Apply these headers to all routes in your application.
source: '/:path*',
headers: securityHeaders,
},
];
};
}

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'
}