On ne peut pas mettre d'image en URL data (base64) dans le markdown

a marqué ce sujet comme résolu.
Auteur du sujet

Une fonctionnalité pratique des URLs et/ou du HTML (je ne sais pas d’où ça sort), c’est qu’avec le schéma « data » on peut embarquer des données directement dans l’URL au lieu de pointer avec une ressource externe. C’est très pratique typiquement pour les petites images.

Or, ce schéma n’est pas compris par notre markdown, qui ne génère pas le code attendu. Par exemple :

1
![La Joconde](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAEgASAMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAFAAMEBgcBAv/EAC8QAAIBAwMCBAUEAwEAAAAAAAECAwAEEQUSIRMxBkFRYRQicZHwI4Gx8TJCUjP/xAAZAQACAwEAAAAAAAAAAAAAAAACBAABAwX/xAAhEQACAQUAAgMBAAAAAAAAAAAAAQIDERIhMQQyIkFxE//aAAwDAQACEQMRAD8AGvax9wi889qb+GXkmNftRTphwGC+Q5rw0JzQ5MUxuCGt0Bz01H7Uvh1AOEAJHpRZoQSBUDUrl7ZxaWds1zduM7QpIQepx/FTOxcaeTshgWny/wDmCK9Lbof9B9qFXuoaxYzHrJsXOAGg2g1N0PXotQuRaXCCK4bOwj/F/b2NWp3DlQcekpbRM8ote0tI+couPpUzpENg9qfSDzPapkBimQBZw4yI1JApUSWMc/SlUzJiMRahbNFHt5YgEhTxipgns8j9VQSO/lVMtZo4FWMZJUDJpS3DhlkABI59efegaCuXdkEUbzvjYiljzUDwNcJNbT38rJ1budyu7GcA4AH0AFVm516c2ZtpPljMXTwo+x+tFvBNvYzaJBcSsBPBO5ds4HDnGfbBrGt6jnirdw54ga0vleHrW+5chhuGQayfUwbW9dLd/wBSJ90bDyI5BrSoLHSJdKS5cLMqu7Lggq7Z5z681mmvy9TU5pAAE38AUPj+zRt5HEzQrLWI7lEkK43KCfbIzRi0ZbhNy4IJxWd6ZLD8NGfiAGCAc54qz6BqMdrbukk0bKTlSCePuKalHV0c1P5bDztFBIyyHbgZpUGutVt5GZupyARtPc0qpR0W3vRTrOZQMkHnAz6U+8hDlQMftmm7e2iRV6jENnHB71KklEIJRQwQZJYGo2l1l4t8RHmtjJBJI24hR6V3wtrlvpl5JZ37BLW4JPVGcRkjHI81NMXWug20g6Bxjbye2RQ/T9GvtcuOlaxDAA3uey5qpqLW+G9Fyj+lvu9TsraBra1nWZSflYfwBmqTqe5pmZhgHnmtMbw0j9LqIvUVAGZR/l71VfFukCG9jVSMsnb0xS9OcYsZqRlJA/SRE9qoLYwSDU1SkeT8hx2zQXT7mSC6khVUZWYld391Z7WyZwJbu0RIim5XEgO4/Sm80kc9025EfLZEhOc85HalTkojST9ONQGBDDn5a5UzRP5saG4hJAFPIIB71KZYr2DpxxNFITypOQT+etQdGvlKvHIhyhwHAzx5fntS8Q3pTTxHDPMN7Ycdsik2nnidDWGQDvHFxciCDAjLhS3m2PP6VsXhjRU0fT1VcHqHdkefFY3pskcZaVxwnI/P2qzaP4gv7cDpXbosZ4QkFc/Q1pWg+IClNLbNWaFsE47is+8XW0txqG1SFVVwWYgAd+a5P491BbZ97xYxwwTB/b+qpVzqVzqlyXlc7B3LHOTWcKMm7mkq0UrE27s9Ls7Uot8J5u4Kgnn69qe0PxC0afDToXUZAKtt/DQ6TTWmi3wbQv8A07cmoBR4JvlwWU5z6UyoJq1xZyd+Gh27W2q2rGENGU75cHHvjvSqtiZljSZQo3gFCh86VBFM0lFBDT76KxR1W3JGSWdmGTQbWr06tdr0Y+nGq4Ax3965SolFJ5AXbVgPtMMhVuOaciYs23cR83f2zSpVqtozfbHrUJd5CDtjgCm7XDypFj5Sea5Sq7aK+wjc6o7R9C1yq85YentQ+Bgkp388HNcpVUVbQUthK0mt3thE8Dlw3DpgUqVKhkrMOO0f/9k=)

Devrait afficher une miniature avec la Joconde parce que le parseur devrait générer ce code HTML :

1
2
<figure><img alt="" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAEgASAMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAFAAMEBgcBAv/EAC8QAAIBAwMCBAUEAwEAAAAAAAECAwAEEQUSIRMxBkFRYRQicZHwI4Gx8TJCUjP/xAAZAQACAwEAAAAAAAAAAAAAAAACBAABAwX/xAAhEQACAQUAAgMBAAAAAAAAAAAAAQIDERIhMQQyIkFxE//aAAwDAQACEQMRAD8AGvax9wi889qb+GXkmNftRTphwGC+Q5rw0JzQ5MUxuCGt0Bz01H7Uvh1AOEAJHpRZoQSBUDUrl7ZxaWds1zduM7QpIQepx/FTOxcaeTshgWny/wDmCK9Lbof9B9qFXuoaxYzHrJsXOAGg2g1N0PXotQuRaXCCK4bOwj/F/b2NWp3DlQcekpbRM8ote0tI+couPpUzpENg9qfSDzPapkBimQBZw4yI1JApUSWMc/SlUzJiMRahbNFHt5YgEhTxipgns8j9VQSO/lVMtZo4FWMZJUDJpS3DhlkABI59efegaCuXdkEUbzvjYiljzUDwNcJNbT38rJ1budyu7GcA4AH0AFVm516c2ZtpPljMXTwo+x+tFvBNvYzaJBcSsBPBO5ds4HDnGfbBrGt6jnirdw54ga0vleHrW+5chhuGQayfUwbW9dLd/wBSJ90bDyI5BrSoLHSJdKS5cLMqu7Lggq7Z5z681mmvy9TU5pAAE38AUPj+zRt5HEzQrLWI7lEkK43KCfbIzRi0ZbhNy4IJxWd6ZLD8NGfiAGCAc54qz6BqMdrbukk0bKTlSCePuKalHV0c1P5bDztFBIyyHbgZpUGutVt5GZupyARtPc0qpR0W3vRTrOZQMkHnAz6U+8hDlQMftmm7e2iRV6jENnHB71KklEIJRQwQZJYGo2l1l4t8RHmtjJBJI24hR6V3wtrlvpl5JZ37BLW4JPVGcRkjHI81NMXWug20g6Bxjbye2RQ/T9GvtcuOlaxDAA3uey5qpqLW+G9Fyj+lvu9TsraBra1nWZSflYfwBmqTqe5pmZhgHnmtMbw0j9LqIvUVAGZR/l71VfFukCG9jVSMsnb0xS9OcYsZqRlJA/SRE9qoLYwSDU1SkeT8hx2zQXT7mSC6khVUZWYld391Z7WyZwJbu0RIim5XEgO4/Sm80kc9025EfLZEhOc85HalTkojST9ONQGBDDn5a5UzRP5saG4hJAFPIIB71KZYr2DpxxNFITypOQT+etQdGvlKvHIhyhwHAzx5fntS8Q3pTTxHDPMN7Ycdsik2nnidDWGQDvHFxciCDAjLhS3m2PP6VsXhjRU0fT1VcHqHdkefFY3pskcZaVxwnI/P2qzaP4gv7cDpXbosZ4QkFc/Q1pWg+IClNLbNWaFsE47is+8XW0txqG1SFVVwWYgAd+a5P491BbZ97xYxwwTB/b+qpVzqVzqlyXlc7B3LHOTWcKMm7mkq0UrE27s9Ls7Uot8J5u4Kgnn69qe0PxC0afDToXUZAKtt/DQ6TTWmi3wbQv8A07cmoBR4JvlwWU5z6UyoJq1xZyd+Gh27W2q2rGENGU75cHHvjvSqtiZljSZQo3gFCh86VBFM0lFBDT76KxR1W3JGSWdmGTQbWr06tdr0Y+nGq4Ax3965SolFJ5AXbVgPtMMhVuOaciYs23cR83f2zSpVqtozfbHrUJd5CDtjgCm7XDypFj5Sea5Sq7aK+wjc6o7R9C1yq85YentQ+Bgkp388HNcpVUVbQUthK0mt3thE8Dlw3DpgUqVKhkrMOO0f/9k="><figcaption>La Joconde</figcaption>
</figure>

Mais à la place on obtient :

1
2
<figure><img alt="" src=""><figcaption>La Joconde</figcaption>
</figure>

Ce qui donne évidemment :

La Joconde

Édité par SpaceFox

Globalement, ça permet d’inclure des images trompeuses sans passer par les vérifications habituelles. Ce n’est pas un risque pour la plateforme mais pour les gens qui l’utilisent. Ensuite, ça peut amener d’autres désagrément plus légers et moins orientés sécu.

+0 -0

Ça pose 2-3 problèmes à mon avis SpaceFox.

  • Ça va rendre l’export vers PDF encore plus compliqué a priori
  • Les SVG peuvent contenir des scripts JS qui s’exécuteraient donc sur notre domaine, permettant de voler des cookies ou autres CSRF (on est vraisemblablement protégé de ceci avec un browser moderne, mais bon)
  • Ça donne un bon moyen de pas mal alourdir notre DB de façon assez invisible (Actuellement tu peux flanquer quelques dizaines de milliers de retours à la ligne dans un post pour emmerder, mais je crois que c’est le seul moyen qu’une personne lisant ton post sans voir la source ne puisse pas détecter ton manège. Si quelqu’un abusait d’un pixel transparent pesant 25Mo (ce qui est faisable quand t’es malintentionné), notre MySQL pourrait ne pas apprécier.)

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+5 -0

On peut vraiment mettre un svg en base64 dans une balise image ?

A-312

Copie-colle ceci : https://gist.githubusercontent.com/vhf/849331df0c436fa8cf6473c0a340d6f7/raw/dbb7c1be275487d321c5f2d3f58a7121d23ebb82/svg.md

A la place du champ en haut à gauche ici : https://zestedesavoir.github.io/zmarkdown/public/html.html

:)

(Granted it’s not b64 but still.)

Édité par cepus

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte