前端安全Frontend Security

一、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": { "@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' }