fix(app): adjust CSP settings for skin manager to work (#3895)

* fix(app): adjust CSP settings for skin manager to work

* tweak: allow current Tauri scheme in CSP

* tweak: remove references to invalid `sunny.png` texture in skin models

These were causing load errors in production app builds.

* tweak: use proper URL imports for skin models

This fixes importing these models in production builds of the app.

* chore(app-frontend): use more proper import style for glTF assets

* tweak: use proper URL imports for skin models in more places

apps/app-frontend/src/components/ui/skin/EditSkinModal.vue

@@ -1,3 +1,8 @@
+<script lang="ts">
+import capeModelUrl from '@/assets/models/cape.gltf?url'
+import wideModelUrl from '@/assets/models/classic_player.gltf?url'
+import slimModelUrl from '@/assets/models/slim_player.gltf?url'
+</script>
 <template>
   <UploadSkinModal ref="uploadModal" />
   <ModalWrapper ref="modal" @on-hide="resetState">
@@ -11,9 +16,9 @@
       <div class="max-h-[25rem] w-[16rem] min-w-[16rem] overflow-hidden relative">
         <div class="absolute top-[-4rem] left-0 h-[32rem] w-[16rem] flex-shrink-0">
           <SkinPreviewRenderer
-            slim-model-src="/src/assets/models/slim_player.gltf"
-            wide-model-src="/src/assets/models/classic_player.gltf"
-            cape-model-src="/src/assets/models/cape.gltf"
+            :slim-model-src="slimModelUrl"
+            :wide-model-src="wideModelUrl"
+            :cape-model-src="capeModelUrl"
             :variant="variant"
             :texture-src="previewSkin || ''"
             :cape-src="selectedCapeTexture"

apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue

@@ -10,6 +10,9 @@ import {
 } from '@modrinth/ui'
 import { CheckIcon, XIcon } from '@modrinth/assets'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import capeModelUrl from '@/assets/models/cape.gltf?url'
+import wideModelUrl from '@/assets/models/classic_player.gltf?url'
+import slimModelUrl from '@/assets/models/slim_player.gltf?url'
 
 const modal = useTemplateRef('modal')
 
@@ -85,9 +88,9 @@ defineExpose({
         <div class="absolute top-[-4rem] left-0 h-[32rem] w-[16rem] flex-shrink-0">
           <SkinPreviewRenderer
             v-if="currentSkinTexture"
-            slim-model-src="/src/assets/models/slim_player.gltf"
-            wide-model-src="/src/assets/models/classic_player.gltf"
-            cape-model-src="/src/assets/models/cape.gltf"
+            :slim-model-src="slimModelUrl"
+            :wide-model-src="wideModelUrl"
+            :cape-model-src="capeModelUrl"
             :cape-src="currentCapeTexture"
             :texture-src="currentSkinTexture"
             :variant="currentSkinVariant"

apps/app-frontend/src/helpers/rendering/batch-skin-renderer.ts

@@ -4,6 +4,9 @@ import { get_normalized_skin_texture, determineModelType } from '../skins'
 import { reactive } from 'vue'
 import { setupSkinModel, disposeCaches } from '@modrinth/utils'
 import { skinPreviewStorage } from '../storage/skin-preview-storage'
+import capeModelUrl from '@/assets/models/cape.gltf?url'
+import wideModelUrl from '@/assets/models/classic_player.gltf?url'
+import slimModelUrl from '@/assets/models/slim_player.gltf?url'
 
 export interface RenderResult {
   forwards: string
@@ -124,11 +127,11 @@ class BatchSkinRenderer {
 function getModelUrlForVariant(variant: string): string {
   switch (variant) {
     case 'SLIM':
-      return '/src/assets/models/slim_player.gltf'
+      return slimModelUrl
     case 'CLASSIC':
     case 'UNKNOWN':
     default:
-      return '/src/assets/models/classic_player.gltf'
+      return wideModelUrl
   }
 }
 
@@ -292,7 +295,6 @@ export async function getPlayerHeadUrl(skin: Skin): Promise<string> {
 
 export async function generateSkinPreviews(skins: Skin[], capes: Cape[]): Promise<void> {
   const renderer = new BatchSkinRenderer()
-  const capeModelUrl = '/src/assets/models/cape.gltf'
 
   try {
     for (const skin of skins) {

apps/app-frontend/src/pages/Skins.vue

@@ -43,6 +43,9 @@ import { handleSevereError } from '@/store/error'
 import { trackEvent } from '@/helpers/analytics'
 import type AccountsCard from '@/components/ui/AccountsCard.vue'
 import { arrayBufferToBase64 } from '@modrinth/utils'
+import capeModelUrl from '@/assets/models/cape.gltf?url'
+import wideModelUrl from '@/assets/models/classic_player.gltf?url'
+import slimModelUrl from '@/assets/models/slim_player.gltf?url'
 
 const editSkinModal = useTemplateRef('editSkinModal')
 const selectCapeModal = useTemplateRef('selectCapeModal')
@@ -317,9 +320,9 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
       </h1>
       <div class="preview-container">
         <SkinPreviewRenderer
-          wide-model-src="/src/assets/models/classic_player.gltf"
-          slim-model-src="/src/assets/models/slim_player.gltf"
-          cape-model-src="/src/assets/models/cape.gltf"
+          :wide-model-src="wideModelUrl"
+          :slim-model-src="slimModelUrl"
+          :cape-model-src="capeModelUrl"
           :cape-src="capeTexture"
           :texture-src="skinTexture || ''"
           :variant="skinVariant"

apps/app/tauri.conf.json

@@ -86,9 +86,9 @@
       "capabilities": ["ads", "core", "plugins"],
       "csp": {
         "default-src": "'self' customprotocol: asset:",
-        "connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://*.sentry.io https://api.mclo.gs",
+        "connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://*.sentry.io https://api.mclo.gs 'self' data: blob:",
         "font-src": ["https://cdn-raw.modrinth.com/fonts/"],
-        "img-src": "https: 'unsafe-inline' 'self' asset: http://asset.localhost blob: data:",
+        "img-src": "https: 'unsafe-inline' 'self' asset: http://asset.localhost http://textures.minecraft.net blob: data:",
         "style-src": "'unsafe-inline' 'self'",
         "script-src": "https://*.posthog.com 'self'",
         "frame-src": "https://www.youtube.com https://www.youtube-nocookie.com https://discord.com 'self'",