sonata-project / SonataFormatterBundle

Symfony SonataFormatterBundle
https://docs.sonata-project.org/projects/SonataFormatterBundle
MIT License
81 stars 117 forks source link

Uploaded files with ckeditor are not validated #719

Closed m-ar-c closed 1 year ago

m-ar-c commented 2 years ago

Environment

Sonata packages

show

``` $ composer show --latest 'sonata-project/*' sonata-project/admin-bundle 4.18.0 4.18.0 The missing Symfony Admin Generator sonata-project/block-bundle 4.17.0 4.17.0 Symfony SonataBlockBundle sonata-project/cache 2.2.0 2.2.0 Cache library Package sonata-project/cache is abandoned, you should avoid using it. No replacement was suggested. sonata-project/doctrine-extensions 1.18.1 1.18.1 Doctrine2 behavioral extensions sonata-project/doctrine-orm-admin-bundle 4.7.0 4.7.0 Integrate Doctrine ORM into the SonataAdminBundle sonata-project/exporter 2.13.0 2.13.0 Lightweight Exporter library sonata-project/form-extensions 1.18.0 1.18.0 Symfony form extensions sonata-project/formatter-bundle 5.0.0 5.0.0 Symfony SonataFormatterBundle sonata-project/intl-bundle 2.14.0 2.14.0 Symfony SonataIntlBundle sonata-project/media-bundle 4.5.1 4.5.1 Symfony SonataMediaBundle sonata-project/twig-extensions 1.12.0 1.12.0 Sonata twig extensions sonata-project/user-bundle 5.3.3 5.3.3 Symfony SonataUserBundle ```

Symfony packages

show

``` $ composer show --latest 'symfony/*' symfony/asset v5.4.7 v5.4.7 Manages URL generation and versioning of web assets such as CSS stylesheets, JavaScript files and image files symfony/cache v5.4.11 v5.4.11 Provides an extended PSR-6, PSR-16 (and tags) implementation symfony/cache-contracts v2.5.2 v2.5.2 Generic abstractions related to caching symfony/config v5.4.11 v5.4.11 Helps you find, load, combine, autofill and validate configuration values of any kind symfony/console v5.4.12 v5.4.12 Eases the creation of beautiful and testable command line interfaces symfony/dependency-injection v5.4.11 v5.4.11 Allows you to standardize and centralize the way objects are constructed in your application symfony/deprecation-contracts v2.5.2 v2.5.2 A generic function and convention to trigger deprecation notices symfony/doctrine-bridge v5.4.11 v5.4.11 Provides integration for Doctrine with various Symfony components symfony/dotenv v5.4.5 v5.4.5 Registers environment variables from a .env file symfony/error-handler v5.4.11 v5.4.11 Provides tools to manage errors and ease debugging PHP code symfony/event-dispatcher v5.4.9 v5.4.9 Provides tools that allow your application components to communicate with each other by dispatching events and listening to them symfony/event-dispatcher-contracts v2.5.2 v2.5.2 Generic abstractions related to dispatching event symfony/expression-language v5.4.11 v5.4.11 Provides an engine that can compile and evaluate expressions symfony/filesystem v5.4.12 v5.4.12 Provides basic utilities for the filesystem symfony/finder v5.4.11 v5.4.11 Finds files and directories via an intuitive fluent interface symfony/flex v1.19.3 v1.19.3 Composer plugin for Symfony symfony/form v5.4.12 v5.4.12 Allows to easily create, process and reuse HTML forms symfony/framework-bundle v5.4.12 v5.4.12 Provides a tight integration between Symfony components and the Symfony full-stack framework symfony/http-client v5.4.12 v5.4.12 Provides powerful methods to fetch HTTP resources synchronously or asynchronously symfony/http-client-contracts v2.5.2 v2.5.2 Generic abstractions related to HTTP clients symfony/http-foundation v5.4.12 v5.4.12 Defines an object-oriented layer for the HTTP specification symfony/http-kernel v5.4.12 v5.4.12 Provides a structured process for converting a Request into a Response symfony/intl v5.4.11 v5.4.11 Provides a PHP replacement layer for the C intl extension that includes additional data from the ICU library symfony/mailer v5.4.12 v5.4.12 Helps sending emails symfony/maker-bundle v1.43.0 v1.43.0 Symfony Maker helps you create empty commands, controllers, form classes, tests and more so you can forget about writing boilerplate code. symfony/mime v5.4.12 v5.4.12 Allows manipulating MIME messages symfony/options-resolver v5.4.11 v5.4.11 Provides an improved replacement for the array_replace PHP function symfony/password-hasher v5.4.11 v5.4.11 Provides password hashing utilities symfony/polyfill-intl-grapheme v1.26.0 v1.26.0 Symfony polyfill for intl's grapheme_* functions symfony/polyfill-intl-icu v1.26.0 v1.26.0 Symfony polyfill for intl's ICU-related data and classes symfony/polyfill-intl-idn v1.26.0 v1.26.0 Symfony polyfill for intl's idn_to_ascii and idn_to_utf8 functions symfony/polyfill-intl-normalizer v1.26.0 v1.26.0 Symfony polyfill for intl's Normalizer class and related functions symfony/polyfill-mbstring v1.26.0 v1.26.0 Symfony polyfill for the Mbstring extension symfony/polyfill-php73 v1.26.0 v1.26.0 Symfony polyfill backporting some PHP 7.3+ features to lower PHP versions symfony/polyfill-php80 v1.26.0 v1.26.0 Symfony polyfill backporting some PHP 8.0+ features to lower PHP versions symfony/polyfill-php81 v1.26.0 v1.26.0 Symfony polyfill backporting some PHP 8.1+ features to lower PHP versions symfony/property-access v5.4.11 v5.4.11 Provides functions to read and write from/to an object or array using a simple string notation symfony/property-info v5.4.11 v5.4.11 Extracts information about PHP class' properties using metadata of popular sources symfony/proxy-manager-bridge v5.4.6 v5.4.6 Provides integration for ProxyManager with various Symfony components symfony/routing v5.4.11 v5.4.11 Maps an HTTP request to a set of configuration variables symfony/runtime v5.4.11 v5.4.11 Enables decoupling PHP applications from global state symfony/security-acl v3.3.1 v3.3.1 Symfony Security Component - ACL (Access Control List) symfony/security-bundle v5.4.11 v5.4.11 Provides a tight integration of the Security component into the Symfony full-stack framework symfony/security-core v5.4.11 v5.4.11 Symfony Security Component - Core Library symfony/security-csrf v5.4.11 v5.4.11 Symfony Security Component - CSRF Library symfony/security-guard v5.4.9 v5.4.9 Symfony Security Component - Guard symfony/security-http v5.4.12 v5.4.12 Symfony Security Component - HTTP Integration symfony/service-contracts v2.5.2 v2.5.2 Generic abstractions related to writing services symfony/stopwatch v5.4.5 v5.4.5 Provides a way to profile code symfony/string v5.4.12 v5.4.12 Provides an object-oriented API to strings and deals with bytes, UTF-8 code points and grapheme clusters in a unified way symfony/translation v5.4.12 v5.4.12 Provides tools to internationalize your application symfony/translation-contracts v2.5.2 v2.5.2 Generic abstractions related to translation symfony/twig-bridge v5.4.12 v5.4.12 Provides integration for Twig with various Symfony components symfony/twig-bundle v5.4.8 v5.4.8 Provides a tight integration of Twig into the Symfony full-stack framework symfony/validator v5.4.12 v5.4.12 Provides tools to validate values symfony/var-dumper v5.4.11 v5.4.11 Provides mechanisms for walking through any arbitrary PHP variable symfony/var-exporter v5.4.10 v5.4.10 Allows exporting any serializable PHP data structure to plain PHP code symfony/web-profiler-bundle v5.4.10 v5.4.10 Provides a development tool that gives detailed information about the execution of any request symfony/webpack-encore-bundle v1.15.1 v1.15.1 Integration with your Symfony app & Webpack Encore! symfony/yaml v5.4.12 v5.4.12 Loads and dumps YAML files ```

PHP version

$ php -v

PHP 7.4.30 (cli) (built: Jul  7 2022 15:51:43) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.30, Copyright (c), by Zend Technologies
    with Xdebug v3.0.2, Copyright (c) 2002-2021, by Derick Rethans

Subject

I've followed the documentation to be able to upload images with ckeditor. All is working but files aren't validated after upload, we hit this exception instead. I think files should be validated thanks to this code and this configuration file but it doesn't happen.

Files are correctly validated if I upload them with the SonataMediaBundle default Admin.

my fos_ckeditor.yaml :

fos_ck_editor:
    default_config: default
    configs:
        default:
            toolbar:
            - [Bold, Italic, Underline, -, Cut, Copy, Paste,
              PasteText, PasteFromWord, -, Undo, Redo, -,
              NumberedList, BulletedList, -, Outdent, Indent, -,
              Blockquote, -, Image, Link, Unlink, Table]
            - [Format, Maximize, Source]

            filebrowserBrowseRoute: admin_app_sonatamediamedia_browser

            filebrowserImageBrowseRoute: admin_app_sonatamediamedia_browser

            filebrowserImageBrowseRouteParameters:
                provider: sonata.media.provider.image

            filebrowserUploadMethod: form

            filebrowserUploadRoute: admin_app_sonatamediamedia_upload

            filebrowserUploadRouteParameters:
                provider: sonata.media.provider.file

            filebrowserImageUploadRoute: admin_app_sonatamediamedia_upload

            filebrowserImageUploadRouteParameters:
                provider: sonata.media.provider.image
                context: default

my sonata_media.yaml :

sonata_media:
    class:
        media: App\Entity\SonataMediaMedia
        gallery: App\Entity\SonataMediaGallery
        gallery_item: App\Entity\SonataMediaGalleryItem
    db_driver: doctrine_orm
    default_context: default
    contexts:
        default:
            download:
                strategy: sonata.media.security.public_strategy
                mode: http
            providers:
                - sonata.media.provider.dailymotion
                - sonata.media.provider.youtube
                - sonata.media.provider.image
                - sonata.media.provider.vimeo

            formats:
                small: { width: 100 , quality: 60 }
                big:   { width: 500 , quality: 60 }

    cdn:
        server:
            path: /upload/media

    filesystem:
        local:
            directory: "%kernel.project_dir%/public/upload/media"
            create: false

    providers:
        file:
            resizer:    null

In my Admin :


    protected function configureFormFields(FormMapper $form): void
    {
        $form->add('description', FormatterType::class, [
                 'label' => 'Corps de l\'article',
                 'source_field' => 'rawDescription',
                 'format_field' => 'descriptionFormatter',
                 'target_field' => 'description',
                 'ckeditor_context' => 'default',
                 'listener' => true,
             ]);
    }
jordisala1991 commented 2 years ago

Probably here: https://github.com/sonata-project/SonataFormatterBundle/blob/5.x/src/Controller/CkeditorAdminController.php#L149-L152

we are missing some call to a validate method?

Anyway not sure how the ckeditor will display this kind of error, you might end up with the same ugly error with just another message.

m-ar-c commented 2 years ago

Yes, maybe something like :

$pool->getProvider($provider)->validate($errorElement, $media);

But (after a few hours of investigation) I don't understand how to get $errorElement there or how that would automagically make a nice error message be shown on front (otherwise this would be a PR not an issue :slightly_smiling_face: ).

m-ar-c commented 1 year ago

After a whole day reading the ckeditor documentation and trying to at least add the accept = "image/*" attribute to the input field without success, I added validation server side :

In CkeditorAdminController::UploadAction, I added the following, just before $mediaManager->save($media); :

$binaryContent = $media->getBinaryContent();

if ($binaryContent instanceof UploadedFile)
    $extension = $binaryContent->getClientOriginalExtension();
if ($binaryContent instanceof File)
    $extension = $binaryContent->getExtension();

$extension = '' !== $extension ? $extension : $binaryContent->guessExtension();
$allowedExtensions = $pool->getProvider($provider)->getAllowedExtensions();
$allowedMimeTypes = $pool->getProvider($provider)->getAllowedMimeTypes();
$mimeType = $binaryContent->getMimeType();

if (null === $extension || !\in_array(strtolower($extension), $allowedExtensions, true) ||
    null === $mimeType || !\in_array(strtolower($mimeType), $allowedMimeTypes, true)) {
    return $this->renderWithExtraParams('@SonataFormatter/Ckeditor/upload.html.twig', [
        'action' => 'list',
        'object' => '',
        'format' => '',
        'isUploadValid' => false,
        'errorMessage' => 'ckeditor_invalid_image_error_message'
    ]);
}

In upload.html.twig I added :

{% if isUploadValid is defined and isUploadValid == false %}
    alert('{{errorMessage|trans({}, "SonataFormatterBundle")}}');
{% endif %}

And in SonataFormatterBundle.fr.xliff I added :

<trans-unit id="ckeditor_invalid_image_error_message">
   <source>ckeditor_invalid_image_error_message</source>
   <target>Ce fichier n'est pas une image valide. Merci de séléctionner un autre fichier.</target>
</trans-unit>

With all that, If users try to upload a non valid image file, they see the nice error message (in an alert()) and can upload another one right away (they are still on the same upload tab). This is not ideal (duplicate validation code, better to use already existing validation mechanisms...) but it is way better than a 500 error thrown to the user (not even visible because shown in a 23px high iframe).

Should I do a PR with that (or just implement it in my project) ?

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.