Avoid injection, use src to load html pages

Author: guerler

client/src/components/Dataset/DatasetDisplay.vue

@@ -34,8 +34,8 @@ const sanitizedToolId = ref();
 const { isAdmin } = storeToRefs(useUserStore());
 
 const dataset = computed(() => getDataset(props.datasetId));
-const datasetUrl = computed(() => withPrefix(`/dataset/display?dataset_id=${props.datasetId}`));
-const downloadUrl = computed(() => withPrefix(`${datasetUrl.value}&to_ext=${dataset.value?.file_ext}`));
+const datasetUrl = computed(() => `/datasets/${props.datasetId}/display`);
+const downloadUrl = computed(() => withPrefix(`${datasetUrl.value}?to_ext=${dataset.value?.file_ext}`));
 const isLoading = computed(() => isLoadingDataset(props.datasetId));
 
 const sanitizedMessage = computed(() => {
@@ -51,7 +51,7 @@ const sanitizedMessage = computed(() => {
 watch(
     () => props.datasetId,
     async () => {
-        const url = withPrefix(`/datasets/${props.datasetId}/display/?preview=True`);
+        const url = withPrefix(`${datasetUrl.value}?preview=True`);
         try {
             const { data, headers } = await axios.get(url);
             content.value = data;
@@ -98,7 +98,7 @@ watch(
                 </div>
                 <a :href="downloadUrl">Download</a>
             </div>
-            <CenterFrame v-if="contentType === 'text/html'" :html="content" />
+            <CenterFrame v-if="contentType === 'text/html'" :src="datasetUrl" />
             <pre v-else>{{ content }}</pre>
         </div>
     </div>

client/src/entry/analysis/modules/CenterFrame.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, ref } from "vue";
 
 import { withPrefix } from "@/utils/redirect";
 
@@ -10,25 +10,16 @@ const props = withDefaults(
     defineProps<{
         id?: string;
         src?: string;
-        html?: string;
     }>(),
     {
         id: "frame",
         src: "",
-        html: "",
     },
 );
 
-const iframeRef = ref<HTMLIFrameElement>();
 const srcWithRoot = computed(() => withPrefix(props.src));
 const isLoading = ref(true);
 
-function injectHtml(val: string) {
-    if (iframeRef.value && val) {
-        iframeRef.value.srcdoc = val;
-    }
-}
-
 function onLoad(ev: Event) {
     isLoading.value = false;
     const iframe = ev.currentTarget as HTMLIFrameElement;
@@ -41,19 +32,14 @@ function onLoad(ev: Event) {
         console.warn("[CenterFrame] onLoad location access forbidden.", ev, location);
     }
 }
-
-watch(() => props.html, injectHtml);
-onMounted(() => injectHtml(props.html));
 </script>
-
 <template>
     <div class="h-100">
         <LoadingSpan v-if="isLoading">Loading ...</LoadingSpan>
         <iframe
             :id="id"
-            ref="iframeRef"
             :name="id"
-            :src="props.html ? undefined : srcWithRoot"
+            :src="srcWithRoot"
             class="center-frame"
             frameborder="0"
             title="galaxy frame"