Resolve Content-Security-Policy error

derick-montague · rfrandse · commit c2e6c689fba9 · 2022-06-30T15:25:27.000-05:00
In Firefox there was an no unsafe eval error which was caused when users had the vue dev tools extenstion installed and enabled. The other issue was the loading of a resrouce at inline (style-src) which was caused by the SVG icons coming from the Carbon icons vue library. - Updated the Carbon icons to the latest version to resolve the CSP issue. - Remove chainwebpack option only used for prefecth as this is not needed. Originally this was an issue when using code splitting. Changing how we import views for routes and creating a single bundle removes the need for this option. - Update how fill color is applied to StatusIcon component. The Carbon icons update results in adding the fill property to the svg container does not cascade resulting in all icons rendering as their default fill color. GitHub Issue: openbmc#32 Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I4846f80c993c129d5e88fceda13d53fab51d7c8a
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
-    "@carbon/icons-vue": "10.6.1",
+    "@carbon/icons-vue": "10.19.0",
     "@novnc/novnc": "1.2.0",
     "axios": "0.19.0",
     "bootstrap": "4.4.1",
diff --git a/public/index.html b/public/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta http-equiv="Content-Security-Policy">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
@@ -36,24 +36,26 @@ export default {
 <style lang="scss" scoped>
 .status-icon {
   vertical-align: text-bottom;
+
   &.info {
-    fill: theme-color('info');
+    color: theme-color('info');
   }
   &.success {
-    fill: theme-color('success');
+    color: theme-color('success');
   }
   &.danger {
-    fill: theme-color('danger');
+    color: theme-color('danger');
   }
   &.secondary {
-    fill: gray('600');
-
-    svg {
-      transform: rotate(-45deg);
-    }
+    color: gray('600');
+    transform: rotate(-45deg);
   }
   &.warning {
-    fill: theme-color('warning');
+    color: theme-color('warning');
+  }
+
+  svg {
+    fill: currentColor;
   }
 }
 </style>
diff --git a/vue.config.js b/vue.config.js
@@ -85,12 +85,6 @@ module.exports = {
       );
     }
   },
-  chainWebpack: config => {
-    if (process.env.NODE_ENV === 'production') {
-      config.plugins.delete('prefetch');
-      config.plugins.delete('preload');
-    }
-  },
   pluginOptions: {
     i18n: {
       localeDir: 'locales',
