docs(examples/angular): Fix CSP issues with inline event handler scripts

codecentric · Aug 7, 2024 · 68908e0 · 68908e0
1 parent 01e47f6
commit 68908e0
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 5 deletions.
diff --git a/examples/angular/README.md b/examples/angular/README.md
@@ -9,6 +9,26 @@ This is a small Angular example app, which includes a `spa_config.js` to configu
 3. Declare `spaConfig` in the `window` object via the TypeScript definition file `/src/@types/spa_config.d.ts`
 4. Add `<script src="./spa_config.js"></script>` to `index.html`
 5. Add a `/config/default.yaml` configuration file to the image, which allows 'unsafe-inline' styles. (See `default-config.yaml`, [#angular/26152](https://github.com/angular/angular/issues/26152))
+6. [Disable inline event handler script for styles.](https://github.com/angular/angular-cli/issues/20864#issuecomment-1165769416):
+   * ```json
+     {
+       "...": "...",
+       "configurations": {
+         "production": {
+           "...": "...",
+           "optimization": {
+             "scripts": true,
+             "styles": {
+               "minify": true,
+               "inlineCritical": false
+             },
+             "fonts": true
+           }
+         },
+         "...": "..."
+       }
+     }
+     ```
 
 ## Build Dockerfile
 

diff --git a/examples/angular/angular.json b/examples/angular/angular.json
@@ -33,7 +33,7 @@
               "src/spa_config.js"
             ],
             "styles": [
-              "src/styles.sass"
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -46,7 +46,14 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                },
+                "fonts": true
+              },
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
@@ -96,7 +103,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.sass"
+              "src/styles.scss"
             ],
             "scripts": []
           }

diff --git a/examples/angular/src/app/app.component.sass b/examples/angular/src/app/app.component.sass
diff --git a/examples/angular/src/app/app.component.scss b/examples/angular/src/app/app.component.scss
@@ -0,0 +1,3 @@
+h1 {
+  margin-bottom: 10px;
+}
diff --git a/examples/angular/src/app/app.component.ts b/examples/angular/src/app/app.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.sass']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   title = window.spaConfig.appTitle;

diff --git a/examples/angular/src/styles.sass b/examples/angular/src/styles.sass
diff --git a/examples/angular/src/styles.scss b/examples/angular/src/styles.scss
@@ -0,0 +1,3 @@
+body {
+  margin: 10px;
+}