Configuring viewing and downloading files in FCKeditor

    This article describes some methods for setting up the FCKeditor editor and its built-in file browser to control the upload of files to the server. These techniques will help you better understand the principles of the editor and integrate it more closely into your CMS, at the same time preventing possible security problems when using this editor.

    You can find general information about FCKeditor on its official website www.fckeditor.net . In short: this is a WYSIWYG editor written in JavaScript and supporting working with server-side scripts in various programming languages ​​(perl, php, python, asp). Further everywhere I will keep in mind the php language , however, all that is said is easily adapted for other languages. The editor works fine in most modern browsers (IE 6 +, FF 1.5+, Opera 9.5), has rich functionality and well-documented code, which allows you to make changes to it to adapt to the specific requirements of the CMS in which it is used. This is not an advertisement, but an explanation of why I use this editor and decided to write this article :)

    In addition, the editor allows you to insert various objects into the edited text: images, Flash-clips, multimedia files, as well as links to arbitrary files from the server. Two dialogs are used for this: inserts and object properties (for an example of an image, see the first slide) and a resource browser (see the second slide). On the slides, I highlighted the controls that will be mentioned in the text. The insertion dialog is called up by clicking on the image insertion button; it implements two functions important to us: upload the image file to the server and call the resource browser window. The ability to perform these functions and a number of parameters (the location of the downloaded files on the server, valid file extensions, etc.) are described in the configuration files.

    Insert and edit properties of the Resource Browser Dialog object




    Next, we will determine: we will talk about FCKeditor version 2.6.3 , which was the last at the time of writing.

    The main editor configuration file is calledfckconfig.jsand is located in the root directory of the editor (for definiteness, we assume that the editor is located in the / fcke / subdirectory of the site root). In it we are interested in lines 284 through 312, which describe the settings for downloading files of various types in various ways. The fields LinkBrowser, ImageВrowser and FlashBrowser determine whether the "View on Server" button is displayed in the corresponding dialog box, which opens the resource browser dialog. The fields LinkUpload, ImageUpload, FlashUpload determine the presence of the “Upload” tab in the corresponding dialog to quickly download the corresponding file. By setting the fields you need to false, you will disable the display of the corresponding interface elements.

    However, as you know and must always remember, any client setting with due diligence, the user can always change beyond your will, so I didn’t in vain clarify that the previous settings affect the interface more than the real restrictions on downloading and viewing files on the server. Therefore, the basic access settings are controlled through the configuration of server scripts.

    The scripts that control viewing and downloading the file to the server are in a subfolder editor/filemanager/connectors/LANGUAGE, where LANGUAGE is the scripting language on the server. We, as I already said, will consider the settings using the example of PHP. Unused connectors should be wiped off altogether for security reasons and just to reduce space requirements. The configuration file is in the connector directory, in our case it isconfig.php. This file contains everything you need to configure file downloads.

    1. Line 30. Here is the main “switch” of the connector, equipped, as it should, with a formidable warning that you can turn it on only by setting it correctly, otherwise you will get a big hole in the site’s security. To make the connector work at all, in this line, of course, you need to write = true.

    2. Line 34. Specifies the relative URL of the folder with resources managed by this connector.

    Here it is time to figure out how we can control access to the resource browser in accordance with the rights of site visitors. If we use the editor in a single-user CMS (when everyone who could access the editor’s catalog has the right to upload anything to the site), then just configure everything for the site administrator and deny access to others (for example, at the web server level) . But if the editor will be used to write entries in personal blogs, then you must first prohibit the work of the connector for unauthorized users, and secondly, separate folders for downloading files by different users.

    The configuration file is used when accessing the resource browser web page to the connector. Therefore, the only way out is to include in your file a call to your own script, which will check the user's authorization (by cookie, for example) and turn the connector on and off, and at the same time indicate the correct path.

    Code example:

    global $ Config;
    require ('my_auth_script.php');
    $ currentUser = GetCurrentUser ();
    if ($ currentUser)
    {
      $ Config ['Enabled'] = true;
      $ Config ['UserFilesPath'] = "/ userfiles / $ currentUser /";
    }
    else
    {
      $ Config ['Enabled'] = false;
      $ Config ['UserFilesPath'] = '';
    }


    Further on the file ...

    3. Line 40. Here is the path to the same folder with resources, but from the point of view of the file system. If you leave this path empty, it will be determined by calling the function from the web server API (in the case of PHP, this is apache_lookup_uri , which returns information about the object by the given URI). If you have configured mod_rewrite on the server in the directory pointed to by 'UserFilesPath', you need to fill in this field since the request through the web server will be performed taking into account mod_rewrite and may lead to the wrong place at all.

    4. Line 54. The resource types that the resource browser can work with are listed here. Remember these names, they will be mentioned in the next block of settings.

    5. Lines 123 - 149. The settings blocks for each resource type are listed here. The settings are combined into groups, the composition of the groups is the same, so we will consider only one of them. The comments before the blocks describe in detail the purpose of the fields, so my description is mostly a translation and retelling of this comment in my own words.
    • 'AllowedExtensions' - file extensions that are allowed to be uploaded to the server for this type of resource. The resource type, by the way, is selected from the list in the upper left corner of the resource browser (see the second slide).
    • 'DeniedExtensions' - a list of file extensions prohibited for download. Use makes sense only one of these two lists.

    First checks if the list of allowed extensions are not empty and the expansion of the uploaded file in it is not , the file is not accepted. Then it is checked if the list of prohibited extensions is not empty and the extension of the downloaded file is present in it , the file is not accepted. To disable the ability to load any type of resource, you can specify in the 'AllowedExtensions' an array of one "*" element, because None of the downloaded files will match this extension. You can also configure valid extensions depending on user rights, as already described just above.

    Next are the path settings for placing files. We see that the path settings for directories are formed from global paths (specified in lines 34 and 40) by adding the appropriate subdirectory to them. But nothing prevents you from setting these paths directly, with string constants. By the way, global paths are no longer used for anything, except for forming paths for each type of resource (this is just a note so that you are not afraid to change them as you need).

    • 'FileTypesPath' is the URL of the directory where the file will be downloaded through the resource browser .
    • 'FileTypesAbsolutePath' is the same directory in terms of the file system. The rules for this setting are the same as for the global 'UserFilesAbsolutePath' - automatic search for the path if you do not specify anything in this field.
    • 'QuickUploadPath' - URL of the directory into which the file will be downloaded through the “ Upload ” tab of the object insert dialog (links, images, Flash-clips).
    • 'QuickUploadAbsolutePath' - the path in the file system to the same directory.

    Please note (this is also described in the commentary) that by default this directory is different from that specified by the value of the 'FileTypesPath' field (it is written for backward compatibility), therefore it is recommended to edit the lines 'QuickUploadPath' and 'QuickUploadAbsolutePath' to indicate to the same directory as 'FileTypesPath' and 'FileTypesAbsolutePath' respectively:

    foreach ($ Config ['ConfigAllowedTypes'] as $ resType)
    {
      $ Config ['QuickUploadPath'] [$ resType] 
        = $ Config ['FileTypesPath'] [$ resType];
      $ Config ['QuickUploadAbsolutePath'] [$ resType] 
        = $ Config ['FileTypesAbsolutePath'] [$ resType];
    }

    at the end of the settings file, and the assignment lines to the fields 'QuickUploadPath' and 'QuickUploadAbsolutePath' are simply removed. Otherwise, you may encounter an unpleasant effect - the files downloaded through the “Upload” tab will not be visible on the “View on Server” button.

    And finally, a small bonus. The fact is that the rich functions of the browser built into FCKeditor can be used not only in the editor, but also separately.

    To view and manage image files, you need to create a window (for example, by calling a JavaScript function window.openat the click of a button), opening a page with the following URL in it: /fcke/editor/filemanager/browser/default/browser.html?Type=Image&Connector=../../connectors/php/connector.php

    There should be a JS function in the opening window
    function SetUrl (url)
    {
    }

    which will be called when the user clicks on the image file, the corresponding URL will be passed to this function.

    If you want to allow the user to view all categories of files, not just images, remove the parameter Type=Imagefrom the browser URL above. Then all types listed in the connector configuration file will appear in the drop-down list of file types (line 54).

    I hope the information provided was useful to you. Ready for constructive dialogue and reasonable criticism :)

    Also popular now: