javascript - ¿Cómo permitir que solo se ejecuten los recursos de la lista blanca(scripts, píxeles, etc.) dentro de un marco flotante?

html html5

Question

Estoy buscando un método para permitir que solo los scripts de la lista blanca se ejecuten dentro de un iframe de espacio aislado. Estaba pensando en una directiva de iframe-sandbox que solo permite ejecutar scripts en una lista blanca dentro de un iframe. La analogía es la directiva script-src en la Política de seguridad de contenido.

El problema:

<iframe sandbox="allow-same-origin allow-scripts" src="https://app.thirdparty.com" width="100%" height="800" frameBorder="0"></iframe>

La aplicación en el iframe proporciona una funcionalidad valiosa para mi sitio web. Sin embargo, atrae recursos externos que me gustaría controlar (es decir, bloquear), por ejemplo, AnalyticsJavaScript.com y TrackingPixel.com. Me gustaría permitir scripts desde app.thirdparty.com pero bloquear AnalyticsJavaScript.com y TrackingPixel.com.

Cualquier ayuda apreciada.

Answer 1

La respuesta a esto es desafortunadamente complicada. Con la llegada de la caja de arena de iframe, la pregunta parece bastante simple, pero la especificación que está buscando es un trabajo en progreso. Por lo tanto, si desea un soporte de navegador decente, el problema se centra en cómo modificar el contenido de un iframe, que generalmente implica algún tipo de proxy.

Política de seguridad de contenido

La especificación que realmente necesitas es la CSP . En su forma más simple, permitiría scripts específicos con el atributo iframe csp="..." .

<iframe ...
        src=""
        csp="script-src https://app.thirdparty.com/"
        ...></iframe>

Cualquier secuencia de comandos de dominios no especificados (es decir, rastrear secuencias de comandos como en la pregunta) no se permitirá en la respuesta. Tenga en cuenta que limitar los scripts a los de una fuente específica depende de la cooperación con el servidor de la aplicación de terceros. Si el servidor no informa al agente de usuario que cumplirá con las restricciones de CSP, se bloqueará la respuesta.

El CSP sigue siendo un borrador de trabajo y puede cambiar en el futuro. Como se indica en los comentarios, Chrome 61 y Opera 48 han implementado la especificación CSP, pero en esta etapa no hay ninguna señal de Firefox, Edge o Safari de que también lo implementarán. A menos que pueda garantizar que sus usuarios solo usarán un navegador que admita la especificación, los scripts de seguimiento aún estarán presentes para un porcentaje muy grande de usuarios.

Las sugerencias restantes incluyen la modificación del contenido del iframe para eliminar los scripts ofensivos.

Proxy inverso

Crear un proxy inverso para bloquear un par de secuencias de comandos de seguimiento en un iframe es probablemente equivalente a usar una ojiva nuclear para encender un campamento hasta donde llega el exceso. Pero, si puede configurar su servidor en esta medida, es el método más confiable y perfecto para la inyección / modificación / bloqueo de contenido iframe que he encontrado.

La página de Wikipedia dice:

Un proxy inverso es un tipo de servidor proxy que recupera recursos en nombre de un cliente de uno o más servidores. Estos recursos se devuelven al cliente, apareciendo como si se hubieran originado desde el propio servidor proxy.

Debido a que el proxy inverso es un intermediario entre la aplicación de terceros y su sitio, puede modificar de forma transparente las respuestas para eliminar los scripts no deseados. Usaré Apache en este ejemplo, pero su implementación realmente depende del servidor que ya esté usando.

Necesita un subdominio para el proxy que apunta a la IP de su servidor, por ejemplo, proxywebapp.yourdomain.com . En su servidor, crearía un host virtual en httpd.conf que utiliza el módulo Apache mod_proxy . Dentro de la configuración de su host virtual, sustituiría las llamadas de script a AnalyticsJavaScript.com y TrackingPixel.com con espacios en blanco. Si la aplicación de un tercero debe usar HTTPS, el procesamiento de proxy inverso se vuelve más complicado ya que necesita un host virtual SSL y un certificado SSL para el FQDN del proxy.

<VirtualHost *:*>
    ServerName        proxywebapp.yourdomain.com
    ProxyPreserveHost On
    ProxyPass         "/" "http://app.thirdparty.com/"
    ProxyPassReverse  "/" "http://app.thirdparty.com"

    # in case any URLs have the original domain hard coded
    Substitute        "s|app.thirdparty.com/|proxywebapp.yourdomain.com/|i"
    # replace the undesired scripts with blanks
    Substitute        "s|AnalyticsJavaScript/| /|i"
    Substitute        "s|TrackingPixel/| /|i"
</VirtualHost>

Tu iframe entonces apunta a proxywebapp.yourdomain.com .

<iframe ... src="proxywebapp.yourdomain.com" ...></iframe>

Una vez más: total exageración, pero debe trabajar de forma transparente.

Scripts proxy

Una tercera opción a considerar es implementar un script proxy en su servidor entre el iframe y la aplicación de terceros. Debería agregar funcionalidad al script proxy que busca y elimina los scripts no deseados antes de que alcancen el iframe. Además, el proxy significa que el contenido del iframe validará la política del mismo origen, por lo tanto, podría eliminar el contenido no deseado con JavaScript en la interfaz, aunque esto no garantiza que los scripts no se ejecutarán antes de que se eliminen. Hay muchos scripts de proxy disponibles en línea para todo tipo de backends (PHP, Node.js, etc. y nauseum). Es probable que instale el script y lo agregue como src del iframe, algo como <iframe ... src="proxy.php?https://app.thirdparty.com/" ...> .

A menos que esté configurado correctamente para todos los casos, es posible que el proxy no transfiera datos correctamente entre la aplicación de terceros y su servidor principal. Se requerirán pruebas.

Escribir su propio proxy del lado del servidor para eliminar un par de scripts de un iframe es probablemente un poco excesivo.

Si no puede acceder al backend, es posible raspar el contenido de la aplicación web utilizando JavaScript y una aplicación web CORS o JSONP, y modificarlo para eliminar los scripts. Esencialmente haciendo tu propio proxy en JavaScript. Dichas aplicaciones web (Cualquier origen, Todos los orígenes, etc.) le permiten omitir las restricciones de la política de dominios cruzados, pero como son terceros, ya no puede asumir que cualquiera de los datos de la aplicación web es privado. El problema con la comunicación correcta de cualquier transferencia de datos entre la aplicación y su servidor principal seguirá presente.

Resumen

Por el momento, no es factible una solución de frontend pura pura con soporte. Pero hay muchas maneras de despellejar a un gato y quizás incluso más formas de modificar el contenido de un iframe, sin importar las restricciones de dominio cruzado.

La política de seguridad de contenido parece prometedora y es exactamente lo que está pidiendo, pero actualmente su falta de soporte generalizado significa que solo se puede utilizar en situaciones muy específicas. Un proxy inverso que modifica el contenido puede requerir mucha configuración y en esta situación es como conducir un semirremolque de tamaño completo sobre una pista de Hot Wheels, pero es probable que funcione sin problemas. La modificación del contenido de un proxy de reenvío es algo más simple de implementar, pero puede interrumpir las comunicaciones con el servidor principal de la aplicación de terceros.

Answer 2

No puedes hacer esto como quieres (por ahora). Como se mencionó en los comentarios, CSP: EE es algo por venir.

Sin embargo, puede intentar enviar un proxy de la solicitud y eliminar los scripts innecesarios del cuerpo en el lado del servidor o en el lado del cliente, por ejemplo:

1) Obtener la página necesaria a través de XMLHTTPRequest

2) Eliminar no deseado

3) Inyectar en iframe en la página.

La "trabajabilidad" de este método depende únicamente de la funcionalidad de la aplicación externa. Es decir, no funcionará si la aplicación antes mencionada necesita registro / autorización del usuario final para trabajar, sin embargo, esto todavía puede ser adecuado para algunos casos simples.

PD: puede implementar una solución alternativa para hacer que esto funcione a través de la extensión del navegador, pero estoy seguro de que esto no es lo que quiere.