Angular 16构建后CSS相对路径引入的PRSSI漏洞修复方案咨询

以下是几种无需手动修改index.html、适配CI/CD流程的配置方式：

1. 修改angular.json配置文件 #

在项目的angular.json中，找到对应项目的构建配置，设置baseHref为根路径"/"：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "/",
            // 保留其他原有配置
          }
        }
      }
    }
  }
}

设置完成后执行生产构建，Angular会自动将所有资源（包括样式、脚本）的引用路径改为根路径开头，生成的index.html中样式标签会变成：

<link rel="stylesheet" href="/styles-CXBDUENS.css" />

2. 构建命令中添加--base-href参数 #

如果不想修改配置文件，可直接在生产构建命令中指定根路径参数，适合CI/CD中动态执行：

ng build --configuration production --base-href="/"

这条命令会临时覆盖配置文件中的baseHref设置，构建后同样生成根路径的资源引用。

3. 配置deployUrl（针对特殊部署场景） #

若你的静态资源部署在独立根路径或CDN上，可设置deployUrl来控制资源引用路径：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "deployUrl": "/",
            // 保留其他原有配置
          }
        }
      }
    }
  }
}

注意：如果只是普通的根路径部署，使用baseHref即可满足需求。

完成上述任一配置后，生产构建生成的dist文件无需手动修改，直接适配CI/CD自动化流程。

内容的提问来源于stack exchange，提问作者Saurabh Tiwari