Resolve Content-Security-Policy error
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: https://github.com/openbmc/webui-vue/issues/32
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I4846f80c993c129d5e88fceda13d53fab51d7c8a
diff --git a/package-lock.json b/package-lock.json
index 0ff2ba2..dc2daf4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1038,16 +1038,16 @@
}
},
"@carbon/icon-helpers": {
- "version": "10.4.0",
- "resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.4.0.tgz",
- "integrity": "sha512-52H97nT0Hv3mneNaDXBELt/shrO9AUZIpX5TuxRUcdva0xqLNnjhsLw0PTytjQRw3yNCLmDw8hOutzlReXCleQ=="
+ "version": "10.9.0",
+ "resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.9.0.tgz",
+ "integrity": "sha512-JtmCXV7iIc+N5RqQQy+MGT8T+5KcF7+BUKADvHnJKZ8o+ncF5gI4hmrP450dQD76mikI4fqQ0dQflaosesdSPw=="
},
"@carbon/icons-vue": {
- "version": "10.6.1",
- "resolved": "https://registry.npmjs.org/@carbon/icons-vue/-/icons-vue-10.6.1.tgz",
- "integrity": "sha512-z9Lp+9PpMCNmXr+uVJx6wOTD6PWYHnyYwmLTJQxm0Y4RHCJtJ9K2xNZTBejC40FbMgJTmtOFTILZ9F1YJp/d2w==",
+ "version": "10.19.0",
+ "resolved": "https://registry.npmjs.org/@carbon/icons-vue/-/icons-vue-10.19.0.tgz",
+ "integrity": "sha512-/wUkLiZhIkTiAo4FsFwl6WKspB27rJ+zCkgtpCtoQI83Iwz+Io2JugmQcyCLclHUj1jtjgul1FHwxzDc/kOYiQ==",
"requires": {
- "@carbon/icon-helpers": "10.4.0"
+ "@carbon/icon-helpers": "^10.9.0"
}
},
"@cnakazawa/watch": {
diff --git a/package.json b/package.json
index 1bc62f5..bd8f11b 100644
--- 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
index 022b9c3..c355ece 100644
--- 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
index bf58722..4b2b47d 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -36,24 +36,26 @@
<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
index ca8e9f0..6cb0df7 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -85,12 +85,6 @@
);
}
},
- chainWebpack: config => {
- if (process.env.NODE_ENV === 'production') {
- config.plugins.delete('prefetch');
- config.plugins.delete('preload');
- }
- },
pluginOptions: {
i18n: {
localeDir: 'locales',