element web
1.11.83
Element (anciennement connu sous le nom de Vector et Riot) est un client Web Matrix construit à l'aide du SDK Matrix JS.
Element propose plusieurs niveaux de prise en charge pour différents environnements :
Soutenu
Problèmes activement triés , les régressions bloquent la publication
Définition:
Les 2 dernières versions majeures de Chrome, Firefox et Edge sur les systèmes d'exploitation de bureau
2 dernières versions de Safari
Dernière version de l'application officielle Element Desktop sur les systèmes d'exploitation de bureau
Les systèmes d'exploitation de bureau désignent les versions macOS, Windows et Linux pour les appareils de bureau qui sont activement prises en charge par le fournisseur du système d'exploitation et reçoivent des mises à jour de sécurité.
Meilleur effort
Problèmes acceptés , les régressions ne bloquent pas la sortie
Les produits Element plus larges (y compris Element Call et Enterprise Server Suite) ne prennent toujours pas officiellement en charge ces navigateurs.
Le projet Web Element et ses contributeurs doivent maintenir le fonctionnement du client et se dégrader progressivement là où d'autres fonctionnalités sœurs (par exemple, Element Call) peuvent ne pas fonctionner.
Définition:
Dernière version majeure de Firefox ESR et Chrome/Edge Extended Stable
Prise en charge par la communauté
Problèmes acceptés , les régressions ne bloquent pas la sortie
Les contributions de la communauté sont les bienvenues pour soutenir ces problèmes
Définition:
Web mobile pour la version stable actuelle de Chrome, Firefox et Safari sur Android, iOS et iPadOS
Non pris en charge
Définition : les problèmes affectant uniquement les environnements non pris en charge sont résolus
Tout le reste
La période de support pour ces niveaux doit durer jusqu'aux versions spécifiées ci-dessus, plus 1 cycle de publication d'application (2 semaines). Dans le cas de Firefox ESR, cela est encore étendu pour lui permettre d'atterrir dans Debian Stable.
Pour accéder à Element sur un appareil Android ou iOS, nous recommandons actuellement les applications natives element-android et element-ios.
Le moyen le plus simple de tester Element consiste simplement à utiliser la copie hébergée sur https://app.element.io. La branche develop est déployée en permanence sur https://develop.element.io pour ceux qui aiment vivre dangereusement.
Pour héberger votre propre instance d’Element, consultez Installation d’Element Web.
Pour installer Element en tant qu'application de bureau, consultez Exécuter en tant qu'application de bureau ci-dessous.
Nous vous déconseillons d'exécuter Element à partir du même nom de domaine que votre serveur domestique Matrix. La raison en est le risque de vulnérabilités XSS (cross-site-scripting) qui pourraient survenir si quelqu'un faisait en sorte qu'Element charge et restitue du contenu malveillant généré par un utilisateur à partir d'une API Matrix qui avait alors un accès fiable à Element (ou à d'autres applications) en raison du partage du même domaine.
Nous avons mis en place quelques mesures d'atténuation grossières pour tenter de nous protéger contre cette situation, mais ce n'est toujours pas une bonne pratique de le faire en premier lieu. Voir #1977 pour plus de détails.
Sauf si vous avez des exigences particulières, vous souhaiterez ajouter les éléments suivants à la configuration de votre serveur Web lors de l'hébergement d'Element Web :
L'en-tête X-Frame-Options: SAMEORIGIN , pour empêcher Element Web d'être encadré et le protéger du détournement de clic.
La directive frame-ancestors 'self' de votre en-tête Content-Security-Policy , en remplacement moderne de X-Frame-Options (bien que les deux devraient être incluses car tous les navigateurs ne la prennent pas encore en charge, voir ceci).
L'en-tête X-Content-Type-Options: nosniff , pour désactiver le reniflage MIME.
La X-XSS-Protection: 1; mode=block; en-tête, pour la protection XSS de base dans les navigateurs existants.
Si vous utilisez nginx, cela ressemblerait à ceci :
add_header X-Frame-Options SAMEORIGIN; add_header X-Content-Type-Options nosniff; add_header X-XSS-Protection "1; mode=block"; add_header Content-Security-Policy "frame-ancestors 'self'";
Pour Apache, la configuration ressemble à :
Header set X-Frame-Options SAMEORIGIN Header set X-Content-Type-Options nosniff Header set X-XSS-Protection "1; mode=block" Header set Content-Security-Policy "frame-ancestors 'self'"
Remarque : Si vous définissez déjà un en-tête Content-Security-Policy ailleurs, vous devez le modifier pour inclure la directive frame-ancestors au lieu d'ajouter cette dernière ligne.
Element est une application Web modulaire construite avec ES6 moderne et utilise un système de construction Node.js. Assurez-vous que la dernière version LTS de Node.js est installée.
Il est recommandé d'utiliser yarn au lieu de npm . Veuillez consulter le guide d'installation de Yarn si vous ne l'avez pas déjà.
Installez ou mettez à jour node.js afin que votre node soit au moins le LTS actuellement recommandé.
Installez yarn s'il n'est pas déjà présent.
Clonez le dépôt : git clone https://github.com/element-hq/element-web.git .
Basculez vers le répertoire element-web : cd element-web .
Installez les prérequis : yarn install .
Si vous utilisez la branche develop , il est recommandé de configurer un environnement de développement approprié (voir Configuration d'un environnement de développement ci-dessous). Vous pouvez également utiliser https://develop.element.io - la version d'intégration continue de la branche de développement.
Configurez l'application en copiant config.sample.json dans config.json et en le modifiant. Voir les documents de configuration pour plus de détails.
yarn dist pour créer une archive tar à déployer. Décompresser ce fichier donnera un répertoire spécifique à la version contenant tous les fichiers qui doivent être placés sur votre serveur Web.
Notez que yarn dist n'est pas pris en charge sous Windows, les utilisateurs de Windows peuvent donc exécuter yarn build , qui construira tous les fichiers nécessaires dans le répertoire webapp . La version d'Element n'apparaîtra pas dans les paramètres sans utiliser le script dist. Vous pouvez ensuite monter le répertoire webapp sur votre serveur Web pour diffuser l'application, qui est un contenu entièrement statique.
Element peut également être exécuté en tant qu’application de bureau, enveloppée dans Electron. Vous pouvez télécharger une version prédéfinie depuis https://element.io/get-started ou, si vous préférez, la créer vous-même.
Pour le créer vous-même, suivez les instructions sur https://github.com/element-hq/element-desktop.
Un grand merci à @aviraldg pour le travail initial sur l'intégration d'Electron.
Les documents de configuration montrent comment remplacer les paramètres par défaut de l'application de bureau si vous le souhaitez.
Element prend en charge une variété de paramètres pour configurer les serveurs, le comportement, les thèmes par défaut, etc. Consultez la documentation de configuration pour plus de détails.
Certaines fonctionnalités d'Element peuvent être activées par des indicateurs dans la section Labs des paramètres. Certaines de ces fonctionnalités sont décrites dans labs.md.
Element nécessite que les URL suivantes ne soient pas mises en cache lorsque/si vous diffusez Element à partir de votre propre serveur Web :
/config.*.json /i18n /home /sites /index.html
Nous vous recommandons également de forcer les navigateurs à revalider toute copie en cache d'Element lors du chargement de la page en configurant votre serveur Web pour qu'il renvoie Cache-Control: no-cache for / . Cela garantit que le navigateur récupérera une nouvelle version d'Element lors du prochain chargement de la page après son déploiement. Notez que ceci est déjà configuré pour vous dans la configuration nginx de notre Dockerfile.
Avant d'essayer de développer sur Element, vous devez lire le guide du développeur pour matrix-react-sdk , qui définit également la conception, l'architecture et le style d'Element.
Lisez la page Choisir un problème pour savoir par où commencer. Avant de commencer à travailler sur une fonctionnalité, il est préférable de vous assurer que votre plan correspond bien à notre vision d'Element. Veuillez discuter avec l'équipe sur #element-dev:matrix.org avant de commencer afin que nous puissions nous assurer que c'est quelque chose que nous serions prêts à fusionner.
Vous devriez également vous familiariser avec le guide "Here be Dragons" sur les dragons apprivoisés et pas si apprivoisés (pièges) qui existent dans la base de code.
L'idée d'Element est d'être une "peau" relativement légère de personnalisations au-dessus du matrix-react-sdk sous-jacente. matrix-react-sdk fournit à la fois les composants React de niveau supérieur et inférieur utiles pour créer des applications de communication Matrix à l'aide de React.
Veuillez noter qu'Element est destiné à fonctionner correctement sans accès à l'Internet public. Veuillez donc ne pas dépendre des ressources (librairies JS, CSS, images, polices) hébergées par des CDN ou des serveurs externes, mais veuillez plutôt regrouper toutes les dépendances dans Element lui-même.
Une grande partie des fonctionnalités d'Element se trouve en fait dans le module matrix-js-sdk . Il est possible de les configurer de manière à faciliter le suivi des branches develop dans git et à apporter des modifications locales sans avoir à reconstruire manuellement à chaque fois.
Commencez par cloner et construire matrix-js-sdk :
clone git https://github.com/matrix-org/matrix-js-sdk.gitpushd matrice-js-sdk lien de fil fil installpopd
Clonez le dépôt et basculez vers le répertoire element-web :
git clone https://github.com/element-hq/element-web.gitcd element-web
Configurez l'application en copiant config.sample.json dans config.json et en le modifiant. Voir les documents de configuration pour plus de détails.
Enfin, construisez et démarrez Element lui-même :
lien de fil matrice-js-sdk installation de fil début du fil
Attendez quelques secondes pour que la construction initiale se termine ; vous devriez voir quelque chose comme :
[element-js] <s> [webpack.Progress] 100% [element-js] [element-js] ℹ ｢wdm｣: 1840 modules [element-js] ℹ ｢wdm｣: Compiled successfully.
N'oubliez pas que la commande ne se terminera pas puisqu'elle exécute le serveur Web et reconstruit les fichiers source lorsqu'ils sont modifiés. Ce serveur de développement désactive également la mise en cache, ne l'utilisez donc PAS en production.
Ouvrez http://127.0.0.1:8080/ dans votre navigateur pour voir votre élément nouvellement construit.
Remarque : Le script de build utilise inotify par défaut sous Linux pour surveiller les modifications dans les répertoires. Si les limites d'inotify sont trop basses, votre build échouera silencieusement ou avec Error: EMFILE: too many open files . Pour éviter ces problèmes, nous recommandons une limite de surveillance d'au moins 128M et une limite d'instance d'environ 512 .
Vous pourriez être intéressé par les numéros #15750 et #15774 pour plus de détails.
Pour définir une nouvelle limite de surveillance et d'instance inotify, exécutez :
sudo sysctl fs.inotify.max_user_watches=131072 sudo sysctl fs.inotify.max_user_instances=512 sudo sysctl -p
Si vous le souhaitez, vous pouvez rendre les nouvelles limites permanentes, en exécutant :
echo fs.inotify.max_user_watches=131072 | sudo tee -a /etc/sysctl.conf echo fs.inotify.max_user_instances=512 | sudo tee -a /etc/sysctl.conf sudo sysctl -p
Lorsque vous apportez des modifications à matrix-js-sdk elles doivent être automatiquement récupérées par Webpack et construites.
Si l'une de ces étapes entraîne une erreur file table overflow , vous êtes probablement sur un Mac qui a une limite très basse sur le nombre maximum de fichiers ouverts. Exécutez ulimit -Sn 1024 et réessayez. Vous devrez le faire dans chaque nouveau terminal que vous ouvrez avant de créer Element.
Il existe un certain nombre de tests au niveau de l'application dans le répertoire tests ; ceux-ci sont conçus pour fonctionner avec Jest et JSDOM. Pour les exécuter
yarn test
Voir Matrix-react-sdk pour savoir comment exécuter les tests de bout en bout.
Pour ajouter une nouvelle traduction, rendez-vous sur le document de traduction.
Pour un guide du développeur, consultez le document de développement de traduction.
Les problèmes sont triés par les membres de la communauté et l'équipe Web App, à la suite du processus de triage.
Nous utilisons des étiquettes de problème pour trier tous les problèmes entrants.
