diff options
| author | Derick Montague <derick.montague@ibm.com> | 2020-07-15 05:20:29 +0300 |
|---|---|---|
| committer | Derick Montague <derick.montague@ibm.com> | 2020-10-23 00:13:55 +0300 |
| commit | 579cbdf4646fbdf8db2419ee046d812189894afc (patch) | |
| tree | d94a9f2051a7200573873a955319ff39c9a2deb6 | |
| parent | dd50d30d03aee5976b2085f4edec5e5b729d29f9 (diff) | |
| download | webui-vue-579cbdf4646fbdf8db2419ee046d812189894afc.tar.xz | |
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
| -rw-r--r-- | package-lock.json | 14 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | public/index.html | 1 | ||||
| -rw-r--r-- | src/components/Global/StatusIcon.vue | 20 | ||||
| -rw-r--r-- | vue.config.js | 6 |
5 files changed, 20 insertions, 23 deletions
diff --git a/package-lock.json b/package-lock.json index 0ff2ba2f..dc2daf48 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 1bc62f5b..bd8f11b5 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 022b9c31..c355ece4 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 bf58722a..4b2b47dd 100644 --- 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 index ca8e9f08..6cb0df7e 100644 --- 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', |