[stable25] Fix regression: Use preview for unsupported images (fix #1408)

src/components/Images.vue

@@ -100,17 +100,22 @@ export default {
 
  asyncComputed: {
  data() {
+ // Avoid svg xss attack vector
  if (this.mime === 'image/svg+xml') {
  return this.getBase64FromImage()
  }
 
- if (this.source) {
- return this.source
- }
-
+ // Load the raw gif instead of the static preview
  if (this.mime === 'image/gif') {
  return this.src
  }
+
+ // If there is no preview and we have a drirect source
+ // load it instead
+ if (this.source && !this.hasPreview) {
+ return this.source
+ }
+
  return this.previewPath
  },
  },

src/mixins/PreviewUrl.js

@@ -34,7 +34,6 @@ export default {
  previewPath() {
  return this.getPreviewIfAny({
  fileid: this.fileid,
- source: this.source,
  filename: this.filename,
  hasPreview: this.hasPreview,
  davPath: this.davPath,
@@ -60,17 +59,12 @@ export default {
  *
  * @param {object} data destructuring object
  * @param {string} data.fileid the file id
- * @param {?string} data.source the download source
  * @param {boolean} data.hasPreview have the file an existing preview ?
  * @param {string} data.davPath the absolute dav path
  * @param {string} data.filename the file name
  * @return {string} the absolute url
  */
- getPreviewIfAny({ fileid, source, filename, hasPreview, davPath }) {
- if (source) {
- return source
- }
-
+ getPreviewIfAny({ fileid, filename, hasPreview, davPath }) {
  const searchParams = `fileId=${fileid}`
  + `&x=${Math.floor(screen.width * devicePixelRatio)}`
  + `&y=${Math.floor(screen.height * devicePixelRatio)}`

src/models/images.js

@@ -26,21 +26,37 @@ import Images from '../components/Images.vue'
 
 const enabledPreviewProviders = loadState(appName, 'enabled_preview_providers', [])
 
-const mimes = [
- 'image/bmp',
+/**
+ * Those mimes needs a proper preview to be displayed
+ * if they are not enabled on the server, let's not activate them.
+ */
+const previewSupportedMimes = [
  'image/heic',
  'image/heif',
+ 'image/tiff',
+ 'image/x-xbitmap',
+]
+
+/**
+ * Those mimes are always supported by the browser
+ * Since we fallback to the source image if there is no
+ * preview, we can always include them.
+ */
+const browserSupportedMimes = [
+ 'image/apng',
+ 'image/bmp',
+ 'image/gif',
  'image/jpeg',
  'image/png',
- 'image/tiff',
+ 'image/svg+xml',
  'image/webp',
- 'image/x-xbitmap',
+ 'image/x-icon',
 ]
 
 // Filter out supported mimes that are _not_
 // enabled in the preview API
 const filterEnabledMimes = () => {
- return mimes.filter(filter => {
+ return previewSupportedMimes.filter(filter => {
  return enabledPreviewProviders.findIndex(mimeRegex => {
  // Remove leading and trailing slash from string regex
  const regex = new RegExp(mimeRegex.replace(/^\/|\/$/g, ''), 'i')
@@ -50,7 +66,7 @@ const filterEnabledMimes = () => {
 }
 
 const enabledMimes = filterEnabledMimes()
-const ignoredMimes = mimes.filter(x => !enabledMimes.includes(x))
+const ignoredMimes = previewSupportedMimes.filter(x => !enabledMimes.includes(x))
 if (ignoredMimes.length > 0) {
  logger.warn('Some mimes were ignored because they are not enabled in the server previews config', { ignoredMimes })
 }
@@ -59,9 +75,7 @@ export default {
  id: 'images',
  group: 'media',
  mimes: [
- // Gif and svg images does not rely on previews
- 'image/gif',
- 'image/svg+xml',
+ ...browserSupportedMimes,
  ...enabledMimes,
  ],
  component: Images,