fix security to be able to download png

frontend/nuxt.config.ts

@@ -40,11 +40,11 @@ export default defineNuxtConfig({
     defaultLocale: 'en', // not needed if you have @nuxtjs/i18n installed
   },
   security: {
-    // csrf: {
-    //   // https: false,
-    //   addCsrfTokenToEventCtx: true,
-    //   cookieKey: 'csrftoken',
-    // }
+    headers: {
+      contentSecurityPolicy: {
+        "img-src": ["'self'", "data:", "blob:"]
+      }
+    }
   },
   vuetify: {
     vuetifyOptions: {

frontend/pages/analyses/[analysisId].vue

@@ -20,16 +20,6 @@ const { serialize } = useSerialize()
 const { rasterize } = useRasterize()
 const { download } = useDownloadBlob()
 
-useHead
-  ({
-    meta: [
-      {
-        "http-equiv": "Content-Security-Policy",
-        content: "img-src * 'self' blob: blob:http: data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *"
-      }
-    ],
-  })
-
 const analysisId = computed(() => {
   if (Array.isArray(route.params.analysisId)) return null
   return parseInt(route.params.analysisId)
@@ -471,22 +461,27 @@ useHead({
     <v-card>
       <v-toolbar density="compact" class="pr-2">
         <v-toolbar-title>{{ analysis.name }}</v-toolbar-title>
-        <v-btn color="primary" prepend-icon="mdi-download" :href="getResultArchiveUrl(analysis.id)">Download
-          all results</v-btn>
         <v-menu>
           <template v-slot:activator="{ props }">
-            <v-btn color="primary" prepend-icon="md:download" v-bind="props">
-              export
+            <v-btn color="primary" prepend-icon="md:download" class="mr-2" v-bind="props">
+              Export
             </v-btn>
           </template>
           <v-list>
-            <v-list-item value="svg">
-              <v-list-item-title @click="downloadSvg(figureRef, 'df-systems-distribution.svg')">to
+            <v-list-item v-if="analysis !== null" prepend-icon="mdi-archive" value="archive">
+              <v-list-item-title @click="getResultArchiveUrl(analysis.id)">Download all results
+              </v-list-item-title>
+            </v-list-item>
+            <v-divider></v-divider>
+            <v-list-subheader>Images</v-list-subheader>
+            <v-list-item prepend-icon="mdi-svg" value="svg">
+              <v-list-item-title @click="downloadSvg(figureRef, `df-results-${analysis.name}.svg`)">to
                 svg</v-list-item-title>
 
             </v-list-item>
-            <v-list-item value="png">
-              <v-list-item-title @click="downloadPng(figureRef, 'df-systems-distribution.png')">to
+            <v-list-item prepend-icon="mdi-image" value="png">
+
+              <v-list-item-title @click="downloadPng(figureRef, `df-results-${analysis.name}.png`)">to
                 png</v-list-item-title>
             </v-list-item>
           </v-list>

frontend/pages/analyses/[analysisId]/genes.vue

@@ -3,15 +3,6 @@ import { useFetch, useRoute, computed } from "#imports";
 import type { GenesOut } from "~/types";
 const route = useRoute();
 
-// useHead
-//   ({
-//     meta: [
-//       {
-//         "http-equiv": "Content-Security-Policy",
-//         content: "img-src * 'self' blob: data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *"
-//       }
-//     ],
-//   })
 
 
 const { data: genes, error } = await useAPI<GenesOut>(

frontend/pages/analyses/[analysisId]/hmmer.vue

@@ -9,15 +9,7 @@ const { data: hmmers, error } = await useAPI<HmmersOut>(
     `/analysis/${route.params.analysisId}/hmmers`
 );
 
-// useHead
-//   ({
-//     meta: [
-//       {
-//         "http-equiv": "Content-Security-Policy",
-//         content: "img-src * 'self' blob: data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *"
-//       }
-//     ],
-//   })
+
 if (error.value) {
     throw createError({ message: `Error while getting the list of hmmer for analysis ${route.params.analysisId}` })
 }

frontend/pages/analyses/[analysisId]/systems.vue

@@ -8,17 +8,6 @@ const { data: systems, error } = await useAPI<SystemsOut>(
   `/analysis/${route.params.analysisId}/systems`
 );
 
-
-// useHead
-//   ({
-//     meta: [
-//       {
-//         "http-equiv": "Content-Security-Policy",
-//         content: "img-src * 'self' blob: data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *"
-//       }
-//     ],
-//   })
-
 if (error.value) {
   throw createError({ message: `Error while getting the list systems for analysis ${route.params.analysisId}` })
 }