Precursor: me han pedido que implemente un widget de terceros que se carga a través de una etiqueta de secuencia de comandos.
Este script se implementa colocando <script src="https://some.domain/script.js" /> donde desea que se ejecute. Escribe el widget en esa sección del DOM en carga; incluida la carga de algunas bibliotecas jquery.
Inicio del guión:
document.write("<!–- jQuery and jQuery UI are a required... El script contiene un formulario, que incluye un token dinámico, por lo que no es algo que pueda replicar como jsx .
Intenté usar un iFrame, que funciona hasta el envío, después de lo cual la página de terceros intenta abrirse. Esto sucede, no en una nueva pestaña, sino dentro del iFrame. No solo eso, sino que X-Frame-Options se establece en el sameorigin . Entonces, incluso si pudiera hacer que una solución de iFrame funcione, termina sin funcionar.
Dado document.write no funcionará en React, las opciones como react-helmet, react-load-script o hooks están descartadas.
Espero que haya una manera de lograr esto que no implique involucrar a los desarrolladores de este proveedor externo para solucionar los problemas (la fecha límite se avecina).
¿Alguna guía?
Solicité a mi proveedor externo que actualice su enfoque. document.write ha estado bajo el microscopio durante bastante tiempo y usarlo en este momento simplemente no es suficiente. Más información:
https://web.dev/no-document-write/
Evite document.write() # Elimine todos los usos de document.write() en su código. Si se usa para inyectar scripts de terceros, intente usar la carga asíncrona en su lugar.
Si el código de terceros usa document.write(), solicite al proveedor que admita la carga asíncrona.