fix: 🔒 Remove unnecessary crossorigin attributes

components/social-elements/instance/Presentation.vue

@@ -2,7 +2,7 @@
     <div class="flex flex-col p-10 gap-4 h-full">
         <div
             class="aspect-video shrink-0 w-full rounded ring-white/5 bg-dark-800 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
-            <img crossorigin="anonymous" class="object-cover w-full h-full duration-150 hover:scale-[102%] ease-in-out"
+            <img class="object-cover w-full h-full duration-150 hover:scale-[102%] ease-in-out"
                 v-if="instance?.banner" alt="Instance banner" :src="instance.banner" />
         </div>
 

components/social-elements/notes/attachment.vue

@@ -1,7 +1,7 @@
 <template>
     <div @click="lightbox = true" tabindex="0" aria-label="Open attachment in lightbox" @keydown="lightbox = true"
         class="aspect-video w-full rounded ring-white/5 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
-        <img crossorigin="anonymous" v-if="attachment.type === 'image'" tabindex="-1"
+        <img v-if="attachment.type === 'image'" tabindex="-1"
             class="object-cover w-full h-full rounded duration-150 hover:scale-[102%] ease-in-out" :src="attachment.url"
             :alt="attachment.description ?? ''" :title="attachment.description ?? ''" />
         <video v-else-if="attachment.type === 'video'" class="object-cover w-full h-full rounded" controls
@@ -29,7 +29,7 @@
                                     <span class="sr-only">Close</span>
                                 </button>
                             </div>
-                            <img crossorigin="anonymous" @click.stop v-if="attachment.type === 'image'"
+                            <img @click.stop v-if="attachment.type === 'image'"
                                 class="rounded max-w-full min-w-[30%] max-h-[70%]" :src="attachment.url"
                                 :alt="attachment.description ?? ''" :title="attachment.description ?? ''" />
                             <span @click.stop v-if="attachment.description"

components/social-elements/notes/header.vue

@@ -2,8 +2,8 @@
     <div v-if="small" class="flex flex-row">
         <Skeleton :enabled="!note" shape="rect" class="!h-6 w-6">
             <NuxtLink :href="accountUrl" class="shrink-0">
-                <img crossorigin="anonymous" class="h-6 w-6 rounded ring-1 ring-white/5 shrink-0"
+                <img class="h-6 w-6 rounded ring-1 ring-white/5 shrink-0" :src="note?.account.avatar"
-                    :src="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`" />
+                    :alt="`${note?.account.acct}'s avatar`" />
             </NuxtLink>
         </Skeleton>
         <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
@@ -25,7 +25,7 @@
     <div v-else class="flex flex-row">
         <Skeleton :enabled="!note" shape="rect" class="!h-12 w-12">
             <NuxtLink :href="accountUrl" class="shrink-0">
-                <img crossorigin="anonymous" class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar"
+                <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar"
                     :alt="`${note?.account.acct}'s avatar`" />
             </NuxtLink>
         </Skeleton>

components/social-elements/notes/mention.vue

@@ -1,7 +1,7 @@
 <template>
     <a :href="`/@${account.acct}`"
         class="shrink break-all rounded bg-pink-700/80 text-pink-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-pink-600/30">
-        <img crossorigin="anonymous" class="h-[1em] w-[1em] rounded ring-1 ring-white/5 inline align-middle mb-1 mr-1"
+        <img class="h-[1em] w-[1em] rounded ring-1 ring-white/5 inline align-middle mb-1 mr-1"
             :src="account.avatar" :alt="`${account.acct}'s avatar'`" />
         {{ account.display_name }}
     </a>

components/social-elements/notes/note.vue

@@ -7,7 +7,7 @@
         <div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-pink-500">
             <Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
                 <Icon name="tabler:repeat" class="h-6 w-6" aria-hidden="true" />
-                <img crossorigin="anonymous" v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
+                <img v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
                     class="h-6 w-6 rounded shrink-0 ring-1 ring-white/10" />
                 <span><strong v-html="reblogDisplayName"></strong> reblogged</span>
             </Skeleton>

components/social-elements/notifications/notif.vue

@@ -4,7 +4,7 @@
             <Skeleton :enabled="!notification" shape="rect" class="!h-6" :min-width="40" :max-width="100"
                 width-unit="%">
                 <Icon :name="icon" class="h-6 w-6 text-gray-200" aria-hidden="true" />
-                <img crossorigin="anonymous" v-if="notification?.account?.avatar" :src="notification?.account.avatar"
+                <img v-if="notification?.account?.avatar" :src="notification?.account.avatar"
                     :alt="`${notification?.account.acct}'s avatar'`"
                     class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />
                 <span class="text-gray-200"><strong v-html="accountName"></strong> {{ text

components/social-elements/users/Account.vue

@@ -3,7 +3,7 @@
         <div class="w-full rounded ring-1 ring-white/10 pb-10">
             <Skeleton :enabled="skeleton" class="!w-full !h-full !aspect-[8/3]">
                 <div class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700">
-                    <img crossorigin="anonymous" v-if="account?.header" :src="account.header"
+                    <img v-if="account?.header" :src="account.header"
                         class="object-cover w-full h-full" :alt="`${account.acct}'s header image'`" />
                 </div>
             </Skeleton>
@@ -11,7 +11,7 @@
             <div class="flex items-start justify-between px-4 py-3">
                 <div class="h-32 w-32 -mt-[4.5rem] z-10 bg-dark-700 rounded shrink-0 overflow-hidden">
                     <Skeleton :enabled="skeleton" class="!h-full !w-full">
-                        <img crossorigin="anonymous" class="cursor-pointer bg-dark-700 ring-1 ring-white/10"
+                        <img class="cursor-pointer bg-dark-700 ring-1 ring-white/10"
                             :src="account?.avatar" :alt="`${account?.acct}'s avatar'`" />
                     </Skeleton>
                 </div>

components/social-elements/users/SmallCard.vue

@@ -2,7 +2,7 @@
     <NuxtLink :href="accountUrl" class="flex flex-row">
         <Skeleton :enabled="!account" shape="rect" class="!h-12 w-12">
             <div class="shrink-0">
-                <img crossorigin="anonymous" class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar"
+                <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar"
                     :alt="`${account?.acct}'s avatar'`" />
             </div>
         </Skeleton>

composables/ParsedContent.ts

@@ -36,7 +36,6 @@ export const useParsedContent = (
                             return match;
                         }
                         const image = document.createElement("img");
-                        image.crossOrigin = "anonymous";
                         image.src = emojiData.url;
                         image.alt = `:${emoji}:`;
                         image.title = emojiData.shortcode;

nuxt.config.ts

@@ -22,7 +22,7 @@ export default defineNuxtConfig({
                 "img-src": ["'self'", "data:", "https:"],
                 "script-src": ["'nonce-{{nonce}}'", "'strict-dynamic'"],
             },
-            crossOriginResourcePolicy: "cross-origin",
+            crossOriginResourcePolicy: "same-origin",
             xFrameOptions: "DENY",
         },
         rateLimiter: {