From 4a0fb56d18a675a603008d527fc948caeffd2479 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sun, 28 Aug 2022 13:54:32 -0800
Subject: [PATCH] fix: unsafe window access on recipe assets (#1613)

resolves 500 error on new recipes page
---
 .../components/Domain/Recipe/RecipeAssets.vue    |  9 +++++----
 .../RecipePageParts/RecipePageOrganizers.vue     | 16 +++++++---------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeAssets.vue b/frontend/components/Domain/Recipe/RecipeAssets.vue
index 848e224c6783..9517942f2c28 100644
--- a/frontend/components/Domain/Recipe/RecipeAssets.vue
+++ b/frontend/components/Domain/Recipe/RecipeAssets.vue
@@ -81,10 +81,9 @@
 import { defineComponent, reactive, useContext } from "@nuxtjs/composition-api";
 import { useStaticRoutes, useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
+import { detectServerBaseUrl } from "~/composables/use-utils";
 import { RecipeAsset } from "~/types/api-types/recipe";
 
-const BASE_URL = window.location.origin;
-
 export default defineComponent({
   props: {
     slug: {
@@ -116,7 +115,7 @@ export default defineComponent({
       },
     });
 
-    const { $globals, i18n } = useContext();
+    const { $globals, i18n, req } = useContext();
 
     const iconOptions = [
       {
@@ -146,6 +145,8 @@ export default defineComponent({
       },
     ];
 
+    const serverBase = detectServerBaseUrl(req);
+
     function getIconDefinition(icon: string) {
       return iconOptions.find((item) => item.name === icon) || iconOptions[0];
     }
@@ -156,7 +157,7 @@ export default defineComponent({
     }
 
     function assetEmbed(name: string) {
-      return `<img src="${BASE_URL}${assetURL(name)}" height="100%" width="100%"> </img>`;
+      return `<img src="${serverBase}${assetURL(name)}" height="100%" width="100%"> </img>`;
     }
 
     function setFileObject(fileObject: File) {
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
index 0d32c426fc38..5c1c45a637a8 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
@@ -46,15 +46,13 @@
     </v-card>
 
     <RecipeNutrition v-if="recipe.settings.showNutrition" v-model="recipe.nutrition" class="mt-10" :edit="isEditForm" />
-    <client-only>
-      <RecipeAssets
-        v-if="recipe.settings.showAssets"
-        v-model="recipe.assets"
-        :edit="isEditForm"
-        :slug="recipe.slug"
-        :recipe-id="recipe.id"
-      />
-    </client-only>
+    <RecipeAssets
+      v-if="recipe.settings.showAssets"
+      v-model="recipe.assets"
+      :edit="isEditForm"
+      :slug="recipe.slug"
+      :recipe-id="recipe.id"
+    />
   </div>
 </template>