Abrir los enlaces de nuestras redes en el navegador predeterminado

Hace unas semanas me encontré con que un cliente tenía en su perfil de Instagram, un link a su sitio web, en donde había un formulario que pedía la carga de un archivo.

Como se habrán dado cuenta, tanto Instagram como otras redes sociales, abren estas URLs dentro de la misma aplicación y no, por ejemplo, en el Chrome o Safari.

El inconveniente es que por problemas de seguridad, algunas redes no permiten la carga de archivos desde su misma aplicación, por lo que necesitábamos que cuando el usuario haga click sobre el link, este se abra directamente en el navegador del dispositivo.

¿Cómo resolvimos este problema?

Investigando un poco me encontré con este post que sortea nuestro mismo inconveniente de una forma muy divertida.

Si analizamos el User-Agent del browser de instagram (datos de identificación del dispositivo y aplicación que está ingresando a la web) nos podemos encontrar con algo como lo siguiente

Mozilla/5.0 (Linux; Android 6.0.1; SM-J700F Build/MMB29K; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/74.0.3729.112 Mobile Safari/537.36 Instagram 110.0.0.16.119 Android (23/6.0.1; 320dpi; 720x1280; samsung; SM-J700F; j7elte; samsungexynos7580; en_US; 171727780)

De esta manera, nuestro sitio web se entera que la persona que lo visita lo hace a través de la aplicación de Instagram, entonces necsitamos decirle que no siga la navegación desde esa aplicación, sino que lo haga desde el Chrome o Safari, y para lograr eso podemos devolver una respuesta que Instagram no entienda, o no pueda procesar, y de esta manera se “fuerce” a abrirse en el navegador predeterminado.

Implementando una DummyBytes API

La DummyBytes API funciona de una manera muy sencilla, si el usuario viene a través de la aplicación se devuelve como respuesta un conjunto de bytes aleatorios en formato de archivo, y es esto lo que obliga a que se abra en el navegador predeterminado.

Su implementación en PHP puede hacerse de la siguiente manera

<?php
    $userAgent = $_SERVER['HTTP_USER_AGENT']; // Obtenemos el valor del User-Agent
    if (strpos($userAgent, 'Instagram')) { // Corroboramos que provenga desde Instagram
        header('Content-type: application/pdf');
        header('Content-Disposition: inline; filename=dummybytes');
        header('Content-Transfer-Encoding: binary');
        header('Accept-Ranges: bytes');
        @readfile($file); //Devolvemos bytes aleatorios en forma de archivo
    }

¡Y listo! Deberíamos asegurarnos de que cada petición se pueda filtrar a través de la API y nos aseguramos de que siempre se abra en nuestro navegador.

#LoHacemosAdue