Bug 38365: Set __webpack_nonce__ for style-loader plugin and fix fontawesome imports

By setting __webpack_nonce__ webpack/rspack will add the nonce to styles
added using style-loader plugin.

Also, stop fontawesome from auto injecting CSS elements, and instead
manually import them so that they can be picked up by style-loader

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-close.inc

@@ -8,6 +8,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="csrf-token" content="[% Koha.GenerateCSRF | $raw %]" />
 [% IF logged_in_user %]<meta name="generator" content="Koha [% Koha.Version.maintenance | html %]" />[% END %]
+<script nonce="[% Koha.CSPNonce | $raw %]">
+    window.__CSP_NONCE__ = "[% Koha.CSPNonce | $raw %]";
+</script>
 [%# Prevent XFS attacks -%]
 [% UNLESS popup %]
     <style id="antiClickjack">

koha-tmpl/intranet-tmpl/prog/js/vue/csp-nonce.js

@@ -0,0 +1 @@
+__webpack_nonce__ = window.__CSP_NONCE__;

koha-tmpl/intranet-tmpl/prog/js/vue/modules/acquisitions.ts

@@ -2,7 +2,9 @@ import { createApp } from "vue";
 import { createWebHistory, createRouter } from "vue-router";
 import { createPinia } from "pinia";
 
-import { library } from "@fortawesome/fontawesome-svg-core";
+import { config, library } from "@fortawesome/fontawesome-svg-core";
+config.autoAddCss = false;
+import "@fortawesome/fontawesome-svg-core/styles.css";
 import {
     faEye,
     faEyeSlash,

koha-tmpl/intranet-tmpl/prog/js/vue/modules/admin/record_sources.ts

@@ -2,7 +2,9 @@ import { createApp } from "vue";
 import { createPinia } from "pinia";
 import { createWebHistory, createRouter } from "vue-router";
 
-import { library } from "@fortawesome/fontawesome-svg-core";
+import { config, library } from "@fortawesome/fontawesome-svg-core";
+config.autoAddCss = false;
+import "@fortawesome/fontawesome-svg-core/styles.css";
 import {
     faPlus,
     faMinus,

koha-tmpl/intranet-tmpl/prog/js/vue/modules/erm.ts

@@ -2,7 +2,9 @@ import { createApp } from "vue";
 import { createWebHistory, createRouter } from "vue-router";
 import { createPinia } from "pinia";
 
-import { library } from "@fortawesome/fontawesome-svg-core";
+import { config, library } from "@fortawesome/fontawesome-svg-core";
+config.autoAddCss = false;
+import "@fortawesome/fontawesome-svg-core/styles.css";
 import {
     faList,
     faPlus,

koha-tmpl/intranet-tmpl/prog/js/vue/modules/preservation.ts

@@ -2,7 +2,9 @@ import { createApp } from "vue";
 import { createWebHistory, createRouter } from "vue-router";
 import { createPinia } from "pinia";
 
-import { library } from "@fortawesome/fontawesome-svg-core";
+import { config, library } from "@fortawesome/fontawesome-svg-core";
+config.autoAddCss = false;
+import "@fortawesome/fontawesome-svg-core/styles.css";
 import {
     faPlus,
     faMinus,

koha-tmpl/intranet-tmpl/prog/js/vue/modules/sip2.ts

@@ -2,7 +2,9 @@ import { createApp } from "vue";
 import { createWebHistory, createRouter } from "vue-router";
 import { createPinia } from "pinia";
 
-import { library } from "@fortawesome/fontawesome-svg-core";
+import { config, library } from "@fortawesome/fontawesome-svg-core";
+config.autoAddCss = false;
+import "@fortawesome/fontawesome-svg-core/styles.css";
 import {
     faPlus,
     faMinus,

rspack.config.js

@@ -19,15 +19,30 @@ module.exports = [
             },
         },
         entry: {
-            erm: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/erm.ts",
-            preservation:
+            erm: [
+                "./koha-tmpl/intranet-tmpl/prog/js/vue/csp-nonce.js",
+                "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/erm.ts",
+            ],
+            preservation: [
+                "./koha-tmpl/intranet-tmpl/prog/js/vue/csp-nonce.js",
                 "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/preservation.ts",
-            "admin/record_sources":
+            ],
+            "admin/record_sources": [
+                "./koha-tmpl/intranet-tmpl/prog/js/vue/csp-nonce.js",
                 "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/admin/record_sources.ts",
-            acquisitions:
+            ],
+            acquisitions: [
+                "./koha-tmpl/intranet-tmpl/prog/js/vue/csp-nonce.js",
                 "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/acquisitions.ts",
-            islands: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts",
-            sip2: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/sip2.ts",
+            ],
+            islands: [
+                "./koha-tmpl/intranet-tmpl/prog/js/vue/csp-nonce.js",
+                "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts",
+            ],
+            sip2: [
+                "./koha-tmpl/intranet-tmpl/prog/js/vue/csp-nonce.js",
+                "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/sip2.ts",
+            ],
         },
         output: {
             filename: "[name].js",
@@ -102,7 +117,10 @@ module.exports = [
             outputModule: true,
         },
         entry: {
-            islands: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts",
+            islands: [
+                "./koha-tmpl/intranet-tmpl/prog/js/vue/csp-nonce.js",
+                "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts",
+            ],
         },
         output: {
             filename: "[name].esm.js",
@@ -169,8 +187,10 @@ module.exports = [
     },
     {
         entry: {
-            "api-client.cjs":
+            "api-client.cjs": [
+                "./koha-tmpl/intranet-tmpl/prog/js/vue/csp-nonce.js",
                 "./koha-tmpl/intranet-tmpl/prog/js/fetch/api-client.js",
+            ],
         },
         devtool: false,
         output: {