0

I have a website on which users can write blog posts. I'm using stackoverflow pagedown editor to allow users to add content & also the images by inserting their link.

But the problem is that in case a user inserts a link starting with http:// such as http://example.com/image.jpg, browser shows a warning saying,

Your Connection to this site is not Fully Secure.

Attackers might be able to see the images you are looking at
& trick you by modifying them

I was wondering how can we force the browser to use the https:// version of site only from which image is being inserted, especially when user inserts a link starting with http://?

Or is there any other solution of this issue?

image

1 Answers1

1

unfortunately, browser expect to have all loaded ressources provided over ssl. On your case you have no choice than self store all images or create or proxy request from http to https. But i am not sure if is really safe to do this way.

for exemple you can do something like this :
i assume code is php, and over https

<?php
define('CHUNK_SIZE', 1024*1024); // Size (in bytes) of tiles chunk

// Read a file and display its content chunk by chunk
function readfile_chunked($filename, $retbytes = TRUE) {
    $buffer = '';
    $cnt    = 0;
    $handle = fopen($filename, 'rb');

    if ($handle === false) {
        return false;
    }

    while (!feof($handle)) {
        $buffer = fread($handle, CHUNK_SIZE);
        echo $buffer;
        ob_flush();
        flush();

        if ($retbytes) {
            $cnt += strlen($buffer);
        }
    }

    $status = fclose($handle);

    if ($retbytes && $status) {
        return $cnt; // return num. bytes delivered like readfile() does.
    }

    return $status;
}


$filename = 'http://domain.ltd/path/to/image.jpeg';
$mimetype = 'image/jpeg';
header('Content-Type: '.$mimetype );
readfile_chunked($filename);

Credit for code sample

_ UPDATE 1 _
Alternate solution to proxify steamed downloaded file in Python

_ UPDATE 2 _
On following code, you can stream data from remote server to your front-end client, if your Django application is over https, content will be deliver correctly.

Goal is to read by group of 1024 bits your original images, them stream each group to your browser. This approch avoid timeout issue when you try to load heavy image.

I recommand you to add another layer to have local cache instead to download -> proxy on each request.

import requests
# have this function in file where you keep your util functions 
def url2yield(url, chunksize=1024):
   s = requests.Session()
   # Note: here i enabled the streaming
   response = s.get(url, stream=True)

   chunk = True
   while chunk :
      chunk = response.raw.read(chunksize)

      if not chunk:
         break

      yield chunk


# Then creation your view using StreamingHttpResponse
def get_image(request, img_id):
   img_url = "domain.ltd/lorem.jpg"
   return StreamingHttpResponse(url2yield(img_url), content_type="image/jpeg")
Yanis-git
  • 7,737
  • 3
  • 24
  • 41
  • Sir, I'm using python, django. –  Apr 16 '18 at 07:27
  • @Dev i have update my answer with Python solution. Have you understand why we have to do something like this ? If no, feel free to comment here and i will try to provide you more detail. – Yanis-git Apr 16 '18 at 08:06
  • Sir, this solution shows saving the image into the database & then showing it to the user. But, for now I just want to extract it from the `URL` user has inserted & then show on web-page. Isn't it possible without saving the image into the database? Or do something like stackoverflow does, it extracts the images from URL, saves them at `imgur` server which returns image at `https://`? Or simply can we change `http://` to `https://` before saving the content inside editor? (it's fine if some images breaks in this way.) –  Apr 16 '18 at 08:24
  • You can upload in imgur each image inserted on your editor, but for me, is little bit overkilling. I prefer "Proxy" approch who just : client ask your app by : myapp.ltd/img/{path/to/image}, then Django proxy image download. Please check my update with fresh sample – Yanis-git Apr 16 '18 at 09:31