Fixed #4271 - Baseicon: Content Security Policy (CSP) violation

primefaces · Aug 18, 2023 · ebd0fa1 · ebd0fa1
1 parent 37979a7
commit ebd0fa1
Showing 1 changed file with 44 additions and 32 deletions.
diff --git a/components/lib/baseicon/BaseIcon.vue b/components/lib/baseicon/BaseIcon.vue
@@ -1,6 +1,42 @@
 <script>
+import { useStyle } from 'primevue/usestyle';
 import { ObjectUtils } from 'primevue/utils';
 
+const styles = `
+.p-icon {
+    display: inline-block;
+}
+
+.p-icon-spin {
+    -webkit-animation: p-icon-spin 2s infinite linear;
+    animation: p-icon-spin 2s infinite linear;
+}
+
+@-webkit-keyframes p-icon-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+
+@keyframes p-icon-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+`;
+
+const { load: loadStyle } = useStyle(styles, { name: 'baseicon', manual: true });
+
 export default {
     name: 'BaseIcon',
     props: {
@@ -13,6 +49,9 @@ export default {
             default: false
         }
     },
+    beforeMount() {
+        loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
+    },
     methods: {
         pti() {
             const isLabelEmpty = ObjectUtils.isEmpty(this.label);
@@ -29,38 +68,11 @@ export default {
                 'aria-hidden': isLabelEmpty
             };
         }
+    },
+    computed: {
+        $config() {
+            return this.$primevue?.config;
+        }
     }
 };
 </script>
-<style>
-.p-icon {
-    display: inline-block;
-}
-
-.p-icon-spin {
-    -webkit-animation: p-icon-spin 2s infinite linear;
-    animation: p-icon-spin 2s infinite linear;
-}
-
-@-webkit-keyframes p-icon-spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg);
-    }
-}
-
-@keyframes p-icon-spin {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg);
-    }
-}
-</style>