跨站请求伪造（CSRF）一直是Web安全领域的重灾区。传统的防护手段多集中在后端校验Token或校验Referer字段，但随着前端工程化复杂度的提升，单纯依赖后端防御已经显得捉襟见肘。Webpack 5 作为现代前端构建工具的集大成者，不仅优化了打包性能，更在安全防护层面迈出了重要一步。它通过引入一系列构建期安全策略，帮助开发者在代码编译和打包阶段就植入防护机制，从而大幅降低运行时遭受跨站请求伪造攻击的风险。
理解 CSRF 攻击原理与 Webpack 5 的防护切入点
CSRF 攻击的核心在于攻击者诱导用户在已登录的情况下，向目标网站发送非本意的请求。在传统的单体应用中，这通常通过构造隐藏表单或图片标签来实现。然而在微前端和模块化盛行的今天，攻击者可能会通过劫持外部脚本或恶意篡改依赖包来发起跨站请求。Webpack 5 敏锐地捕捉到了这一变化，其防护切入点不再局限于运行时的表单提交，而是延伸到了静态资源的加载和模块的组装过程。
在 Webpack 5 中，通过配置 output.trustedTypes 属性，构建工具可以在打包阶段自动为生成的代码块添加安全包装。这意味着所有通过 Webpack 打包出来的模块，在注入到 DOM 时都会受到浏览器的 Trusted Types API 的约束。这种机制直接切断了攻击者通过 innerHTML 或 eval 等危险 API 注入恶意请求的路径，从构建源头实现了防伪造拦截。
此外，Webpack 5 对动态加载的 chunk 文件也进行了安全加固。当使用 import() 语法进行代码分割时，Webpack 5 能够确保这些异步加载的脚本只能从受信任的源获取。如果检测到请求来源与配置的受信任源不匹配，浏览器将直接拒绝执行该脚本，从而有效防止了通过篡改动态路由发起的 CSRF 攻击。
利用 Trusted Types 策略阻断恶意脚本注入
Trusted Types 是现代浏览器提供的一项重要安全特性，它要求所有可能触发跨站脚本或跨站请求的 DOM 操作必须使用经过特殊处理的安全对象。Webpack 5 原生支持了这一特性，开发者只需在配置文件中开启相应选项，即可让整个项目的构建产物默认遵循安全规范。这解决了以往手动修改每一处 DOM 操作带来的高昂维护成本问题。
具体配置方法非常简单，在 webpack.config.js 中，我们需要引入相关的插件或配置项。以下代码展示了如何启用 Trusted Types 策略，并指定一个策略名称，这个名称将作为浏览器识别合法注入操作的凭证。
// webpack.config.js
module.exports = {
output: {
trustedTypes: {
policy: 'webpack-policy',
// 允许特定的脚本通过策略检查
requireTrustedTypesFor: 'script'
}
},
// 其他配置...
};
开启此配置后，Webpack 5 在打包时会将所有内联脚本和动态样式表转换为符合 Trusted Types 规范的格式。如果攻击者试图通过 XSS 漏洞向页面注入一个隐藏的表单来发起 CSRF 请求，浏览器会因为该表单的注入不符合 Trusted Types 策略而直接阻断操作。这种将安全防线前移至构建期的做法，极大减轻了运行时的防御压力。
配置 Content Security Policy 与构建产物的深度整合
除了 Trusted Types，Content Security Policy（CSP）也是防御 CSRF 和 XSS 的利器。CSP 通过设置 HTTP 响应头，明确告诉浏览器哪些外部资源可以加载和执行。Webpack 5 提供了与 CSP 深度整合的能力，特别是在处理 SRI（Subresource Integrity）时，能够自动为打包生成的 JS 和 CSS 文件计算哈希值并注入到 HTML 中。
当我们在项目中使用 HtmlWebpackPlugin 时，Webpack 5 可以结合 Subresource Integrity 插件，自动在生成的 <script> 和 <link> 标签上添加 integrity 属性。这样一来，即使攻击者篡改了 CDN 上的静态资源文件，浏览器在比对哈希值失败后也会拒绝执行该文件，从而避免了恶意脚本利用合法身份发起跨站请求。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SubresourceIntegrityPlugin = require('webpack-subresource-integrity');
module.exports = {
output: {
crossOriginLoading: 'anonymous'
},
plugins: [
new SubresourceIntegrityPlugin({
hashFuncNames: ['sha256', 'sha384'],
enabled: true
}),
new HtmlWebpackPlugin({
// HTML 模板配置
template: './src/index.html'
})
]
};
值得注意的是，开启 SRI 要求所有的静态资源必须开启 CORS 支持，即配置 crossOriginLoading 为 anonymous。这确保了浏览器在请求资源时会携带正确的跨域头部，使得哈希校验机制能够顺利运作。通过这种构建期的哈希注入，Webpack 5 为前端应用加上了一道坚固的物理锁，使得基于资源篡改的 CSRF 攻击彻底失效。
综合来看，Webpack 5 在 CSRF 防护上的新特性并非单一的功能点，而是一套组合拳。从 Trusted Types 的 DOM 操作约束，到 SRI 的资源完整性校验，再到对动态模块加载的安全控制，这些构建期的安全策略共同构筑了一道坚实的防线。开发者应当充分利用这些特性，将安全防护融入到持续集成和交付的流程中，从而在保障应用性能的同时，大幅提升整体的安全水位。