Lo de tomar las variables de PHP
y usarlas en javascript para mi es totalmente irrecomendado, se supone que javascript no deberia mezclarse con PHP
, mas que todo por la legibilidad del código, ya que para poder que puedas usar directamente variables de PHP
en javascript
debe cumplirse la condicion de que el arhivo tiene que tener extension .php
, y como sabras los archivos javascript usan extension .js
.
Ahora tu pensaras...
Vale y entonces porque no simplemente le cambio la extension al archivo .js
y lo llamo?, pues pasa que al ser un archivo php
requerido desde un script lo que pasara es que PHP
no compilara ese código de la forma en la que lo deberia hacer, puesto que cuando lo requieres con una etiqueta <script>
le estas diciendo al codigo que vas a manejar un tipo de archivo no reconocido de manera directa por los navegadores (apache
es el que se encarga de traducir PHP
a código interpretable por el navegador), por lo tanto simplemente no es buena opcion hacer eso, puesto que apache
no podra hacer que PHP
compile ese código como lo esperas que haga al este encontrarse en una etiqueta script
apuntando a un archivo externo.
La otra opcion seria que en el mismo archivo donde requieres usar PHP
y javascript
en conjunto tengas una etiqueta script que NO apunte directamente a otro archivo .js
, si no que directamente encierre el codigo javascript que quieras usar en conjunto con PHP
, algo de este estilo:
index.php:
<html>
<head>
</head>
...
...
<body>
<?php $MIVARIABLE = 'https://miurl.com'; ?>
<script>
const URL = "<?php echo $MIVARIABLE; ?>";
</script>
</body>
</html>
Lo cual tampoco seria una buena idea puesto que la idea es nunca mezclar el frontend con el backend, de todas maneras lo otro del porque te digo que no es buena idea es porque bajo esta solucion estaras limitado a usar codigo javascript
dentro del mismo HTML
, lo cual ya te digo yo que seria terrible para la manejabilidad del codigo.
Respecto a sobre como puedes ocultar esa URL
enrealidad NO se puede de manera directa, considera que hay multiples maneras en las que el navegador confabula para poder que puedas ver el codigo fuente de una pagina.
Un ejemplo muy sencillo es si le das click derecho a alguna pagina y seleccionas ver código fuente de pagina, directamente en esa parte te dejara ver los scripts, como estan constituidos y su información.
Otra opción por la cual la persona podrá ver esta información sin problemas es simplemente usando la consola, puesto que, si NO usas algo llamado encapsulación, tu código será directamente modificable desde la consola.
Por ejemplo puedes probar a en tu pagina darle F12 y en el apartado consola trata de escribir el nombre de una variable que tengas en tu código, el resultado es que la consola te la reconocerá y te mostrara en el autocompletado el nombre de tu variable.
Puedes solucionar esto usando encapsulamiento, una forma de crear encapsulamiento es poner todo tu script dentro de una función de la siguiente manera:
//AQUI NO
window.onload = ()=>{
//TODO tu codigo debe ir aqui!
alert("Codigo encapsulado!");
}
//AQUI TAMPOCO!
Notese que usar varias encapsulaciones no significa que el programa sea mas seguro, apartir de la primera encapsulacion las siguientes son innecesarias o irrelevantes.
Otro problema es la pestana networking
, la cual sabotearia cualquier intento que hagas por ocultar la URL
real para que el usuario no pueda acceder a ella, puesto que el usuario de todas maneras puede ir simplemente a networking y sin saber directamente cual es la URL
que usas podra acceder a ella si no tienes cuidado.
Porsupuesto claro si es que tu haces algun tipo de peticion hacia esa URL
, de lo contrario no se reflejaria en networking.
Asi que mi propuesta de solucion es la siguiente:
Usar algo llamado CORS del lado del servidor para proteger ese recurso (supongo yo que esa es una URL de tu dominio y tu quieres acceder es a un archivo PHP que se encuentre en tu servidor).
Si esto es asi, puedes usar las Cross Origin Resource Sharing, (CORS
), para mejorar un poco la seguridad del archivo.
por ejemplo, si tu URL
apunta a enviarDatos.php
, AL INICIO del documento PHP colocarias la siguiente linea:
<?php
header("Access-Control-Allow-Origin: https://miurl.com");
?>
Si bien no es que esto resuelva el problema del todo, esto negara el acceso al recurso de esa URL
para cualquier otro dominio externo o foraneo al tuyo.
Y que pasa si el usuario esta en el mismo dominio?
Para este caso te diria que si lo que quieres proteger es un recurso que vayas a cargar en tu pagina para que este NO sea descargable NI visible o tan siquiera accesible de manera tan directa, como por ejemplo imagenes
, videos
, sonidos
, documentos
, etc (cualquier cosa que pueda ser escrita en un archivo), puedo referirte a este enlace en el que explico de manera mas detallada como puedes proteger esos recursos de mejor manera para poder que el acceso sea mucho mas complicado:
¿Cómo puedo bloquear la combinación de teclas Ctrl+U y Ctrl+S?
Si bien por el titulo no parece algo relacionado el fin ultimo en esa pregunta era parecido a lo que planteas, solo que con archivos que la persona cargaria en su pagina (Media
).
Si lo que quieres no es ocultar un Media
que vayas a cargar en la pagina, si no directamente la URL
como digo la pestana networking
siempre te delatara, por lo tanto aunque se encripte o se codifique la URL
desde el frontend (no es lo mismo codificar que encriptar), para poder hacer la petición hacia el otro archivo se debe hacer con la URL
desencriptada, por lo que he ahí el problema mas grande, la pestana networking siempre va a delatarte.
Por el momento no conozco mas a fondo sobre de que manera se podria proteger mas a fondo ese recurso ademas de las CORS
, htaccess
y el link adjuntado, sin embargo cualquier propuesta que ayude a mejorar aquello que he dicho es bien recibida.
EDIT
De hecho una forma que se me ocurre de poder ocultar esa URL
es simplemente no ponerla en tu HTML
y rogar por que usuarios que no sean tan avanzados no descubran que puedes ver las peticiones hechas a otros archivos y la direccion a la que se hicieron en la pestana networking.
La forma que pienso en la que podrías mantener alejada esa URL de las manos de la persona es creando un script
como tipo module
y en vez de usar esa variable URL
directamente en el nuevo script
tipo module
hacer uso de la sentencia import
de ES6 hacia otro archivo JS
desde ese archivo tipo module
, este aspecto y el porque funciona lo describo de mejor forma en el enlace que he puesto, deberias mirar el enlace y fijarte atentamente en lo de la sentencia import.
Ya que pese a que el código de los script
tipo module
pueden verse al igual que los scripts normales, la diferencia radica en que cuando usas la sentencia import
en un script tipo module
, las cosas que se esten importando mediante la sentencia import de ES6 NO podrán verse en el código que importa el modulo, y al momento de que desees descargar la pagina el navegador SI te dejara descargar la pagina, pero NO sus módulos, por lo que considéralo un pequeño hack para el caso en el que la persona no conozca lo de la pestana networking.