Documentación

Adobe Commerce: Problemas de JavaScript en línea en la página de cierre de compra en el modo restringido de la Política de seguridad de contenido (CSP)

Last update: Mon Sep 30 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Este artículo proporciona explicaciones y soluciones detalladas para los problemas que se han encontrado con el JavaScript personalizado agregado mediante el administrador de Adobe Commerce y el administrador de etiquetas de Google en Adobe Commerce 2.4.7 durante el cierre de compra cuando el modo restringido CSP está habilitado. Específicamente, se dirige al script en línea Rechazado la ejecución porque infringe la siguiente directiva de la directiva de seguridad de contenido e mensaje de error que aparece en el registro de la consola del explorador. Este error indica que la secuencia de comandos en línea está bloqueada debido a la estricta configuración CSP, que está diseñada para mejorar la seguridad al evitar la ejecución de secuencias de comandos no autorizadas.

A partir de Adobe Commerce 2.4.7, el CSP está configurado para funcionar en modo restringido de forma predeterminada para las páginas de pago en las áreas de tienda y administración. Para las demás páginas, funciona en modo solo informe. Esta mejora requiere la lista de admitidos de todos los JavaScript, incluidas las integraciones personalizadas con servicios o extensiones de terceros. Si no se incluye JavaScript personalizado en la lista blanca, el explorador bloqueará la ejecución de esos scripts en las páginas de pago y envío tanto en las áreas de administración como de tienda.

Las soluciones proporcionadas en este artículo no se limitan a la resolución de problemas con Google Tag Manager (GTM) Inline JavaScript o JavaScript añadidos a través de la Configuración de diseño del administrador de Commerce. También se pueden aplicar a otros escenarios en los que se ha agregado JavaScript en línea al código Commerce. Esto incluye scripts personalizados incrustados directamente en plantillas, módulos o cualquier otra parte del ecosistema de Adobe Commerce. Al seguir los pasos descritos, puede asegurarse de que todos los scripts en línea estén correctamente en la lista blanca y se les permita ejecutarse, manteniendo así la funcionalidad del código personalizado y respetando las restricciones CSP.

NOTA: Se recomienda encarecidamente presentar el nuevo JavaScript a través de los métodos descritos en la documentación de Adobe Commerce Políticas de seguridad de contenido. Estos métodos garantizan que los scripts cumplan con las directrices CSP, lo que mejora la seguridad del sitio de Commerce. Si sigue las prácticas recomendadas para la inclusión de scripts, como el uso de scripts externos con los atributos nonce o hash adecuados, puede minimizar el riesgo de vulnerabilidades de seguridad y garantizar una experiencia de usuario más fluida y segura.

Descripción description

Consulte para obtener más información sobre el entorno y los pasos que debe seguir.

Entorno

Adobe Commerce en la infraestructura en la nube y Adobe Commerce local:

  • 2.4.7 y superior
  • 2.4.6-pX
  • 2,4,5-pX
  • 2.4.4-pX

Problema/Síntomas

A continuación se muestra una lista de problemas comunes y sus soluciones cuando se bloquea la ejecución de scripts en las páginas de pago y cierre de compra debido a restricciones de CSP:

  • Etiqueta de HTML GTM con JavaScript en línea
  • JS en línea en la configuración del tema

Etiqueta de HTML GTM con JavaScript en línea

El JavaScript de la etiqueta de HTML personalizada configurada en el administrador de etiquetas de Google no se ejecuta correctamente en las páginas de pago o cierre de compra de la tienda.

Pasos a seguir

  1. Configure Google Tag Manager con una etiqueta de HTML personalizada que contenga JavaScript en línea.
  2. Integración de Google Tag Manager con Adobe Commerce. Consulte Configuración de la cuenta de Google Analytics en la Guía de promociones y comercialización de Adobe Commerce para ver los pasos.
  3. Añada un producto al carro de compras y continúe con el cierre de compra.
  4. Abra Developer Console en cualquier explorador compatible.

Resultados esperados

No aparecen errores relacionados con el JavaScript personalizado en la consola y el script se ejecuta correctamente.

Resultados reales

El error Se rechazó ejecutar un script porque su hash, su nonce o 'unsafe-inline' no aparece en la directiva script-src de la directiva Content Security. está presente en la consola y el script no se ejecuta.

NOTA: El mensaje de error exacto puede variar según el explorador, pero generalmente indica que el CSP ha bloqueado el script. Estos mensajes resaltan que no se permite ejecutar el script debido a la configuración actual de CSP.

Causa

La JavaScript de la etiqueta de HTML personalizada del Administrador de etiquetas de Google se inserta en la tienda mediante el propio Administrador de etiquetas de Google. Como resultado, este script no se incluye previamente en la lista blanca en la configuración de CSP y, posteriormente, el explorador lo bloquea para que no lo ejecute. Esto ocurre porque el CSP restringe la ejecución de cualquier script en línea que no esté permitido explícitamente, lo que garantiza una seguridad mejorada pero requiere una configuración adicional para los scripts personalizados.

Solución

  • Incluya el JavaScript Hash en la lista blanca. Consulte la sección Resolución en este artículo para obtener más información.
  • Firme el JavaScript del HTML personalizado de Google Tag Manager con un valor de seguridad. Consulte la sección Resolución en este artículo para obtener más información.

JS en línea en la configuración del tema

Este problema es muy similar al problema de la etiqueta de HTML personalizada con JavaScript en línea. La diferencia es que, en lugar de agregar JavaScript en el Administrador de Tag Manager de Google, el script se agrega en el Administrador de Adobe Commerce en la página Configuración de diseño para uno de los ámbitos disponibles. Con este método, se puede agregar un fragmento de HTML en línea, JavaScript o una hoja de estilo al encabezado o al pie de página de la temática. Al igual que cualquier otro JavaScript en línea, se requiere que la lista blanca se ejecute en la página de cierre de compra.

Pasos para reproducir

  1. Configure Cabezal de HTML o Pie de página en Configuración de diseño para que contengan un JavaScript en línea.
  2. Añada un producto al carro de compras y continúe con el cierre de compra.
  3. Abra Developer Console en cualquier explorador compatible.

Resultados esperados

No aparecen errores relacionados con el JavaScript personalizado en la consola y el script se ejecuta correctamente.

Resultados reales

El error Se rechazó ejecutar un script porque su hash, su nonce o 'unsafe-inline' no aparece en la directiva script-src de la directiva Content Security. está presente en la consola y el script no se ejecuta.

NOTA: El mensaje de error exacto puede variar según el explorador, pero generalmente indica que el CSP está bloqueando el script. Estos mensajes resaltan que no se permite ejecutar el script debido a la configuración actual de CSP.

Causa

Los scripts y las hojas de estilo del Encabezado del HTML y el HTML Miscelánea de las secciones Pie de página de la Configuración de diseño son campos de entrada mixtos. Estos campos pueden contener HTML, Hojas de estilo o JavaScript. Debido a este contenido dinámico, es imposible hash y incluir en la lista blanca el contenido de esos campos automáticamente. Por lo tanto, si JavaScript se añade a cualquiera de estos campos, debe incluirse manualmente en la lista de permitidos para que se ejecute en la página de cierre de compra. Esto es necesario porque el CSP restringe la ejecución de cualquier script en línea que no esté permitido explícitamente. Aunque esto garantiza una seguridad mejorada, también requiere una configuración adicional para permitir scripts personalizados.

Solución

Incluya el JavaScript Hash en la lista blanca. Consulte la sección Resolución en este artículo para obtener más información.

Resolución resolution

Cada solución proporcionada funciona de forma independiente. Evalúe y seleccione cuidadosamente el que mejor se adapte a sus necesidades específicas. Tenga en cuenta el contexto de la implementación, la naturaleza de las secuencias de comandos implicadas y los requisitos de seguridad del sitio de Adobe Commerce para determinar la solución adecuada.

Incluir en la lista blanca el hash de JavaScript

Para resolver este problema, los JavaScript en línea personalizados deben estar en la lista de admitidos en la configuración de CSP. Esto garantiza que se permita explícitamente la ejecución de la secuencia de comandos, omitiendo las restricciones de seguridad predeterminadas.

Incluir scripts de HTML personalizados de GTM en la lista blanca es complicado, ya que GTM puede modificar JavaScript antes de insertarlo en el Document Object Model (DOM), lo que incluye eliminar saltos de línea y comentarios. Además, los algoritmos de Google pueden cambiar con el tiempo sin previo aviso, lo que podría invalidar el hash. Debe utilizar el hash generado por Google Chrome como se describe en el paso C y estar preparado para actualizar el hash en la lista blanca periódicamente. Considere también la posibilidad de firmar el HTML personalizado de Google Tag Manager JavaScript con un valor de seguridad para obtener una solución más sólida.

  1. Genere el hash para el cuerpo de JavaScript.

    NOTA: Para generar el hash correctamente, debe alimentar el script en el generador de hash. Es importante copiar la secuencia de comandos con cuidado. Excluya las etiquetas de script de apertura y cierre de la JavaScript, mientras copia todos los saltos de línea y cualquier posible carácter invisible. Esto incluye los saltos de línea (si los hay) después de la apertura script u otras etiquetas. Si el hash no coincide exactamente con el script, se deniega la ejecución.

    1. En Mac, puede copiar todo el cuerpo del script, incluidos los saltos de línea después de la etiqueta de apertura script, en el portapapeles y ejecutar el siguiente comando en el terminal.

      php -r "echo base64_encode(hash('sha256', shell_exec('pbpaste'), true)) . PHP_EOL;"

      Este comando PHP toma el contenido del portapapeles, calcula su hash SHA-256, convierte el hash a binario, y luego lo codifica en formato base64, finalmente imprimiendo el resultado.

    2. Puede usar una variedad de generadores de hash en línea para crear el hash requerido para su script.

      ADVERTENCIA: Es crucial entender que si decide usar servicios en línea de terceros para generar hashes para CSP, debe considerar las implicaciones de privacidad. Algunos servicios pueden cargar el script en sus servidores para hash, lo que podría comprometer los datos confidenciales incluidos en el script. Para mitigar este riesgo, se recomienda generar hashes localmente mediante herramientas o scripts de confianza, lo que garantiza que los datos sigan siendo seguros y privados.

    3. Puede usar el explorador Chrome de Google para adquirir el hash ya generado para el JavaScript al que se denegó la ejecución en la página de cierre de compra desde Developer Console.

      1. Vaya a la página de cierre de compra utilizando el explorador Chrome de Google con el JavaScript bloqueado añadido.

      2. Abra Developer Console presionando Cmd+Option+J (en macOS) o Ctrl+Shift+J (en Windows/Linux).

      3. Busque el mensaje de error CSP en la consola.

      4. En la última frase del mensaje de error, se encuentra el código hash generado para el script bloqueado.

      5. Copie el código después de sha256-, omitiendo las comillas.

        NOTA: Si tiene varios archivos JavaScript bloqueados, verá varios mensajes de error en la consola. Asegúrese de identificar el JavaScript exacto que debe incluirse en la lista blanca. Se recomienda añadir y probar cada archivo JavaScript uno por uno para evitar incluir erróneamente en la lista blanca la secuencia de comandos incorrecta.

        Para obtener más información sobre cómo generar un hash para JavaScript en línea, consulte Configuración avanzada de CSP en la guía Políticas de seguridad de contenido para desarrolladores de Adobe Commerce.

  2. Incluya el script Hash en la lista blanca. Primero Agregue un hash al archivo csp_whitelist.xml de su módulo:

    < valores>

    < value id="my-script" type="hash" algorithm="sha256"> YOUR-HASH-1< /value>

    < /values>

    Donde YOUR-HASH-1 debe reemplazarse con el hash adquirido en el paso anterior.
    Para incluir varios scripts en la lista blanca, agregue una etiqueta < value> < /value> para cada script, por ejemplo:

    < valores>

    < value id="my-script" type="hash" algorithm="sha256"> YOUR-HASH-1< /value>

    < value id="my-new-script" type="hash" algorithm="sha256"> YOUR-HASH-2< /value>

    < valores>

    Si el archivo no existe, créelo con el siguiente contenido.

    < ?xml version="1.0" encoding="UTF-8"?>

    < csp_whitelist_xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">

    < directivas>

    < id="script-src"> de directiva

    < valores>

    < value id="my-script" type="hash" algorithm="sha256"> YOUR-HASH-1< /value>

    < value id="my-new-script" type="hash" algorithm="sha256"> YOUR-HASH-2< /value>

    < /values>

    < /policy>

    < /directivas>

    < /csp_whitelist>

  3. Vaciar la caché: después de agregar el hash al archivo csp_whitelist.xml, es esencial vaciar la caché para garantizar que los cambios surtan efecto. Al vaciar la caché, se borran los datos almacenados, lo que permite aplicar inmediatamente la configuración CSP actualizada. Puede vaciar la caché navegando hasta Sistema > Herramientas > Administración de caché en el panel de administración de Commerce y seleccione el botón Vaciar caché de Magento.  Como alternativa, utilice la línea de comandos:

    bin/magento cache:flush

    Este comando borra todos los tipos de caché, asegurándose de que el sistema reconozca la nueva configuración de CSP.

Firmar el JavaScript de HTML personalizado de Google Tag Manager con un valor de seguridad

Otra forma de permitir la ejecución de JavaScript en GTM es añadir un nonce a la etiqueta de apertura del script. El atributo nonce proporciona una forma de incluir dinámicamente en la lista blanca scripts en línea específicos, lo que garantiza que se les permita ejecutarse. Para obtener más información, consulte Uso del proveedor nonce de CSP para permitir la documentación de scripts en línea.

ADVERTENCIA: Tenga en cuenta que si la cuenta de GTM está en peligro, un atacante puede inyectar JavaScript malicioso en la tienda y firmarlo con el nonce, lo que permite su ejecución. Esto podría provocar el robo de datos confidenciales durante el proceso de cierre de compra.

Parte de desarrollo de Adobe Commerce

NOTA: La inyección de variable de número CSP estará disponible de forma predeterminada en Adobe Commerce 2.4.8 y versiones posteriores. Si implementa esta inyección personalizada en versiones anteriores de Adobe Commerce, deshaga estas personalizaciones antes de actualizar a Adobe Commerce 2.4.8 o superior. Si está ejecutando Adobe Commerce 2.4.8 o superior, vaya a la sección Configuración de GTM.

  1. En su módulo personalizado, utilice CSP Nonce Provider y pase el nonce a JavaScript. Para obtener más información, consulte Conceptos básicos de plantilla en la documentación para desarrolladores de Adobe Commerce.

  2. Inserte la variable global con el nonce mediante JavaScript:

    < script>

    window.cspNonce = config.cspNonce;

    < /script>

  3. Este script establece una variable global cspNonce con el valor del nonce actual, que se puede capturar en la variable de Google Tag Manager y se utiliza para firmar scripts de HTML personalizados con el fin de garantizar que se pueden ejecutar en el CSP. Debe inyectarse en todas las páginas.

Parte de configuración de GTM

  1. Capture el valor de esta variable desde GTM:

    1. Cree una variable Google Tag Manager del tipo Variable JavaScript. Asigne un nombre claro a la variable, ya que se hará referencia a ella más adelante. En este ejemplo, es gtmNonce.

    2. Establezca Global Variable Name en el nombre de la variable global de JavaScript insertada en el paso anterior. En este ejemplo, es cspNonce.

  2. Modifique el bloque de HTML personalizado que contiene la JavaScript que debe ejecutar al cerrar la compra para incluir el atributo nonce, que hace referencia a la variable GTM creada anteriormente.

< script nonce="{{gtmNonce}}">
                     console.log("Esto es una prueba");
              < /script>

NOTA: Asegúrese de marcar la casilla de verificación Support document.write, ya que es esencial para que el script funcione correctamente.

Al agregar el atributo nonce, la secuencia de comandos se firma con el nonce proporcionado, lo que le permite ejecutarse de forma segura en la Política de seguridad de contenido (CSP).

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f