This may be the head-on. I ran DAST report for my angular(v-15) app. Found the below CSP vulnerabilities in my app.
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"artex-ui": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "../dist/artex-ui",
"index": "src/index.html",
"main": "src/main.ts",
"baseHref": "/artex/",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "4mb",
"maximumError": "8mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kb",
"maximumError": "10kb"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "artex-ui:build:production"
},
"development": {
"browserTarget": "artex-ui:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "artex-ui:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"main": "src/test.ts",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"cli": {
"analytics": "5f9fd60f-a143-4804-b22f-f76b8ef82330"
}
}
package.json
{
"name": "artex-api",
"version": "2.0.0",
"description": "For artex-api folder",
"main": "app.js",
"scripts": {
"ng": "ng",
"server-start": "node ../dist/artex-api/app.js",
"prod-build": "ng build --configuration production --watch --prod --aot --base-href /artex/",
"dev-build": "ng build --watch --aot --base-href /artex/",
"local-build": "ng build --watch --aot --base-href /artex/",
"dev-start": "start npm run dev-build && start npm run server-start",
"prod-start": "start npm run prod-build && start npm run server-start",
"local-start": "start npm run local-build && start npm run server-start",
"ng:bump-version:dev": "gulp ng-bump-version --configuration=dev",
"build": "ng build --configuration production --base-href /artex/",
"test": "ng testng test --code-coverage",
"lint": "ng lint",
"e2e": "ng e2e",
"format:lint": "prettier -l "src/**/*.{ts,json,less,html}"",
"format:fix": "prettier --write "src/**/*.{ts,json,less,html}"",
"preinstall": "npx force-resolutions",
"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
"sonar": "sonar-scanner"
},
"engines": {
"node": "16.x"
},
"author": "",
"license": "ISC",
"dependencies": {
"@angular-material-components/datetime-picker": "^16.0.1",
"@angular-material-components/moment-adapter": "^16.0.1",
"@angular/animations": "^15.2.7",
"@angular/cdk": "^15.2.7",
"@angular/common": "^15.0.0",
"@angular/compiler": "^15.0.0",
"@angular/core": "^15.0.0",
"@angular/forms": "^15.0.0",
"@angular/material": "^15.2.7",
"@angular/material-moment-adapter": "^16.1.7",
"@angular/platform-browser": "^15.0.0",
"@angular/platform-browser-dynamic": "^15.0.0",
"@angular/router": "^15.0.0",
"@fortawesome/angular-fontawesome": "^0.12.1",
"@okta/okta-angular": "6.1",
"@okta/okta-auth-js": "7.2",
"ag-grid-angular": "^28.2.0",
"ag-grid-community": "^28.2.0",
"ag-grid-enterprise": "^28.2.0",
"bn-ng-idle": "^2.0.5",
"bootstrap": "^5.2.3",
"express": "^4.18.2",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-junit-reporter": "^2.0.1",
"karma-sonarqube-reporter": "^1.4.0",
"lodash": "^4.17.21",
"mat-select-autocomplete": "^1.3.0",
"ngx-cookie-service": "^16.0.1",
"ngx-mat-select-search": "^7.0.5",
"ngx-ui-loader": "^13.0.0",
"puppeteer": "^20.7.3",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^15.0.3",
"@angular/cli": "~15.0.3",
"@angular/compiler-cli": "^15.0.0",
"@types/jasmine": "~4.3.0",
"@types/lodash": "^4.14.195",
"jasmine-core": "~4.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"karma-junit-reporter": "^2.0.1",
"karma-sonarqube-reporter": "^1.4.0",
"sonar-scanner": "^3.1.0",
"typescript": "~4.8.2"
}
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Artex</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/images/artex.png">
<link rel="preload" as="style" onload="this.rel = 'stylesheet'" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="preload" as="style" onload="this.rel = 'stylesheet'" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://unpkg.com/default-passive-events"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Solutions tried so far:
-
Tried to add some CSP properties in angular.json. But after adding not able to run. Getting this error.
Error: Schema validation failed with the following errors: Data path "" must NOT have additional properties(csp). -
Added these meta tags. app crashed(i,e not rendered other 3rd party libraries).
2.1
<meta http-equiv="Content-Security-Policy" content=" default-src 'self'; script-src
'self' https://unpkg.com; style-src 'self' https://fonts.googleapis.com; font-src
https://fonts.gstatic.com;">
2.2
<meta http-equiv="Content-Security-Policy" content="style-src 'self'*.artex.com;
script- src 'self'*.artex.com;">
2.3
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src
'self' 'unsafe-inline'">