Qt WebEngine Vue d'ensemble

Le module Qt WebEngine fournit un moteur de navigateur web qui facilite l'intégration du contenu du World Wide Web dans votre application Qt sur les plates-formes qui ne disposent pas d'un moteur web natif.

Qt WebEngine Il fournit des classes C++ et des types QML pour le rendu de documents HTML, XHTML et SVG, stylisés à l'aide de feuilles de style en cascade (CSS) et scriptées avec JavaScript. Les documents HTML peuvent être rendus entièrement modifiables par l'utilisateur grâce à l'utilisation de l'attribut contenteditable sur les éléments HTML.

Qt WebEngine L'architecture

Qt WebEngine montrant comment les Widgets Qt WebEngine, Qt WebEngine, et Qt WebEngine Process interagissent avec Qt WebEngine Core, qui est construit au dessus du moteur Chromium." src="images/qtwebengine-architecture.png" title="Un schéma fonctionnel de l'architecture de Qt WebEngine montrant comment les Widgets Qt WebEngine, Qt WebEngine, et Qt WebEngine Process interagissent avec Qt WebEngine Core, qui est construit au dessus du moteur Chromium."/>

Les fonctionnalités de Qt WebEngine sont réparties dans les modules suivants :

• Qt WebEngine Widgets Module de création d'applications web basées sur des widgets
• Qt WebEngine Module de création d'applications web basées sur Qt Quick
• Qt WebEngine Module principal pour interagir avec Chromium

Le rendu des pages et l'exécution du JavaScript sont séparés du processus de l'interface graphique dans le processus Qt WebEngine. Il s'agit d'une bibliothèque qui doit être livrée avec l'application si les bibliothèques Qt sont intégrées à l'application.

Qt WebEngine Module Widgets

Qt WebEngine Widgets et la façon dont les classes principales interagissent et dépendent les unes des autres." src="images/qtwebenginewidgets-model.png" title="Diagramme montrant la structure des relations entre les classes du module Qt WebEngine Widgets et la façon dont les classes principales interagissent et dépendent les unes des autres."/>

Une vue du moteur web est le principal composant widget du module Qt WebEngine. Elle peut être utilisée dans diverses applications pour charger du contenu web. Au sein d'une vue, une page de moteur web contient un cadre principal qui est responsable du contenu web, de l'historique des liens navigués et des actions. La vue et la page sont très similaires, car elles fournissent un ensemble de fonctions communes.

Toutes les pages appartiennent à un profil de moteur web qui contient des paramètres, des scripts et des cookies partagés. Les profils peuvent être utilisés pour isoler les pages les unes des autres. Un cas d'utilisation typique est un profil dédié à un mode de navigation privé, dans lequel aucune information n'est enregistrée de manière permanente.

Le contenu est rendu en utilisant les capacités de la carte graphique (GPU). Le graphe de scène, à son tour, s'appuie sur l'interface matérielle de rendu de Qt comme couche d'abstraction pour les différentes capacités et API d'un GPU. Pour plus de conseils sur la façon de modifier le pipeline de rendu, voir Rendu via l'interface matérielle de rendu Qt.

Qt WebEngine Module

Qt WebEngine. La classe Vue est reliée aux classes Action, Historique et Profil. La classe Profil est liée à Paramètres, Script et Cookie." src="images/qtwebengine-model.png" title="Diagramme montrant les relations entre les classes dans le module Qt WebEngine. La classe Vue est reliée aux classes Action, Historique et Profil. La classe Profil est liée à Paramètres, Script et Cookie."/>

L'implémentation de Qt WebEngine QML contient les mêmes éléments que l'implémentation de Qt WebEngine Widgets, sauf qu'il n'y a pas de page de moteur web accessible séparément. La fonctionnalité de la page prise en charge est intégrée dans la vue du moteur web.

Qt WebEngine Module de base

Le noyau de Qt WebEngine est basé sur le projet Chromium. Chromium fournit ses propres moteurs de réseau et de peinture et est développé en étroite collaboration avec les modules qui en dépendent. Même si la pile QtNetwork n'est pas utilisée, sa configuration peut être synchronisée avec la pile Qt WebEngine. Voir Proxy Support, Managing Certificates, Client Certificates, et QWebEngineCookieStore pour plus de détails.

La version de Chrome utilisée est celle utilisée par la dernière version stable de Chrome au moment du gel des fonctionnalités de Qt pour la version actuelle de Qt WebEngine. Des correctifs de sécurité supplémentaires sont sélectionnés parmi les versions plus récentes de Chrome à chaque publication de correctifs, les correctifs de sécurité publiés à temps pour le gel de la publication de correctifs de Qt seront inclus. Si Chrome publie des correctifs critiques en dehors de notre fenêtre de publication, la prochaine publication de correctifs est accélérée pour s'assurer qu'une version corrigée de Qt WebEngine est publiée avant que les détails du correctif ne soient rendus publics.

Si vous avez besoin d'une version plus récente de Qt WebEngine au-delà des correctifs de sécurité, et que vous ne pouvez pas mettre à jour l'ensemble de Qt, Qt WebEngine prend en charge la construction avec des versions plus anciennes de Qt jusqu'à la dernière Qt LTS. Par exemple, Qt WebEngine 6.3, 6.4 et 6.5 peuvent tous être construits avec Qt 6.2. Dans les versions LTS de Qt, Qt WebEngine peut être entièrement remplacé par une version plus récente afin de faciliter l'application des correctifs de sécurité.

Les versions de Chromium en question peuvent également être lues à l'exécution en utilisant la méthode qWebEngineChromiumVersion(), et qWebEngineChromiumSecurityPatchVersion() pour lire le niveau actuel du correctif de sécurité. Vous pouvez également trouver les versions dans les sources Qt WebEngine dans le fichier CHROMIUM_VERSION.

Intégration de contenu Web dans des applications basées sur des widgets

Utilisez la classe QWebEngineView pour afficher des pages web de la manière la plus simple qui soit. Comme il s'agit d'un widget, vous pouvez intégrer QWebEngineView dans vos formulaires et utiliser ses fonctions pratiques pour télécharger et afficher des sites web.

QWebEngineView *view = new QWebEngineView(parent);
view->load(QUrl("http://www.qt.io/"));
view->show();

Une instance de QWebEngineView a un QWebEnginePage. QWebEnginePage peut avoir un QWebEngineHistory qui donne accès à l'historique de navigation de la page et plusieurs objets QAction qui appliquent des actions sur la page web. En outre, QWebEnginePage a la capacité d'exécuter du code JavaScript dans le contexte du cadre principal de la page et de permettre la personnalisation des gestionnaires d'événements spécifiques, comme l'affichage de boîtes de dialogue d'authentification personnalisées.

Chaque QWebEnginePage appartient à un QWebEngineProfile qui peut avoir un QWebEngineSettings pour spécifier les paramètres de la page, un QWebEngineScriptCollection pour exécuter des scripts sur la page et un QWebEngineCookieStore pour accéder aux cookies HTTP de Chromium. Un QWebEnginePage peut également pointer directement vers une collection de scripts.

Pour une application basée sur des widgets, le moteur web est automatiquement initialisé, sauf s'il est placé dans un plugin. Dans ce cas, il doit être initialisé dans le fichier source principal de l'application en utilisant QtWebEngineQuick::initialize, comme l'illustre l'extrait de code suivant :

int main(int argc, char **argv)
{
    QtWebEngineQuick::initialize();

    QApplication app(argc, argv);

    QMainWindow window;
    window.show();

    return app.exec();
}

Intégration de contenu Web dans les applications Qt Quick

Le type QML WebEngineView permet aux applications Qt Quick de rendre des régions de contenu web dynamique. A WebEngineView peut partager l'écran avec d'autres types QML ou englober tout l'écran, comme spécifié dans l'application Qt Quick.

Pour s'assurer que le contexte OpenGL peut être partagé entre l'interface graphique et les processus de rendu, le moteur web doit être initialisé en utilisant QtWebEngineQuick::initialize dans le fichier source principal de l'application, comme l'illustre l'extrait de code suivant :

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QtWebEngineQuick::initialize();

    QQmlApplicationEngine engine;
    engine.load(QUrl("qrc:/main.qml"));

    return app.exec();
}

Une application peut charger des pages dans le site WebEngineView, à l'aide d'une URL ou d'une chaîne HTML, et naviguer dans l'historique de la session. Par défaut, les liens vers différentes pages se chargent dans le même objet WebEngineView, mais les sites web peuvent demander qu'ils soient ouverts dans un nouvel onglet, une nouvelle fenêtre ou une nouvelle boîte de dialogue.

L'exemple d'application QML suivant charge une page web à l'aide de la propriété url:

import QtQuick
import QtQuick.Window
import QtWebEngine

Window {
    width: 1024
    height: 750
    visible: true
    WebEngineView {
        anchors.fill: parent
        url: "https://www.qt.io"
    }
}

Injection de script

Qt WebEngine ne permet pas d'accéder directement au modèle objet du document (DOM) d'une page. Cependant, le DOM peut être inspecté et adapté en injectant des scripts.

Le DOM d'une page est construit lorsque le document est prêt, généralement lorsque la page est complètement chargée. Par conséquent, l'exécution de scripts dès la création d'un document n'est pas adaptée aux opérations du DOM, pour lesquelles il faut attendre que le DOM soit prêt.

En outre, un script injecté partage le même monde que les autres scripts exécutés sur la page, ce qui peut entraîner des conflits. Pour éviter cela, la classe QWebEngineScript et le type QML WebEngineScript fournissent des implémentations de l'API Chromium pour les extensions de scripts de contenu. Elles spécifient le script à exécuter, le point d'injection et le monde dans lequel le script est exécuté. Cela permet d'accéder au DOM pour le manipuler à l'intérieur d'un monde.

Qt WebEngine L'API Content Script Extensions prend également en charge l'augmentation d'un script en utilisant les attributs suivants, semblables à ceux de Greasemonkey:

• @exclude <regexp>
• @include <regexp>
• @match <regexp>
• @name <free text>
• @run-at [document-start|document-end|document-idle]

Les attributs déterminent si et quand un script utilisateur est exécuté. Ils doivent être placés immédiatement au début du script, à l'intérieur d'un commentaire ==UserScript==:

// ==UserScript==
// @include http://*.qt.io/*
// @exclude http://wiki.qt.io/*
// ==/UserScript==

window.alert("Page is from qt.io, but not wiki.qt.io");

Si votre application WebEngine est construite à l'aide du Qt Quick Compiler, et que l'application contient des fichiers JavaScript dans des ressources .qrc, pensez à lire la section Fichiers JavaScript dans les fichiers de ressources Qt.

Gestion des certificats

Qt WebEngine Qt utilise sa propre pile réseau, et par conséquent QSslConfiguration n'est pas utilisé pour ouvrir des connexions SSL. Au lieu de cela, Qt WebEngine utilise les certificats de l'autorité de certification racine du système d'exploitation pour valider le certificat de l'homologue.

Les énumérations webEngineCertificateError::type et QWebEngineCertificateError::Type fournissent des informations sur les types d'erreurs de certificat susceptibles de se produire. Les erreurs peuvent être traitées en utilisant la méthode QML WebEngineView::certificateError ou en se connectant au signal QWebEnginePage::certificateError.

Prise en charge du proxy

Qt WebEngine utilise les paramètres de proxy de Qt Networket les transmet à la pile réseau de Chromium. Si QNetworkProxy::applicationProxy est défini, il sera également utilisé pour Qt WebEngine. Si QNetworkProxyFactory::usesSystemConfiguration() est activé, les paramètres du proxy sont automatiquement récupérés du système. Les paramètres d'un QNetworkProxyFactory installé seront cependant ignorés.

Si QNetworkProxy::user() et QNetworkProxy::password() sont activés, ces informations d'identification seront automatiquement utilisées pour l'authentification du proxy. C'est à l'utilisateur de fournir des informations d'identification valides, puisqu'il n'y a pas de rappel pour la gestion des erreurs.

Si aucun identifiant n'est défini avec QNetworkProxy, mais que le proxy exige une authentification, QWebEnginePage::proxyAuthenticationRequired est émis. Pour Qt Quick, une boîte de dialogue est affichée.

Toutes les propriétés de QNetworkProxy ne sont pas prises en charge par Qt WebEngine. C'est-à-dire que QNetworkProxy::type(), QNetworkProxy::hostName() et QNetworkProxy::port() sont prises en compte. Tous les autres paramètres de proxy tels que QNetworkProxy::rawHeader() sont ignorés.

Prise en charge des hauts DPI

La prise en charge des hauts DPI est toujours activée dans Qt XML 6, et cela s'applique également à Qt WebEngine. Pour plus d'informations, voir High DPI.

Utilisation de WebEngine Core

Qt WebEngine Core fournit une API partagée par Qt WebEngine et Qt WebEngine Widgets pour gérer les demandes d'URL émises pour la pile réseau de Chromium et pour accéder à ses cookies HTTP.

La mise en œuvre de l'interface QWebEngineUrlRequestInterceptor et l'installation de l'intercepteur sur un profil permettent d'intercepter, de bloquer et de modifier les demandes d'URL (QWebEngineUrlRequestInfo) avant qu'elles n'atteignent la pile de mise en réseau de Chromium.

Une interface QWebEngineUrlSchemeHandler peut être enregistrée pour un profil afin d'ajouter la prise en charge de schémas d'URL personnalisés. Les demandes relatives à ce schéma sont alors envoyées à QWebEngineUrlSchemeHandler::requestStarted() sous la forme d'objets QWebEngineUrlRequestJob.

La classe QWebEngineCookieStore fournit des fonctions permettant d'accéder aux cookies HTTP de Chromium. Les fonctions peuvent être utilisées pour synchroniser les cookies avec QNetworkAccessManager, ainsi que pour définir, supprimer et intercepter les cookies pendant la navigation.

Modèles de processus

Le processus Qt WebEngine est un exécutable distinct utilisé pour rendre les pages web et exécuter JavaScript. Cela permet d'atténuer les problèmes de sécurité et d'isoler les pannes causées par un contenu spécifique.

Qt WebEngine utilise plusieurs processus OS pour isoler les sites web les uns des autres et de l'application client, ce qui améliore la sécurité et la robustesse. Les modèles de processus suivants, ou les façons de répartir les sites web entre les processus du système d'exploitation, sont pris en charge :

• Processus par instance de site
• Processus par site
• Processus unique

Processus par instance de site

Il s'agit du modèle par défaut. Les pages de sites distincts sont placées dans des processus distincts et les visites d'un même site sont également isolées.

Deux pages web sont considérées comme appartenant au même site si elles proviennent du même nom de domaine enregistré (par exemple, wikipedia.org) et du même schéma (par exemple, https). Cette politique est similaire à celle de la même origine, mais les sous-domaines sont ignorés. Par exemple, https://en.wikipedia.org/ et https://de.wikipedia.org/ appartiendraient au même site.

Une instance de site est un ensemble de pages web appartenant au même site. Lorsque l'application charge explicitement une URL dans Qt WebEngine (via QWebEnginePage::setUrl, par exemple), une nouvelle instance de site est créée pour la page. Cependant, lorsque l'utilisateur clique sur des liens du même site sur la page, l'instance de site existante est simplement étendue à d'autres pages.

Ainsi, dans l'exemple du navigateur simple, lorsqu'un utilisateur ouvre deux onglets et saisit explicitement https://en.wikipedia.org/ dans les barres d'URL, les deux onglets auront leurs propres processus OS distincts (car la saisie explicite d'une URL crée une nouvelle instance de site). Cependant, lorsque l'utilisateur clique au milieu de certains liens du même site pour ouvrir d'autres onglets, ces nouveaux onglets partageront le même processus de système d'exploitation (parce que l'interaction de l'utilisateur étend l'instance de site existante).

Processus par site

Les pages de sites distincts sont placées dans des processus distincts. Contrairement au processus par instance de site, toutes les visites d'un même site partagent un processus du système d'exploitation.

L'avantage de ce modèle est de réduire la consommation de mémoire, car un plus grand nombre de pages web partageront des processus. Les inconvénients sont une réduction de la sécurité, de la robustesse et de la réactivité.

Pour activer ce modèle, utilisez l'argument de ligne de commande --process-per-site. Voir Utilisation des arguments de la ligne de commande.

Processus unique

À des fins de débogage uniquement, un mode de processus unique peut être activé à l'aide de l'argument de ligne de commande --single-process. Voir Utilisation des arguments de ligne de commande et Qt WebEngine Débogage et profilage.

Notes sur les plates-formes

Qt WebEngine Chromium ne supporte actuellement que Windows, Linux et macOS. En raison des exigences de construction de Chromium, il nécessite souvent un compilateur plus récent que le reste de Qt. Voir Qt WebEngine Platform Notes pour plus de détails.

Modules connexes

Vous pouvez utiliser le module Qt PDF pour rendre des fichiers PDF. En interne, le module est alimenté par PDFium, qui est également utilisé dans Chromium.

Avec le module Qt WebView vous pouvez utiliser les API du navigateur fournies par le système d'exploitation, sur les plateformes où elles sont disponibles, pour intégrer du contenu web dans votre application sans avoir besoin d'intégrer l'ensemble du runtime de Chromium. Sur les plateformes où les API natives ne sont pas disponibles, il peut également agir comme une enveloppe autour de WebEngine.

Le module Qt WebChannel peut être utilisé pour créer un canal de communication bidirectionnel entre les objets QObject du côté C++ et JavaScript du côté QML.