CODEWITHSUNDEEP
apachehttphttps
Sebastien Lorber
Sebastien Lorber

Reputation: 92112

How to easily serve static files over HTTPS locally

We have frontend and backend developers. For now, frontend developers have to get running all the backend stuff on their computers, which can be quite heavy to run/compile.

I'm trying to see how to lighten this dev process by setting up an integration server on which the frontend developers will be able to plug their locally served files.

Basically a frontend developer will go to an url like https://integration.company.com/?baseStaticAssetUrl=http%3A%2F%2Flocalhost%3A8080 so that the developer can specify where the backend should get the JS/CSS files.

This works fine except with HTTPS because you can't load JS files with HTTP if the backend html file was loaded with HTTPS.

Chrome complains:

[blocked] The page at 'https://integration.company.com/?baseStaticAssetUrl=http%3A%2F%2Flocal.host%3A8080' was loaded over HTTPS, but ran insecure content from 'http://local.host:8080/app.css': this content should also be loaded over HTTPS.

For reasons specific to our business, I'd like to keep the HTTPS enabled (switching from HTTP to HTTPS already let us to unexpected errors due to browser security).

For these reasons, I wonder if it is easily possible to setup an HTTPS server locally.

For HTTP it's pretty simple (python -m SimpleHTTPServer $PORT) but for HTTPS is there any simple solution (or should I use something like Apache)? I guess I will have to get certificates for localhost domain or something?

Do you see any other alternative to serving files in HTTPS that could solve my problems?

Upvotes: 1

Views: 5624

Answers (3)

Murali KG
Murali KG

Reputation: 134

You can use ngrok and get a https proxy address.

ngrok http $port

Update May-2020: Caddy v2 supports local https.

Upvotes: 4

Madis Nõmme
Madis Nõmme

Reputation: 1303

There are couple ways for doing it based which Language/Framework/System you like more.

The basic steps are:

  1. Generate ssl certificate (replacing CN=localhost.ssl with your desired domain) openssl req -nodes -sha256 -days 365 -newkey rsa:2048 -new -x509 -subj \ "/C=GC/ST=Garbage/L=Collector/O=ProgrammerMan/OU=Codeland/CN=localhost.ssl/[email protected]" \ -keyout localhost.ssl.key -out localhost.ssl.cert
  2. Start web server with generated certificate to serve files from your desired folder. Example config for nginx is provided below

Example config for getting nginx to serve the same webapp folder over 3002 port. Https is turned on with the ssl keyword in listen instruction. Also the ssl_certificate and ssl_certificate_key are important. start stop and reload files are provided for your conveniency. They allow starting the nginx example in self-contained way and isolated in case there is nginx already running on the machine.

error_log  error.log;
pid        nginx.pid;

events {
  worker_connections  1024;
}

http {
  # Usually nginx has much more comprehensive list of mime types
  # But to keep the example self contained, here are some essential
  # definitions
  types {
    text/html                             html htm shtml;
    text/css                              css;
    text/xml                              xml;
    image/gif                             gif;
    image/jpeg                            jpeg jpg;
    application/javascript                js;
    image/png                             png;
  }

  server {
    listen              3002 ssl;
    server_name         localhost.ssl;
    ssl_certificate     ../localhost.ssl.cert;
    ssl_certificate_key ../localhost.ssl.key;

    root ../webapp;

    location / {
      autoindex on;
      index index.html;
    }
  }
}

Save the config in localhost.ssl file, put your files in webapp folder and start nginx with nginx -ppwd-c localhost.ssl

I also wrote an blog post on this topic Serving web application locally over https

Upvotes: 0

Sebastien Lorber
Sebastien Lorber

Reputation: 92112

Actually I did not notice until now but when the Chrome restriction happens, there's a little shield icon on the Chrome url bar. Clicking it permits to remove the restriction so that HTTP content can be loaded from an HTTPS served page if the user really wants to. This solves my problem as I don't need anymore to serve HTTPS files locally.

Upvotes: 0

Related Questions