Qt WebEngine Visión general

El módulo Qt WebEngine proporciona un motor de navegador web que facilita la incrustación de contenidos de la World Wide Web en su aplicación Qt en plataformas que no disponen de un motor web nativo.

Qt WebEngine proporciona clases C++ y tipos QML para renderizar documentos HTML, XHTML y SVG, con estilo usando hojas de estilo en cascada (CSS) y secuencias de comandos con JavaScript. Los documentos HTML pueden ser totalmente editables por el usuario mediante el uso del atributo contenteditable en los elementos HTML.

Qt WebEngine Arquitectura

Qt WebEngine que muestra cómo interactúan Qt WebEngine Widgets, Qt WebEngine y Qt WebEngine Process con Qt WebEngine Core, que está construido sobre el motor Chromium." src="images/qtwebengine-architecture.png" title="Un diagrama de bloques de la arquitectura de Qt WebEngine que muestra cómo interactúan Qt WebEngine Widgets, Qt WebEngine y Qt WebEngine Process con Qt WebEngine Core, que está construido sobre el motor Chromium."/>

La funcionalidad de Qt WebEngine se divide en los siguientes módulos:

• Qt WebEngine Widgets Módulo para crear aplicaciones web basadas en widgets
• Qt WebEngine Módulo para crear aplicaciones web basadas en Qt Quick
• Qt WebEngine Módulo Core para interactuar con Chromium

El renderizado de páginas y la ejecución de JavaScript están separados del proceso GUI en el proceso Qt WebEngine. Es una librería que debe ser enviada con la aplicación si las librerías Qt están incluidas en la aplicación.

Qt WebEngine Módulo Widgets

Qt WebEngine Widgets y cómo las clases principales interactúan y dependen unas de otras." src="images/qtwebenginewidgets-model.png" title="Diagrama que muestra la estructura de relación de clases del módulo Qt WebEngine Widgets y cómo las clases principales interactúan y dependen unas de otras."/>

Una vista del motor web es el principal componente widget del módulo Qt WebEngine. Se puede utilizar en varias aplicaciones para cargar contenido web. Dentro de una vista, una página del motor web contiene un marco principal que es responsable del contenido web, el historial de enlaces navegados y las acciones. La vista y la página son bastante similares, ya que proporcionan un conjunto de funciones comunes.

Todas las páginas pertenecen a un perfil de motor web que contiene configuraciones compartidas, scripts y cookies. Los perfiles pueden utilizarse para aislar unas páginas de otras. Un caso de uso típico es un perfil dedicado a un modo de navegación privado, en el que no se guarda información de forma permanente.

El contenido se renderiza utilizando las capacidades de la tarjeta gráfica (GPU). El gráfico de escena, a su vez, se basa en la interfaz de hardware de renderizado de Qt como una capa de abstracción para las diferentes capacidades y APIs que puede presentar una GPU. Para más consejos sobre cómo ajustar el pipeline de renderizado, ver por tanto Renderizado a través de la Interfaz de Hardware de Renderizado Qt.

Qt WebEngine Módulo

Qt WebEngine. La clase View se conecta con Action, History, y Profile. La clase Profile conecta con Settings, Script, y Cookie" src="images/qtwebengine-model.png" title="Diagrama que muestra las relaciones entre clases en el módulo Qt WebEngine. La clase View se conecta con Action, History, y Profile. La clase Profile conecta con Settings, Script, y Cookie"/>

La implementación de Qt WebEngine QML contiene los mismos elementos que la implementación de Qt WebEngine Widgets, excepto que no hay una página de motor web accesible por separado. La funcionalidad de la página soportada está integrada en la vista del motor web.

Qt WebEngine Módulo central

El núcleo de Qt WebEngine se basa en el proyecto Chromium. Chromium proporciona sus propios motores de red y pintura y se desarrolla estrechamente junto con sus módulos dependientes. Aunque no se utilice la pila QtNetwork, su configuración puede sincronizarse con la de Qt WebEngine. Consulte Soporte de proxy, Gestión de certificados, Certificados de cliente y QWebEngineCookieStore para obtener más detalles.

La versión de Chromium utilizada es la utilizada por la última versión estable de Chrome en el momento de la congelación de las características de Qt para la versión actual de Qt WebEngine. En cada lanzamiento de parches se seleccionan parches de seguridad adicionales de las versiones más recientes de Chrome, y se incluirán los parches de seguridad lanzados a tiempo para la congelación del lanzamiento de parches de Qt. Si Chrome publica correcciones críticas fuera de nuestra ventana de publicación, la siguiente publicación de parches se acelera para garantizar la publicación de una versión parcheada de Qt WebEngine antes de que se hagan públicos los detalles del parche.

Si necesitas una nueva versión de Qt WebEngine más allá de las correcciones de seguridad, y no puedes actualizar todo Qt, Qt WebEngine soporta la compilación con versiones anteriores de Qt hasta la última Qt LTS. Por ejemplo Qt WebEngine 6.3, 6.4, y 6.5 pueden ser construidas con Qt 6.2. En las versiones LTS de Qt, Qt WebEngine puede ser reemplazado completamente por una versión más reciente para facilitar los parches de seguridad.

Las versiones relevantes de Chromium en cuestión también pueden ser leídas en tiempo de ejecución usando el método qWebEngineChromiumVersion(), y qWebEngineChromiumSecurityPatchVersion() para leer el nivel de parche de seguridad actual. También puedes encontrar las versiones en las fuentes Qt WebEngine en el archivo CHROMIUM_VERSION.

Incrustación de contenido web en aplicaciones basadas en widgets

Utilice la clase QWebEngineView para mostrar páginas web de la forma más sencilla. Al tratarse de un widget, puede incrustar QWebEngineView en sus formularios y utilizar sus prácticas funciones para descargar y mostrar páginas web.

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

Una instancia de QWebEngineView tiene un QWebEnginePage. QWebEnginePage puede tener un QWebEngineHistory que proporciona acceso al historial de navegación de la página y varios objetos QAction que aplican acciones en la página web. Además, un QWebEnginePage tiene la capacidad de ejecutar código JavaScript en el contexto del marco principal de la página y de permitir la personalización de manejadores para eventos específicos, como mostrar diálogos de autenticación personalizados.

Cada QWebEnginePage pertenece a un QWebEngineProfile que puede tener un QWebEngineSettings para especificar la configuración de la página, un QWebEngineScriptCollection para ejecutar scripts en la página, y un QWebEngineCookieStore para acceder a las cookies HTTP de Chromium. Un QWebEnginePage también puede apuntar directamente a una colección de scripts.

Para una aplicación basada en widgets, el motor web se inicializa automáticamente, a menos que se coloque en un plugin. En ese caso, debe ser inicializado en el archivo fuente principal de la aplicación utilizando QtWebEngineQuick::initialize, como se ilustra en el siguiente fragmento de código:

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

    QApplication app(argc, argv);

    QMainWindow window;
    window.show();

    return app.exec();
}

Inserción de contenidos web en aplicaciones Qt Quick

El tipo QML WebEngineView permite a las aplicaciones Qt Quick representar regiones de contenido web dinámico. A WebEngineView tipo puede compartir la pantalla con otros tipos QML o abarcar toda la pantalla según se especifique dentro de la aplicación Qt Quick.

Para asegurarse de que el contexto OpenGL puede ser compartido entre la GUI y los procesos de renderizado, el motor web debe ser inicializado utilizando QtWebEngineQuick::initialize en el archivo fuente principal de la aplicación, como se ilustra en el siguiente fragmento de código:

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

    QtWebEngineQuick::initialize();

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

    return app.exec();
}

Una aplicación puede cargar páginas en WebEngineView, utilizando una URL o una cadena HTML, y navegar dentro del historial de sesiones. Por defecto, los enlaces a diferentes páginas se cargan dentro del mismo objeto WebEngineView, pero los sitios web pueden solicitar que se abran como una nueva pestaña, ventana o cuadro de diálogo.

El siguiente ejemplo de aplicación QML carga una página web utilizando la propiedad url:

import QtQuick
import QtQuick.Window
import QtWebEngine

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

La inyección de scripts

Qt WebEngine no permite el acceso directo al modelo de objetos del documento (DOM) de una página. Sin embargo, el DOM puede inspeccionarse y adaptarse mediante la inyección de scripts.

El DOM de una página se construye cuando el documento está listo, normalmente cuando la página está completamente cargada. Por lo tanto, ejecutar scripts en cuanto se crea un documento no es adecuado para las operaciones DOM, en las que hay que esperar a que el DOM esté listo.

Además, un script inyectado comparte el mismo mundo que los demás scripts ejecutados en la página, lo que podría dar lugar a conflictos. Para evitarlo, la clase QWebEngineScript y el tipo QML WebEngineScript proporcionan implementaciones de la API de Chromium para extensiones de scripts de contenido. Especifican el script a ejecutar, el punto de inyección y el mundo donde se ejecuta el script. Esto permite acceder al DOM para manipularlo dentro de un mundo.

Qt WebEngine también admite el aumento de un script mediante el uso de los siguientes atributos similares a Greasemonkey:

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

Los atributos determinan si y cuando se ejecuta un script de usuario. Deben colocarse inmediatamente al principio del script, dentro de un comentario ==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 su aplicación WebEngine está construida usando el compilador Qt Quick, y la aplicación incluye archivos JavaScript dentro de recursos .qrc, considere leer la sección Archivos JavaScript en Archivos de Recursos Qt.

Gestión de certificados

Qt WebEngine utiliza su propia pila de red, y por lo tanto QSslConfiguration no se utiliza para abrir conexiones SSL. En su lugar, Qt WebEngine utiliza los certificados CA raíz del sistema operativo para validar el certificado del peer.

Las enumeraciones webEngineCertificateError::type y QWebEngineCertificateError::Type proporcionan información sobre los tipos de errores de certificado que pueden producirse. Los errores pueden gestionarse utilizando el método QML WebEngineView::certificateError o conectándose a la señal QWebEnginePage::certificateError.

Soporte de proxy

Qt WebEngine utiliza la configuración de proxy de Qt Networky los reenvía a la pila de red de Chromium. Si QNetworkProxy::applicationProxy está activado, también se utilizará para Qt WebEngine. Si QNetworkProxyFactory::usesSystemConfiguration() está activado, la configuración del proxy se recupera automáticamente del sistema. Sin embargo, la configuración de un QNetworkProxyFactory instalado será ignorada.

En caso de que QNetworkProxy::user() y QNetworkProxy::password() estén activados, estas credenciales se utilizarán automáticamente para la autenticación del proxy. Es responsabilidad del usuario proporcionar unas credenciales válidas, ya que no existe una llamada de retorno para la gestión de errores.

Si no se establecen credenciales con QNetworkProxy, pero el proxy requiere autenticación, se emite QWebEnginePage::proxyAuthenticationRequired. Para Qt Quick, se muestra un diálogo.

No todas las propiedades de QNetworkProxy son compatibles con Qt WebEngine. Es decir, se tienen en cuenta QNetworkProxy::type(), QNetworkProxy::hostName() y QNetworkProxy::port(). Todas las demás configuraciones de proxy, como QNetworkProxy::rawHeader(), se ignoran.

Compatibilidad con DPI altos

La compatibilidad con DPI altos siempre está activada en Qt 6, y esto también se aplica a Qt WebEngine. Para obtener más información, consulte PPP altos.

Uso de WebEngine Core

Qt WebEngine Core proporciona una API compartida por Qt WebEngine y Qt WebEngine Widgets para manejar las peticiones URL emitidas para la pila de red de Chromium y para acceder a sus cookies HTTP.

Implementar la interfaz QWebEngineUrlRequestInterceptor e instalar el interceptor en un perfil permite interceptar, bloquear y modificar las peticiones URL (QWebEngineUrlRequestInfo) antes de que lleguen a la pila de red de Chromium.

Se puede registrar un QWebEngineUrlSchemeHandler en un perfil para añadir soporte a esquemas de URL personalizados. Las peticiones para el esquema se envían entonces a QWebEngineUrlSchemeHandler::requestStarted() como objetos QWebEngineUrlRequestJob.

La clase QWebEngineCookieStore proporciona funciones para acceder a las cookies HTTP de Chromium. Las funciones pueden utilizarse para sincronizar cookies con QNetworkAccessManager, así como para establecer, borrar e interceptar cookies durante la navegación.

Modelos de proceso

El proceso Qt WebEngine es un ejecutable independiente que se utiliza para renderizar páginas web y ejecutar JavaScript. Esto mitiga los problemas de seguridad y aísla los bloqueos causados por contenidos específicos.

Qt WebEngine utiliza múltiples procesos del SO para aislar los sitios web entre sí y de la aplicación cliente, mejorando la seguridad y la robustez. Se admiten los siguientes modelos de proceso, o formas de dividir los sitios web entre procesos del SO:

• Proceso por Instancia de Sitio
• Proceso por sitio
• Proceso único

Proceso por instancia de sitio

Este es el modelo por defecto. Las páginas de sitios separados se colocan en procesos separados y las visitas separadas al mismo sitio también se aíslan.

Se considera que dos páginas web pertenecen al mismo sitio si se originan en el mismo nombre de dominio registrado (por ejemplo, wikipedia.org) y esquema (por ejemplo, https). Esto es similar a la política del mismo origen, pero se ignoran los subdominios. Por ejemplo, tanto https://en.wikipedia.org/ como https://de.wikipedia.org/ pertenecerían al mismo sitio.

Una instancia de sitio es una colección de páginas web que pertenecen al mismo sitio. Cuando la aplicación carga explícitamente una URL en Qt WebEngine (a través de QWebEnginePage::setUrl, por ejemplo), se crea una nueva instancia de sitio para la página. Sin embargo, cuando el usuario hace clic en enlaces del mismo sitio en la página, la instancia de sitio existente simplemente se amplía con más páginas.

Por ejemplo, en el ejemplo del Navegador Simple, cuando un usuario abre dos pestañas e introduce explícitamente https://en.wikipedia.org/ en las barras de URL, ambas pestañas tendrán sus propios procesos OS separados (porque introducir explícitamente una URL crea una nueva instancia de sitio). Sin embargo, cuando el usuario hace clic con el botón central en algunos enlaces del mismo sitio para abrir más pestañas, estas nuevas pestañas compartirán el mismo proceso del sistema operativo (porque la interacción del usuario amplía la instancia del sitio existente).

Proceso por sitio

Las páginas de sitios separados se ponen en procesos separados. A diferencia del Proceso por Instancia de Sitio, todas las visitas al mismo sitio compartirán un proceso OS.

La ventaja de este modelo es un menor consumo de memoria, ya que más páginas web compartirán procesos. Los inconvenientes incluyen una menor seguridad, robustez y capacidad de respuesta.

Para activar este modelo, utilice el argumento de línea de comandos --process-per-site. Consulte Uso de argumentos de línea de comandos.

Proceso único

Sólo con fines de depuración, puede habilitarse un modo de proceso único utilizando el argumento de línea de comandos --single-process. Consulte Uso de argumentos de la línea de comandos y Qt WebEngine Debugging and Profiling.

Plataforma Notas

Qt WebEngine actualmente sólo soporta Windows, Linux y macOS. Debido a los requisitos de compilación de Chromium, a menudo requiere un compilador más reciente que el resto de Qt. Consulte Qt WebEngine Platform Notes para más detalles.

Módulos relacionados

Puede utilizar el módulo Qt PDF para renderizar archivos PDF. Internamente, el módulo funciona con PDFium, que también se utiliza en Chromium.

Con el módulo Qt WebView puede utilizar las API del navegador proporcionadas por el sistema operativo, en plataformas en las que estén disponibles, para incrustar contenido web en su aplicación sin necesidad de enviar todo el tiempo de ejecución de Chromium. En plataformas donde las API nativas no están disponibles, también puede actuar como una envoltura alrededor de WebEngine.

El módulo Qt WebChannel puede utilizarse para crear un canal de comunicación bidireccional entre los objetos QObject en el lado C++ y JavaScript en el lado QML.