Future fix https and tinymce's images

PunKeel

Member
Hi,

When inserting an image from a http site, an error is thrown: The browser refuses to load it and displays the error image.

It might not be possible to insert the media preview, because of the proxy hash, but there has to be a solution somehow ... (displaying a better 'preview' image ?)


Screenshot:
BYm8n
 
I'm not clear on a few things here:
  1. You mention TinyMCE by name. XenForo doesn't use TinyMCE, but there is an add-on that does. Can you clarify what you're referring to?
  2. Where are you seeing this issue? Can you reproduce it here?
  3. Can you provide exact reproduction steps?
 
1. Meant redactor, sorry. I use TinyMCE for my webdev, and thought that XenForo was using it, too.
2. I could reproduce it here, on xenforo.com
3. To reproduce,
When typing a reply, click the "Insert image" icon[1], type this URL: http://j.ungeek.eu/FFVWHfj and insert.


What it does, here, on xenforo.com, is mark the website as insecure. On my side, as I use a CSP to prevent this, the image is not loaded, and the error image is shown.
5WRXt3
 
So, the crux of the issue seems to be that image previews in the (redactor) editor aren't run through the image proxy. Thus, images loaded from an insecure website on an https forum will not show properly until the message is actually posted.
 
A key thing to note here is that this doesn't happen out of the box. It requires a content security policy to be set in such a way that prevents this (default-src set to https: or a limited image-src, for example). Chrome, Firefox and IE will all display the image in the editor (including when editing), though it will give a mixed content indication. Given the temporary nature of it, we consider this to be acceptable.

It's not feasible to run the display through the image proxy without more extensive changes which aren't really viable in the short term. (And given that it has minimal problems out of the box.) I looked at applying a class to images that failed to load to give some styling options, though that itself is a bit of a pain (because the error event doesn't bubble). As such, that's not really viable.

I'm going to move this to be considered at some point in the future. In the meantime, you can likely workaround it by removing image-src restrictions if you want to set a CSP.
 
Just adding my note here, this will be very nice to have fixed at some point, even though Mike's reply above seems to indicate it isn't a trivial fix.

It's sad to lose the secure status when in the editor and embedding a picture from a non-https site.

And that secure status remains lost after submitting the post, because the AJAX doesn't refresh the page fully. After manual refresh, the secure status returns, of course.

+1
 
Bumping this as this issue is a bit more problematic on XF 2 when CSP Block-All-Mixed-Content is enabled (disabling that is not an option):
On XF 1 a user can just insert a HTTP image through the insert image icon of the editor, it will show up as broken first but it does work after the post has been submitted and the image proxy kicks in.

On XF 2 however this is not possible, the user does get an error "Something went wrong. Please try again later or contact the administrator."
This is rather bad, as it effectievly prevents users from posting HTTP images - especially as the placholder text ist http:// ...

Maybe smth. could be done here for XF 2.1 @Mike?
 
Last edited:
As we've recently migrated another forum to XF 2, we are again getting support requests/complaints due to this issue.
Given that this bug report is almost 3 years old and we are now at a different major version, it would be really nice if this could be addressed in a timely manner.
 
Adding this code in head section you'll never see a similar warning for images
HTML:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
 
Top Bottom