Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block unwanted file types from avatar upload #10135

Merged
merged 3 commits into from
Oct 29, 2024
Merged

Block unwanted file types from avatar upload #10135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
24b22bd
Add backend validation to disallow HEIC uploads
gregorbg Oct 28, 2024
bffdd3c
Check web_image content types in frontend as well
gregorbg Oct 28, 2024
d9da498
Specify min upload size explicitly
gregorbg Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions app/models/user_avatar.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@ class UserAvatar < ApplicationRecord
local: 'local-fs',
}, default: :active_storage, scopes: false

MAX_UPLOAD_SIZE = 2.megabytes

validates :public_image, blob: { content_type: :web_image, size_range: 0..MAX_UPLOAD_SIZE }
validates :private_image, blob: { content_type: :web_image, size_range: 0..MAX_UPLOAD_SIZE }

def url
case self.backend
when 's3_legacy_cdn'
Expand Down
4 changes: 2 additions & 2 deletions app/webpacker/components/EditAvatar/ImageUpload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import I18n from '../../lib/i18n';
import useCheckboxState from '../../lib/hooks/useCheckboxState';
import useInputState from '../../lib/hooks/useInputState';
import useToggleButtonState from '../../lib/hooks/useToggleButtonState';
import { avatarImageTypes } from '../../lib/wca-data.js.erb';

function ImageUpload({
uploadDisabled,
Expand Down Expand Up @@ -72,9 +73,8 @@ function ImageUpload({
<Form.Input
required
label={I18n.t('activerecord.attributes.user.pending_avatar')}
disabled={uploadDisabled}
type="file"
accept="image/*"
accept={avatarImageTypes.join(', ')}
value={selectedFile}
onChange={handleSelectedImage}
/>
Expand Down
9 changes: 8 additions & 1 deletion app/webpacker/components/EditAvatar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import Errored from '../Requests/Errored';
import useSaveAction from '../../lib/hooks/useSaveAction';
import UserAvatar from '../UserAvatar';
import useCheckboxState from '../../lib/hooks/useCheckboxState';
import { avatarImageTypes } from '../../lib/wca-data.js.erb';

function EditAvatar({
userId,
Expand Down Expand Up @@ -58,6 +59,12 @@ function EditAvatar({
return workingAvatar?.url;
}, [workingAvatar, userUploadedImage]);

const isValidContentType = useMemo(() => {
if (!userUploadedImage) return true;

return avatarImageTypes.includes(userUploadedImage.type);
}, [userUploadedImage]);

const workingThumbnail = useMemo(() => ({
x: workingAvatar?.thumbnail_crop_x,
y: workingAvatar?.thumbnail_crop_y,
Expand Down Expand Up @@ -176,7 +183,7 @@ function EditAvatar({
)}
</Message>
<ImageUpload
uploadDisabled={uploadDisabled || isEditingPending}
uploadDisabled={uploadDisabled || isEditingPending || !isValidContentType}
removalEnabled={canRemoveAvatar && !isEditingPending}
onImageUploaded={uploadUserImage}
onAvatarSaved={saveAvatar}
Expand Down
3 changes: 3 additions & 0 deletions app/webpacker/lib/wca-data.js.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,3 +217,6 @@ export const banScopes = <%= RolesMetadataBannedCompetitors.scopes.to_json %>

// ----- PANEL PAGES -----
export const PANEL_PAGES = <%= User.panel_pages.to_json.html_safe %>;

// ----- AVATAR CONFIG -----
export const avatarImageTypes = <%= Rails.application.config.active_storage.web_image_content_types.to_json.html_safe %>;