Profundizar más en Seguridad web Lightning

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

• Explicar cómo funciona Lightning Web Security.
• Activar Lightning Web Security en su organización para un componente de otro espacio de nombres.

Aislamiento a través de la virtualización

Ya mencionamos que Lightning Web Security funciona mediante el aislamiento de componentes en sus propios entornos sandbox de JavaScript dedicados a su espacio de nombres. ¿Pero cómo funciona eso? Echemos un vistazo a la virtualización.

La virtualización es el estándar de la industria para el aislamiento. Funciona al replicar el entorno de hospedaje de forma transparente y al ejecutar códigos para cada espacio de nombres en su propio entorno virtual dentro del hospedaje.

Puede tener muchos entornos virtuales que ejecutan códigos simultáneamente dentro de su entorno de hospedaje. Esto mantiene la ejecución de todos los espacios de nombres en su organización, a la vez que previene que el código en esos espacios de nombres acceda a los recursos o se vea afectado por ellos en otro entorno virtual. Cualquier código malintencionado en un entorno virtual permanece allí y solo puede provocar daños en el entorno virtual donde se ejecuta.

Motor de virtualización

En el nivel del navegador, el motor de virtualización se ejecuta dentro del entorno de hospedaje para crear y gestionar estos entornos virtuales. Este motor puede acceder a todos los recursos en el entorno de hospedaje y, además, puede controlar qué recursos están disponibles para otros entornos virtuales.

Lightning Web Security funciona como el motor de virtualización en el entorno de hospedaje (el navegador). Los entornos sandbox de JavaScript de espacio de nombres son entornos virtuales.

Distorsiones

Uno de los beneficios de Lightning Web Security es que no requiere el uso de contenedores seguros para prevenir comportamientos que no son seguros. En su lugar, controla el acceso a los recursos en cada entorno virtual al modificar código selectivamente en el nivel de la API de JavaScript. Estas modificaciones se denominan distorsiones y se aplican en los entornos sandbox de JavaScript a recursos como objetos globales, cookies, acceso de red, almacenamiento local, etc. Las distorsiones alteran levemente las funciones para mantener su entorno más seguro.

Estas distorsiones de JavaScript:

• Previenen los intentos de la API por alterar el contenido y los datos fuera del entorno sandbox de JavaScript.
• Limitan el código en ejecución al entorno sandbox.
• Restringen o reducen el acceso dentro del entorno sandbox de JavaScript a DOM y comparten objetos globales, como window.location, y datos como las cookies.

Las distorsiones de API de Lightning Web Security se clasifican en estas tres categorías.

• Filtrado de contenido: filtra los intentos por acceder a propiedades en otros entornos sandbox, por ejemplo, en document.cookie, localStorage y sessionStorage; no obstante, los permite en el entorno sandbox actual.
• Sanitización: elimina el código malintencionado, por ejemplo, de los elementos innerHTML y outerHTML.
• Modificación de descriptor de acceso de propiedad: Impide la escritura o lectura de valores de ciertas propiedades, como shadowRoot.mode.

Para obtener más información sobre las distorsiones de Lightning Web Security, siga el vínculo en la sección Recursos.

Probar Lightning Web Security en una organización

En esta sección, hay pasos que puede seguir para ver Lightning Web Security en acción. No existe un reto práctico en este módulo, pero puede probar los pasos en su Trailhead Playground. Para ello, necesita familiarizarse con Salesforce DX y debe tener estas herramientas instaladas.

• Visual Studio Code con el paquete de extensiones de Salesforce
• Salesforce CLI

Si no está seguro acerca de alguno de estos requisitos, complete el proyecto Inicio rápido: Componentes Web Lightning.

Estos pasos se completan en su propia organización de práctica. Se recomienda que utilice un nuevo Trailhead Playground para asegurarse de que no contenga algo que podría entrar en conflicto con estas actividades. Para obtener un nuevo playground, en Trailhead, haga clic en su imagen de perfil, seleccione Organizaciones de práctica y haga clic en Crear Playground. Una vez que su playground está listo, ábralo y haga clic en Obtener sus credenciales de inicio de sesión y cambie su contraseña. Necesita estos detalles para autenticarse en su organización en un paso posterior.

Lightning Web Security se activará automáticamente en los Trailhead Playgrounds a partir de la versión Winter '23. Esto significa que para que esta actividad funcione correctamente, primero debe desactivar Lightning Web Security.

1. En su Trailhead Playground nuevo, haga clic en .
2. En el cuadro Búsqueda rápida, ingrese Configuración de la sesión.
3. En Configuración de la sesión, localice Lightning Web Security y anule la selección de la casilla de verificación. Los cambios que realice en esta configuración pueden tardar 10 o 15 minutos en mostrarse en su organización debido al almacenamiento en caché.
4. Haga clic en Guardar.

Empiece por utilizar un componente de otro espacio de nombres. En este ejemplo, se instala el paquete Lightning Web Security y luego se manipulan algunos códigos para ver cómo Lightning Web Security permite utilizar componentes de otros espacios de nombres. Lightning Messaging Utility es un paquete gestionado de AppExchange que contiene componentes para ayudarlo a mostrar mensajes y notificaciones mediante Lightning Design System.

Primero, instale el paquete Lightning Messaging Utility.

1. En su playground, en la aplicación Playground Starter, haga clic en la ficha Instalar un paquete.
2. En el campo Id. de paquete, pegue 04t5w000003gWWBAA2.
3. ¿Tiene problemas para instalar el paquete? Lea este artículo para obtener ayuda.
4. Haga clic en Instalar.
5. Seleccione Instalar para todos los usuarios.
6. Haga clic en Instalar.
7. Haga clic en Listo.

A continuación, cree un proyecto en Visual Studio Code. Dado que configuró su entorno de desarrollo, puede crear un simple componente web Lightning.

1. En Visual Studio Code, abra la paleta de comandos. Para ello, pulse Ctrl+Mayús+P (Windows) o Cmd+Mayús+P (macOS).
2. Escriba SFDX.
3. Seleccione SFDX: Crear proyecto.
4. Presione Intro para aceptar la opción estándar.
5. Ingrese lwsNamespace como nombre del proyecto y presione Intro.
6. Seleccione una carpeta para almacenar el proyecto.
7. Haga clic en Crear proyecto. Su configuración de base debería tener un aspecto similar a este.

Ahora, puede autorizar su Trailhead Playground.

1. En Visual Studio Code, abra la paleta de comandos. Para ello, pulse Ctrl+Mayús+P (Windows) o Cmd+Mayús+P (macOS).
2. Escriba SFDX.
3. Seleccione SFDX: Autorizar una organización.
4. Presione Intro para aceptar la opción URL de inicio de sesión predeterminada del proyecto.
5. Escriba el alias myDevorg y presione Intro.
   Se abrirá el inicio de sesión de Salesforce en una ventana separada del navegador.
6. Inicie sesión con sus credenciales de Trailhead Playground.
7. Si se le solicita que permita el acceso, haga clic en Permitir.
8. Una vez que se autenticó en el navegador, la CLI recuerda sus credenciales. El mensaje de operación correcta debería tener un aspecto similar a este.

A continuación, cree un componente web Lightning.

1. En Visual Studio Code, en su nueva carpeta, amplíe force-app.
2. Haga clic con el botón derecho en lwc y seleccione SFDX: Crear componentes web Lightning.



3. En la paleta de comandos, ingrese crossNamespace como nombre del nuevo componente y presione Intro.
4. Presione Intro de nuevo para aceptar la ubicación force-app/main/default/lwc.
5. Los archivos recién creados se podrán ver en la carpeta lwc.

Ahora, actualice el código en el componente crossNamespace para que haga referencia a un espacio de nombres diferente. Observe que este código hace referencia a un componente en el espacio de nombres ltngmu.

1. En el archivo crossNamespace.html, sustituya el código con lo siguiente.

2. <template>
     <lightning-card>
      <div class="slds-p-around_small">
         <p>Message displayed using Lightning Messaging Utility:</p>
         <ltngmu-lwc-messaging-utility
           message-type="alert"
           show-message="true"
           message-body="hello!"
           message-variant="warning"
           show-icon="true"
           icon-name="utility:warning"
         ></ltngmu-lwc-messaging-utility>
      </div>
     </lightning-card>
    </template>

3. Haga clic en Guardar.
4. En el archivo crossNamespace.js.meta.xml, sustituya el código con lo siguiente.

5. <?xml version="1.0" encoding="UTF-8" ?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
      <apiVersion>56.0</apiVersion>
      <isExposed>true</isExposed>
      <targets>
         <target>lightning__AppPage</target>
      </targets>
   </LightningComponentBundle>

6. Haga clic en Guardar.

Ahora, implemente el código en su Playground.

1. Haga clic con el botón derecho en la carpeta default en force-app/main.
2. Haga clic en SFDX: Implementar fuente en organización.



3. Puede ver el estado de su implementación en la ficha Resultado del terminal integrado.

A continuación, cree una página en el Generador de aplicaciones Lightning para ver su componente.

1. En su Playground, haga clic en Configuración.
2. En Configuración, ingrese Generador de aplicaciones Lightning en el cuadro Búsqueda rápida y selecciónelo.
3. Haga clic en Nuevo.
4. Seleccione Página de aplicación y, a continuación, haga clic en Siguiente.
5. En el campo Etiqueta, ingrese Ejemplos de LWS y haga clic en Siguiente.
6. Seleccione Una región.
7. Haga clic en Finalizar.
8. Haga clic en Guardar.
9. Haga clic en Activar.
10. Seleccione Activar para todos los usuarios y, a continuación, haga clic en Guardar.
11. Haga clic en Finalizar.
12. Escriba crossNamespace en el cuadro de búsqueda del componente, en la parte superior izquierda de la pantalla, y arrastre el componente crossNamespace hacia el marco superior de la página.
13. Al instante aparecerá un mensaje de error en lugar de su componente. Amplíe el campo Equipo técnico para obtener más detalles sobre el error. Indica el componente que está intentando hacer referencia a un módulo de espacio de nombres cruzado.

    

Ahora, active Lightning Web Security para ver el componente correctamente.

1. Haga clic en Aceptar para cerrar el mensaje de error.
2. Haga clic en y, luego, en Abandonar para volver a Configuración.
3. En el cuadro Búsqueda rápida, ingrese Configuración de la sesión.
4. En Configuración de la sesión, ubique Lightning Web Security y seleccione la casilla de verificación.
5. Haga clic en Guardar.

Ahora, vuelva a agregar el componente a la página Ejemplos de LWS.

1. Regrese al Generador de aplicaciones Lightning.
2. En Ejemplos de LWS, haga clic en Editar.
3. Arrastre el componente crossNamespace hacia la ventana principal.
4. Haga clic en Guardar.
5. ¡Ya puede ver el componente correctamente!

Ahora véalo en la aplicación Ejemplos de LWS.

1. Haga clic en .
2. Haga clic en .
3. Busque y abra Ejemplos de LWS.



4. El componente Lightning Messaging Utility que anteriormente no funcionaba de forma correcta debido a que contiene un componente de otro espacio de nombres ahora funciona correctamente.

Aprendió cómo funciona Lightning Web Security para modificar el código a fin de mantener los componentes seguros. En la próxima unidad, aprenda sobre herramientas que lo ayudarán a crear componentes compatibles con LWS y a resolver cualquier problema que pueda surgir.

Recursos

• Documentación del desarrollador: Cómo funciona Lightning Web Security
• Documentación del desarrollador: Comparación entre Lightning Web Security y Lightning Locker
• Documentación del desarrollador: Activar Lightning Web Security en una organización