Teams WebApp – Cuando se añade una nueva pestaña tipo web, con una URL a un SharePoint, no funciona. IFrames y Clickjacking

Hoy quiero compartir con vosotros uno de los casos que más quebraderos de cabeza me ha dado últimamente y, como casi todo, resultó tener una solución más sencilla de lo esperado.

En este caso en particular se quería publicar, en uno de los grupos de Teams, la intranet de la empresa, creada en SharePoint Onprem 2013.

Me gustaría destacar que Microsoft Teams es un producto exclusivo de la nube de Office 365 y está optimizado para trabajar con el resto de productos Online. La integración de bibliotecas de SharePoint Onprem con Microsoft Teams no está soportada.  

No obstante, no se trata de asociar una librería si no de linquear una dirección de un SharePoint, publicado externamente, que se comportaría como cualquier otro sitio web.

Ejemplo de creación de una pestaña web

Como podéis ver en la ultima de las imágenes este blog carga perfectamente.

Para reproducir el problema voy a añadir una nueva pestaña, tipo web, a muestro Teams de prueba y usaré la dirección de la página principal de Microsoft.

Y Opps! Aquí encontramos nuestro problema. “Si su sitio no se carga correctamente, haga click aquí”

Cuando clicamos en el enlace vemos las siguientes opciones.

• Ver el sitio en su aplicación de escritorio. Si seguimos este enlace y accedemos a la aplicación la página se cargará correctamente.
• Ir al sitio web.  La página se cargará correctamente
• Volver a cargar esta ficha. El error permanecerá.

Con una  traza deFiddler  podemos ver algo muy interesante: La página está se carga pero no se renderiza. En la siguiente imagen podéis ver como se recibe un código 200 como respuesta y como la web está presente, pero por alguna razón TeamsWebApp no es capaz de mostrarla.

¿Por qué se carga en la aplicación de escritorio y no en la web? ¿Qué diferencia existe entre ellas?

Múltiples, desde luego. Pero la diferencia que nos atañe en ese caso es que la aplicación de escritorio trabaja conWebviewsmientras que Teams WebApp lo hace conIFrames.

Esto sucede porque SharePoint, y muchas páginas de Microsoft, evita por defecto el IFRAMING de páginas entre dominios como medida de seguridad para evitar el clickjacking.

El  clickjacking  es un ataque web donde se engaña a la victima para que haga clic en un enlace o elemento que no tenía la intención de visitar o pulsar. Una de las formas que tienen las paginas defenderse de este ataque es evitar que se carguen Iframes.

Como permitir los Iframes en Sharepoint.

• Abrir Sharepoint Designer(El clásico, no wiki/sitepage)
• Modificar la Master Page para el sitio.
• En la sección de body añadir la líena  <WebPartPages:AllowFraming runat=”server”/>
• Guardar el archivo.
• Refrescar la página de Sharepoint en Teams. Es posible que se obtenga un error inicial con un enlace a la página de mantenimiento apareciendo  ?Conttents=1 al final de la URL. Aparecerá un cuadro que pondrá “Allow Framing page”. Cerrando esa página y debería estar solucionado.