Unfortunately, you really can’t; modern browsers will not allow insecure http-based content via https 27.
Even if you could, it wouldn’t really be secure.  The streamlit app contained within the iframe would still be open to the world and exploitable by anybody scanning for open ports.
One way to do this would be to set up the streamlit app behind a web server reverse proxy, using https (Apache2 or Nginx).  Here’s a good stackoverflow conversation about how to make this work on Nginx 131 (in the example, imagine that your streamlit app is running on port 3001).  Then you would need to apply HTTPS settings to those server definitions as in the Nginx https documentation here 24.
Then you would load the iframe with the basic Auth params supplied in the URL through your user-authenticated web page 111.   It’s not a perfect solution, but at least you can guarantee that the credentials will only be embedded in pages meant for logged-in users.  You’ll have to trust your users not to reshare the link.
I know this seems convoluted; right now Streamlit has been optimized as an internal tool for sharing data science and ML results.  We can see that people really want to use it as a web app deployment tool, and our engineering path is being influenced by that!