How to validate the Article - Intro Image field in the backend?

Question

When managing an Article in the administrator/backend, it is possible to insert a non-url into the "Intro Image" field (located in the "Images and Links" tab).

Upon clicking "Select" a modal window containing a text input field labeled "Image URL" (among other options) appears. This field expects a url string like images/abc.jpg, but there is no validation on the text in the field so a non-url value can be submitted. I want to eliminate the possibility of a non-url value like html, javascript, etc. from being stored. e.g. <img src="xxx/yy/zbx.jpg" onmouseover="alert(xxxx)" />

Ideally, I wish to deny the submission from the modal, so that the parent form can not receive the non-url value and generate the following:

Ultimately I'd like to validate the url field when saving the Article.

Answer 1

To prevent invalid values from being passed to the parent window, you can create an override of mediafield.js (and minified mediafield.min.js) which is located in /media/media/js/ folder.

Add your filtering/validation here:

        // bind insert
        content.on('click', self.options.buttonSaveSelected, function(){
            var value = content.find('#f_url').val();
            if (value) {
                self.setValue(value);
            }
            self.modalClose.call(self);
        });

This snippet should strip out HTML from value (source).

            var tmp = document.createElement("div");
            tmp.innerHTML = value;
            value = tmp.textContent || tmp.innerText || "";

To prevent invalid values from being saved to database, no action should be needed as by default HTML is filtered out from the field. But if you want to change the filter, create a content plugin with onContentPrepareForm event and set the filter of the field there:

public function onContentPrepareForm($form, $data)
{
    if ($form->getName() !== 'com_content.article')
    {
        return true;
    }

    $form->setFieldAttribute('image_intro', 'filter', 'SOMEFILTER', 'images');
}

Answer 2

Make an override of administrator > components > com_content > models > article.php

Inside that override, find this function (line 549 in article.php):

if (isset($data['images']) && is_array($data['images']))
{
    $registry = new Registry($data['images']);

    $data['images'] = (string) $registry;
}

Add this before $registry inside the function:

$imgToCheck = $data['images']['image_intro'];
$application = JFactory::getApplication();
if (preg_match('~^[a-z0-9/.-]+$~i', $imgToCheck)) {
    // This is a URL
    $application->enqueueMessage('URL OK');
} else {
    // Not an valid URL
    $application->enqueueMessage(JText::_('Please use a valid URL'), 'Invalid URL');
    exit();
}

This will test the url input for the intro image.

I'm not really good at preg_match, but this should only allow letters from A-Z and numbers and /and ....You can change this to match your needs.

I hope this will help you! I'm not really expierenced in Joomla myself, but since no one answered this question, I though I would do my best to help.