Add setting to disable hotlinking of large image files

feature
1

We just enabled HTTPS on our discourse instance, but are receiving mixed content warnings because a few of the images posted on our forum have http:// URLs.

Checking the box for setting download remote images to local fixes this for 90% of images by uploading the images to the discourse CDN and serving them up over HTTPS. However, if the image is larger than the setting for max image size kb, it gets embedded in the page directly by hotlinking, resulting in mixed content warnings, and our site loses the ‘padlock’ image that users associate with HTTPS.

I would like a setting that disables hotlinking of images that are larger than max image size kb. This would fix our mixed content use case, but it would also be useful for people browsing discourse who don’t have a lot of bandwidth. They could open up the images in a new tab, but the images would not load by default.

5 Likes
2

Adding a #pr-welcome to this, I would like to see mockups though before anyone picks this up.

It is not critical to “remove hotlink right away” instead this can be somewhat delayed until the pull hotlinked images job runs.

Also adding a #planned in cause we want this done for 1.10.

@vinothkannans if you feel like giving this a shot we can sponsor.

6 Likes
3

Yes I can do it. Now I have to create the mockups first, right?

Is it like displaying placeholder image or raw URL until the image download job is done?

2 Likes
4

Yes something like that, if image is too big add a placeholder

Also we need to handle the case where people hotlink a broken HTTP image while there, we should simply strip it for that case

2 Likes
5

I’d like to ask whether Discourse uses MIME type or file extension to detect images for hotlinking?

For me it would make much better sense to use MIME as I’ve seen my members sometimes link images that are missing extension completely.

1 Like
6

http://qaz.wtf/tmp/toy.car

The oneboxer does a HEAD and/or GET, so it should have the MIME type at hand. I don’t know what it uses to decide if something gets turned into an image automatically. I just put a copy of my user icon into a file called “toy.car” and made the server return image/jpeg MIME-type for it, but it won’t display in the preview pane as an image.

64.71.168.196 - - [12/Aug/2017:15:31:39 -0400] "HEAD /tmp/toy.car HTTP/1.1" 200 3281 "-" "Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36"
64.71.168.196 - - [12/Aug/2017:15:31:39 -0400] "GET /tmp/toy.car HTTP/1.1" 200 7202 "-" "Discourse Forum Onebox v1.9.0.beta5"

My browser is Firefox on Linux, so the user-agent in the HEAD is not copying mine.

4 Likes
7

Exactly that is what I saw
 I’d love when user puts URL of image on line by itself, it gets automatically turned into img tag and image hotlinked


1 Like
8

Pretty sure we only use the file extension.

2 Likes
9

Thanks for confirming.

I had to modify manually some links that users posted manually to add img tag around them.

It would be much better if Discourse could use MIME type.

Is there anyone else that agrees?

Can you suggest how hard it would be?

10

Please open a seperate topic with broken examples.

1 Like
11

When the HTTP images should be replaced with placeholder image? Once the post is created or when the download job somehow failed?

External images will not be replaced with local images in the below situations .

  1. Unable to download the external image (may be file not found).
  2. External image is bigger than maximum image size allowed.
  3. Error while moving downloaded temp file to local storage.
  4. Other unknown reasons.

May I use placeholder image for all the above cases? Or broken HTTP images should be stripped completely as you told?

What about HTTPS images? In above cases those also should replaced with placeholder or not?

Can I link placeholder image to original image? So users can see the original image by clicking it.

Any suggestion for default placeholder image? Yes it will have SiteSetting to change.

Sorry for too many questions. I just want to clarify :slight_smile:.

2 Likes
12

No probs let me answer:

For (1) add a special placeholder for “broken image”

For (2) add a different general placeholder for large image

For (3) and unknown, I am fine with “undefined” behavior. In fact I would crash the image post processor for local errors and make sure there is an error in logs.

HTTPS images should also be replaced with placeholder if too big.

Keep in mind, for now, this is optional default off behavior. Only add “too big” placeholders IF replace large images with placeholders is on.

No idea about the placeholder images, just make sure whatever you pick is easily licensable. There may be a font awesome icon you can use, I would try that first.

3 Likes
13

The placeholder image should explain what is happening
 image in text kind of thing.

14

Do you mean text in image? If yes, then what about translations?

15

Can you dig through font-awesome and suggest a couple of glyphs here?

16

Image file

fa-file-image-o

Picture

fa-picture-o

Broken chain

fa-chain-broken

I think above images are related our need.

17

I wonder if you can overlay broken chain on picture or something along those lines for missing image.

1 Like
18

Yes. we can do it using javascript.

19

I think you can do it in straight CSS, you render them side by side and then just adjust positioning. Try a few out.

1 Like
20

okay. I will do :+1: