Securing public hostname of a service used inside another public hostname

I have one tunnel set up.

I have a webserver eg http://10.10.10.10. Inside one of my pages I have a javascript call to a service(?) – a mapserver eg http: //10.10.10:7800.

When I set up my public host through the tunnel the webserver runs but the mapserver causes a problem because of the http (not https) call and does not display. Per Cloudflare instructions I tried just //10.10.10:7800 - no luck.

So I created another public host for the mapservice at 10.10.10.10:7800 and everything works great.

BUT - now I want to add a layer of security. I added an email rule to both public hostnames. Go to the web page, enter my email address, get and enter my email code - and page doesn’t work - of course cause there is no way to enter an email for the mapserver being called inside the page.

So Question - forgive my incorrect language – I want to secure both my public hostnames while using one ‘inside’ the other. Is there a method, or any way to pass some sort of security/authentication from the webserver to the mapserver in the page? I could just leave the mapserver unauthenticated and all works fine, but I don’t want someone just randomly going to the mapserver url.
IP address won’t work cause I am moving around.

Or some other idea?

Thanks

Thanks