Secure upload and show image or file in codeigniter 3

Question

I want to upload image in my codeigniter 3 , and I want to show the uploaded image to my users (this is in register level and users is inputing his profile data) I should showe the uploaded image to him. I have read this :

Moving it outside of the public_html is a good idea, also try to rename the file and just add the extension to it.

and another :

Do not move uploaded file to directory which is accessible from URL

but I don't know how can I have show the picture which is not directory which is accessible from URL ! . I don't have any idea it's really important for me the security I have used codeigniter upload class and I don't you know what kind of security other operations should I do this is my controller :

public function do_resize($img_name ,$image_original_width , $image_original_height   )
{

    // $nesbat = $image_original_height  / $image_original_width ;

    $config_manip = array(
    'image_library' => 'gd2',
    'source_image' => '../uploads/'.$img_name,
    'new_image' => '../uploads/'.$img_name,
    'maintain_ratio' => TRUE,
    'create_thumb' => TRUE,
    'thumb_marker' => '_thumb',
    'width' => 150,
    'height' => 150
    );
    $this->load->library('image_lib', $config_manip);
    if (!$this->image_lib->resize()) {
        // echo $this->image_lib->display_errors();
        return false ;
    }
    else
    {
        return true ;
    }
    // clear //
    $this->image_lib->clear();

}

function do_upload()
{

    $file_name = $this->input->post("file_name") ;

    $config['upload_path'] = '../uploads/';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['max_size'] = '10000';
    $config['max_width']  = '1024';
    $config['max_height']  = '768';
    $config['file_name']  = $file_name;


    // delete if .gif image exists before

    if ( is_file('./uploads/'.$file_name.".gif")   )
    {
        unlink("./uploads/".$file_name.".gif"); 
        unlink("./uploads/".$file_name."_thumb.gif"); 
    }



    // delete if .gif image exists before

    if ( is_file('./uploads/'.$file_name.".jpg")   )
    {
        unlink("./uploads/".$file_name.".jpg"); 
        unlink("./uploads/".$file_name."_thumb.jpg"); 
    }


    // delete if .gif image exists before

    if ( is_file('./uploads/'.$file_name.".png")   )
    {
        unlink("./uploads/".$file_name.".png"); 
        unlink("./uploads/".$file_name."_thumb.png"); 
    }


    $this->load->library('upload', $config);



    if ( ! $this->upload->do_upload())
    {
        $error = array('error' => $this->upload->display_errors());
        echo "<div id='upload_status'>fail</div>";
        echo "<div id='error_mesage'>".$this->upload->display_errors()."</div>";
    }
    else
    {
        $data = array('upload_data' => $this->upload->data());
        $upload_data = $this->upload->data(); 

        $uploaded_file_name =   $upload_data['file_name'];

        $resize = $this->do_resize($uploaded_file_name  , $upload_data['image_width'] , $upload_data['image_height'] ) ;
        if ($resize == true ) 
        {
            echo "<div id='upload_status'>success</div>";
            echo "<div id='uploaded_image_link'  >".$upload_data['file_name']."</div> ";
            $thumb_link = str_replace($file_name,$file_name."_thumb",$upload_data['file_name']);
            echo "<div id='uploaded_image_thumb_link'  >".$thumb_link."</div> ";
        }
        //if $resize == true , nabashe -> uploade koli fail eleam mishe ta dobare anjam beshe
        else 
        {
            echo "<div id='upload_status'>fail</div>";
        }


    }
}

Answer 1

Images are generally a public asset but you can protect them in a few ways.

1. Put an index.html or index.php file in your images directory.
2. Turn off directory listing in your .htaccess file
3. Rewrite the file name (will obfuscate orginal name)

To view the image after it's uploaded will require AJAX, or a page refresh. A page refresh is easier to code, simply upload the file and show that file on the preceeding page.

You can protect the folder to make sure a particular page has access to displaying an image. This makes things more complicated but working with some kind of resource access system might help you achieve this.

Once the page is loaded though - the image will be available to that user and once downloaded there.

I am not sure on what youre protecting exactly (profile pics, adult content..) but images, like CSS files are public assets.

Rich

Answer 2

Using this way, we can prevent Image call from other server.

Prevent image hotlinking (IMP)
- Image hotlinking is the process/technique of using someone else's Image URL in our Website and using their bandwidth. In order to prevent this mystery, we can prevent access for external server by adding following line in htaccess .

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Answer 3

Just create a blank index.html file and put the index.html file on all other public folders except application/system folders (they already have it). This is a simple security technique to restrict viewers to view your files on public folders.