versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: 🔒 Add crossorigin attributes to every image element

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-05-04 19:22:47 -10:00
parent 74425cd62e
commit cafe272429
No known key found for this signature in database
16 changed files with 29 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/social-elements/instance/Presentation.vue
View file

@ -2,8 +2,8 @@
<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 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" />
<img crossorigin="anonymous" 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>
<div class="prose prose-invert prose-sm">

4
components/social-elements/notes/attachment.vue
View file

@ -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 v-if="attachment.type === 'image'" tabindex="-1"
<img crossorigin="anonymous" 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 @click.stop v-if="attachment.type === 'image'"
<img crossorigin="anonymous" @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"

6
components/social-elements/notes/header.vue
View file

@ -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 class="h-6 w-6 rounded ring-1 ring-white/5 shrink-0" :src="note?.account.avatar"
:alt="`${note?.account.acct}'s avatar`" />
<img crossorigin="anonymous" class="h-6 w-6 rounded ring-1 ring-white/5 shrink-0"
:src="note?.account.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 class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar"
<img crossorigin="anonymous" class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar"
:alt="`${note?.account.acct}'s avatar`" />
</NuxtLink>
</Skeleton>

4
components/social-elements/notes/mention.vue
View file

@ -1,8 +1,8 @@
<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 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'`" />
<img crossorigin="anonymous" 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>
</template>

2
components/social-elements/notes/note.vue
View file

@ -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 v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
<img crossorigin="anonymous" 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>

2
components/social-elements/notifications/notif.vue
View file

@ -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 v-if="notification?.account?.avatar" :src="notification?.account.avatar"
<img crossorigin="anonymous" 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

8
components/social-elements/users/Account.vue
View file

@ -3,16 +3,16 @@
<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 v-if="account?.header" :src="account.header" class="object-cover w-full h-full"
:alt="`${account.acct}'s header image'`" />
<img crossorigin="anonymous" v-if="account?.header" :src="account.header"
class="object-cover w-full h-full" :alt="`${account.acct}'s header image'`" />
</div>
</Skeleton>
<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 class="cursor-pointer bg-dark-700 ring-1 ring-white/10" :src="account?.avatar"
:alt="`${account?.acct}'s avatar'`" />
<img crossorigin="anonymous" class="cursor-pointer bg-dark-700 ring-1 ring-white/10"
:src="account?.avatar" :alt="`${account?.acct}'s avatar'`" />
</Skeleton>
</div>

2
components/social-elements/users/SmallCard.vue
View file

@ -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 class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar"
<img crossorigin="anonymous" class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar"
:alt="`${account?.acct}'s avatar'`" />
</div>
</Skeleton>