element web Download - element web Quellcode herunterladen

element web

Anderer Quellcode

1.11.83

Herunterladen

Element

Element (früher bekannt als Vector und Riot) ist ein Matrix-Webclient, der mit dem Matrix JS SDK erstellt wurde.

Unterstützte Umgebungen

Element bietet mehrere Unterstützungsebenen für verschiedene Umgebungen:

Unterstützt

Probleme werden aktiv geprüft , Regressionen blockieren die Veröffentlichung
Definition:
Die letzten beiden Hauptversionen von Chrome, Firefox und Edge auf Desktop-Betriebssystemen
Letzte 2 Versionen von Safari
Neueste Version der offiziellen Element Desktop-App für Desktop-Betriebssysteme
Unter Desktop-Betriebssystemen versteht man macOS-, Windows- und Linux-Versionen für Desktop-Geräte, die vom Betriebssystemanbieter aktiv unterstützt werden und Sicherheitsupdates erhalten

Beste Anstrengung

Probleme akzeptiert , Regressionen blockieren die Veröffentlichung nicht
Die umfassenderen Element-Produkte (einschließlich Element Call und die Enterprise Server Suite) unterstützen diese Browser immer noch nicht offiziell.
Das Element-Webprojekt und seine Mitwirkenden sollten dafür sorgen, dass der Client funktionsfähig bleibt und sich dort ordnungsgemäß verschlechtern, wo andere Geschwisterfunktionen (z. B. Element-Aufruf) möglicherweise nicht funktionieren.
Definition:
Letzte Hauptversion von Firefox ESR und Chrome/Edge Extended Stable

Von der Gemeinschaft unterstützt

Probleme akzeptiert , Regressionen blockieren die Veröffentlichung nicht
Community-Beiträge sind willkommen, um diese Probleme zu unterstützen
Definition:
Mobiles Web für die aktuelle stabile Version von Chrome, Firefox und Safari auf Android, iOS und iPadOS

Nicht unterstützt

Definition: Probleme, die nur nicht unterstützte Umgebungen betreffen, sind behoben
Alles andere

Der Supportzeitraum für diese Stufen sollte bis zu den oben angegebenen Veröffentlichungen dauern, plus 1 App-Veröffentlichungszyklus (2 Wochen). Im Fall von Firefox ESR wird dies noch erweitert, damit es in Debian Stable landen kann.

Für den Zugriff auf Element auf einem Android- oder iOS-Gerät empfehlen wir derzeit die nativen Apps element-android und element-ios.

Erste Schritte

Der einfachste Weg, Element zu testen, besteht darin, einfach die gehostete Kopie unter https://app.element.io zu verwenden. Der develop wird kontinuierlich auf https://develop.element.io für diejenigen bereitgestellt, die gerne gefährlich leben.

Informationen zum Hosten Ihrer eigenen Instanz von Element finden Sie unter Installieren von Element Web.

Informationen zur Installation von Element als Desktop-Anwendung finden Sie weiter unten unter „Als Desktop-App ausführen“.

Wichtige Sicherheitshinweise

Separate Domänen

Wir empfehlen nicht, Element unter demselben Domänennamen wie Ihr Matrix-Homeserver auszuführen. Der Grund ist das Risiko von XSS-Schwachstellen (Cross-Site-Scripting), die auftreten könnten, wenn jemand Element dazu veranlassen würde, bösartige benutzergenerierte Inhalte von einer Matrix-API zu laden und darzustellen, die dann aufgrund der Freigabe vertrauenswürdigen Zugriff auf Element (oder andere Apps) hatte gleiche Domäne.

Wir haben einige grobe Abhilfemaßnahmen ergriffen, um uns vor dieser Situation zu schützen, aber es ist immer noch keine gute Praxis, dies überhaupt zu tun. Weitere Einzelheiten finden Sie unter #1977.

Best Practices für die Konfiguration

Sofern Sie keine besonderen Anforderungen haben, sollten Sie beim Hosten von Element Web Folgendes zu Ihrer Webserverkonfiguration hinzufügen:

Der X-Frame-Options: SAMEORIGIN Header, um zu verhindern, dass Element Web eingerahmt wird, und um vor Clickjacking zu schützen.
Die frame-ancestors 'self' für Ihren Content-Security-Policy Header als moderner Ersatz für X-Frame-Options (obwohl beide enthalten sein sollten, da sie noch nicht von allen Browsern unterstützt wird, siehe hier).
Der X-Content-Type-Options: nosniff Header, um MIME-Sniffing zu deaktivieren.
Der X-XSS-Protection: 1; mode=block; Header für grundlegenden XSS-Schutz in älteren Browsern.

Wenn Sie Nginx verwenden, würde dies etwa wie folgt aussehen:

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'";

Für Apache sieht die Konfiguration so aus:

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'"

Hinweis: Falls Sie bereits an anderer Stelle einen Content-Security-Policy Header festlegen, sollten Sie ihn so ändern, dass er die Direktive frame-ancestors enthält, anstatt diese letzte Zeile hinzuzufügen.

Aus der Quelle bauen

Element ist eine modulare Webanwendung, die mit modernem ES6 erstellt wurde und ein Node.js-Build-System verwendet. Stellen Sie sicher, dass Sie die neueste LTS-Version von Node.js installiert haben.

Es wird empfohlen, yarn anstelle von npm zu verwenden. Bitte lesen Sie die Yarn-Installationsanleitung, falls Sie diese noch nicht haben.

Installieren oder aktualisieren Sie node.js , sodass Ihr node mindestens das aktuell empfohlene LTS hat.
Installieren Sie yarn , falls noch nicht vorhanden.
Klonen Sie das Repo: git clone https://github.com/element-hq/element-web.git .
Wechseln Sie in das Element-Web-Verzeichnis: cd element-web .
Installieren Sie die Voraussetzungen: yarn install .

Wenn Sie den develop verwenden, wird empfohlen, eine geeignete Entwicklungsumgebung einzurichten (siehe Einrichten einer Entwicklungsumgebung weiter unten). Alternativ können Sie https://develop.element.io verwenden – die kontinuierliche Integrationsversion des Entwicklungszweigs.

Konfigurieren Sie die App, indem Sie config.sample.json nach config.json kopieren und ändern. Einzelheiten finden Sie in den Konfigurationsdokumenten.
yarn dist um einen Tarball für die Bereitstellung zu erstellen. Durch das Entpacken dieser Datei erhalten Sie ein versionspezifisches Verzeichnis mit allen Dateien, die auf Ihrem Webserver gespeichert werden müssen.

Beachten Sie, dass yarn dist unter Windows nicht unterstützt wird. Daher können Windows-Benutzer yarn build ausführen, wodurch alle erforderlichen Dateien im webapp Verzeichnis erstellt werden. Ohne Verwendung des dist-Skripts wird die Version von Element nicht in den Einstellungen angezeigt. Anschließend können Sie das webapp Verzeichnis auf Ihrem Webserver bereitstellen, um die App tatsächlich bereitzustellen, bei der es sich um vollständig statischen Inhalt handelt.

Läuft als Desktop-App

Element kann auch als Desktop-App ausgeführt werden, verpackt in Electron. Sie können eine vorgefertigte Version von https://element.io/get-started herunterladen oder, wenn Sie möchten, selbst erstellen.

Um es selbst zu erstellen, befolgen Sie die Anweisungen unter https://github.com/element-hq/element-desktop.

Vielen Dank an @aviraldg für die erste Arbeit an der Electron-Integration.

Die Konfigurationsdokumente zeigen, wie Sie bei Bedarf die Standardeinstellungen der Desktop-App überschreiben können.

config.json

Element unterstützt eine Vielzahl von Einstellungen zum Konfigurieren von Standardservern, Verhalten, Themen usw. Weitere Informationen finden Sie in den Konfigurationsdokumenten.

Labs-Funktionen

Einige Funktionen von Element können durch Flags im Abschnitt Labs der Einstellungen aktiviert werden. Einige dieser Funktionen werden in labs.md beschrieben.

Caching-Anforderungen

Element erfordert, dass die folgenden URLs nicht zwischengespeichert werden, wenn Sie Element von Ihrem eigenen Webserver bereitstellen:

/config.*.json
/i18n
/home
/sites
/index.html

Wir empfehlen außerdem, dass Sie Browser zwingen, jede zwischengespeicherte Kopie von Element beim Laden der Seite erneut zu validieren, indem Sie Ihren Webserver so konfigurieren, dass er Cache-Control: no-cache for / zurückgibt. Dadurch wird sichergestellt, dass der Browser beim nächsten Laden der Seite nach der Bereitstellung eine neue Version von Element abruft. Beachten Sie, dass dies in der Nginx-Konfiguration unserer Docker-Datei bereits für Sie konfiguriert ist.

Entwicklung

Bevor Sie versuchen, auf Element zu entwickeln, müssen Sie den Entwicklerleitfaden für matrix-react-sdk lesen, der auch das Design, die Architektur und den Stil für Element definiert.

Auf der Seite „Ein Problem auswählen“ finden Sie Hinweise, wo Sie anfangen sollten. Bevor Sie mit der Arbeit an einer Funktion beginnen, stellen Sie am besten sicher, dass Ihr Plan gut mit unserer Vision für Element übereinstimmt. Bitte chatten Sie mit dem Team in #element-dev:matrix.org, bevor Sie beginnen, damit wir sicherstellen können, dass wir bereit sind, es zusammenzuführen.

Sie sollten sich auch mit dem Leitfaden „Here be Dragons“ zu den zahmen und nicht ganz so zahmen Drachen (Fallstricken) vertraut machen, die in der Codebasis vorhanden sind.

Die Idee von Element besteht darin, eine relativ leichte „Haut“ von Anpassungen auf dem zugrunde liegenden matrix-react-sdk zu sein. matrix-react-sdk stellt sowohl die React-Komponenten höherer als auch niedrigerer Ebene bereit, die für die Erstellung von Matrix-Kommunikations-Apps mit React nützlich sind.

Bitte beachten Sie, dass Element auch ohne Zugriff auf das öffentliche Internet ordnungsgemäß ausgeführt werden soll. Verlassen Sie sich also bitte nicht auf Ressourcen (JS-Bibliotheken, CSS, Bilder, Schriftarten), die von externen CDNs oder Servern gehostet werden, sondern packen Sie stattdessen alle Abhängigkeiten in Element selbst.

Einrichten einer Entwicklungsumgebung

Ein Großteil der Funktionalität in Element befindet sich tatsächlich im Modul matrix-js-sdk . Es ist möglich, diese so einzurichten, dass es einfach ist, die develop in Git zu verfolgen und lokale Änderungen vorzunehmen, ohne jedes Mal manuell neu erstellen zu müssen.

Klonen und erstellen Sie zuerst matrix-js-sdk :

 Git-Klon https://github.com/matrix-org/matrix-js-sdk.gitpushd Matrix-js-sdk
Garnverbindung
Garn installpopd

Klonen Sie das Repo und wechseln Sie in das element-web Verzeichnis:

 Git-Klon https://github.com/element-hq/element-web.gitcd element-web

Konfigurieren Sie die App, indem Sie config.sample.json nach config.json kopieren und ändern. Einzelheiten finden Sie in den Konfigurationsdokumenten.

Zum Schluss erstellen und starten Sie Element selbst:

 Garn-Link-Matrix-js-sdk
Garn installieren
Garnanfang

Warten Sie einige Sekunden, bis der erste Build abgeschlossen ist. Sie sollten etwa Folgendes sehen:

[element-js] <s> [webpack.Progress] 100%
[element-js]
[element-js] ℹ ｢wdm｣:    1840 modules
[element-js] ℹ ｢wdm｣: Compiled successfully.

Denken Sie daran, dass der Befehl nicht beendet wird, da er den Webserver ausführt und Quelldateien neu erstellt, wenn sie sich ändern. Dieser Entwicklungsserver deaktiviert auch das Caching. Verwenden Sie ihn daher NICHT in der Produktion.

Öffnen Sie http://127.0.0.1:8080/ in Ihrem Browser, um Ihr neu erstelltes Element anzuzeigen.

Hinweis : Das Build-Skript verwendet unter Linux standardmäßig inotify, um Verzeichnisse auf Änderungen zu überwachen. Wenn die Inotify-Grenzwerte zu niedrig sind, schlägt Ihr Build stillschweigend oder mit Error: EMFILE: too many open files fehl. Um diese Probleme zu vermeiden, empfehlen wir ein Überwachungslimit von mindestens 128M und ein Instanzlimit von etwa 512 .

Für weitere Einzelheiten könnten Sie an den Ausgaben Nr. 15750 und Nr. 15774 interessiert sein.

Führen Sie Folgendes aus, um eine neue Inotify-Überwachung und ein neues Instanzlimit festzulegen:

sudo sysctl fs.inotify.max_user_watches=131072
sudo sysctl fs.inotify.max_user_instances=512
sudo sysctl -p

Wenn Sie möchten, können Sie die neuen Grenzwerte dauerhaft festlegen, indem Sie Folgendes ausführen:

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

Wenn Sie Änderungen an matrix-js-sdk vornehmen, sollten diese automatisch vom Webpack übernommen und erstellt werden.

Wenn einer dieser Schritte zu file table overflow führt, verwenden Sie wahrscheinlich einen Mac, auf dem die maximale Anzahl geöffneter Dateien sehr niedrig ist. Führen Sie ulimit -Sn 1024 aus und versuchen Sie es erneut. Sie müssen dies in jedem neuen Terminal tun, das Sie öffnen, bevor Sie Element erstellen.