feat(routing): add UI Router visualizer. Adapt CSP img-src directive …

…to allow png images from UI Router visualizer
NationalBankBelgium · Feb 19, 2018 · 3bc995b · 3bc995b
1 parent 24b70d4
commit 3bc995b
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 2 deletions.
diff --git a/dist/packages/stark-build/config/webpack.dev.js b/dist/packages/stark-build/config/webpack.dev.js
@@ -50,7 +50,7 @@ module.exports = function () {
     "form-action 'self' " + webpackCustomConfig["cspFormAction"],
     "frame-src 'self'",   // deprecated. Use child-src instead. Used here because child-src is not yet supported by Firefox. Remove as soon as it is fully supported
     "frame-ancestors 'none'",  // the app will not be allowed to be embedded in an iframe (roughly equivalent to X-Frame-Options: DENY)
-    "img-src 'self'",
+    "img-src 'self' data: image/png", // data: image/png is due to ui-router visualizer loading PNG images
     "media-src 'self'",
     "object-src 'self'",
     "plugin-types application/pdf",  // valid mime-types for plugins invoked via <object> and <embed>

diff --git a/dist/packages/stark-build/nationalbankbelgium-stark-build-0.0.0-PLACEHOLDER.tgz b/dist/packages/stark-build/nationalbankbelgium-stark-build-0.0.0-PLACEHOLDER.tgz
diff --git a/packages/build/config/webpack.dev.js b/packages/build/config/webpack.dev.js
@@ -50,7 +50,7 @@ module.exports = function () {
     "form-action 'self' " + webpackCustomConfig["cspFormAction"],
     "frame-src 'self'",   // deprecated. Use child-src instead. Used here because child-src is not yet supported by Firefox. Remove as soon as it is fully supported
     "frame-ancestors 'none'",  // the app will not be allowed to be embedded in an iframe (roughly equivalent to X-Frame-Options: DENY)
-    "img-src 'self'",
+    "img-src 'self' data: image/png", // data: image/png is due to ui-router visualizer loading PNG images
     "media-src 'self'",
     "object-src 'self'",
     "plugin-types application/pdf",  // valid mime-types for plugins invoked via <object> and <embed>

diff --git a/starter/package.json b/starter/package.json
@@ -96,6 +96,7 @@
     "@nationalbankbelgium/angular-mdi-svg": "1.5.0",
     "@nationalbankbelgium/stark-build": "file:../dist/packages/stark-build/nationalbankbelgium-stark-build-0.0.0-PLACEHOLDER.tgz",
     "@uirouter/angular": "1.0.1",
+    "@uirouter/visualizer": "6.0.0",
     "core-js": "2.5.3",
     "http-server": "^0.10.0",
     "ie-shim": "^0.1.0",

diff --git a/starter/src/app/router.config.ts b/starter/src/app/router.config.ts
@@ -1,4 +1,5 @@
 import { UIRouter, Category, StateDeclaration } from '@uirouter/core';
+import { Visualizer } from '@uirouter/visualizer';
 
 function logRegisteredStates(registeredstates: StateDeclaration[]) {
     let message: string = '=============  Registered Ui-Router states: ==============\n';
@@ -17,6 +18,7 @@ function logRegisteredStates(registeredstates: StateDeclaration[]) {
 
 export function routerConfigFn(router: UIRouter) {
     router.trace.enable(Category.TRANSITION);
+    router.plugin(Visualizer);
 
     logRegisteredStates(router.stateService.get());
 }