Skip to content

Instantly share code, notes, and snippets.

@liuliangsir

liuliangsir/charles-map-remote.md

Forked from radum/charles-map-remote.md
Created February 26, 2023 09:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save liuliangsir/7c97586a2822c0889837beee44419aea to your computer and use it in GitHub Desktop.
Save liuliangsir/7c97586a2822c0889837beee44419aea to your computer and use it in GitHub Desktop.
Download ZIP
Charles proxy Map Remote over HTTP or HTTPS
Raw
charles-map-remote.md

Charles Proxy Map Remote over HTTP or HTTPS

The Map Remote tool changes the request location, per the configured mappings, so that the response is transparently served from the new location as if that was the original request.

HTTP

Using this feature for http resources does't require anything else apart from just configuring your Map Remote entry.

Always make sure you are clearing your cache before you test. Even if Charles is configured properly you might not see the changes unless the browser gets the resource again from the server and not for its local cache.

HTTPS

In order to use Map Remote over https you need to create a self signed certificate and launch your local server with that.

Step 1 - Create a self signed certificate

Use

or do it manually using the following commands.

openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout localhost.key -out localhost.crt

Running the command above will prompt for additional information. Add whatever details you want but use localhost for Common Name (or whatever domain name you want like local.dev).

Common Name (e.g. server FQDN or YOUR name) []:localhost

Once you are done 2 files will be created a localhost.cert and a localhost.key. Store them in a folder you can easily access when needed.

Step 2 - Add the created certificate to your Keychain

On a Mac open Keychain and use the File \ Import menu to import the newly created certificate. Make sure you select the System tab before you do it as it need to go in there.

Next, double click your new certificate and under Trust dropdown menu select Always Trust.

Sometimes you might need to restart your machine for this to take effect.

This will make the browser trust your certificate. The https icon on Chrome and others will be green now.

Step 2 - Alternative

That browser warning

When you navigate to the server’s address (most likely https://localhost:3000), you will probably get a warning about the connection being insecure similar to the following:

Chrome warning about an insecure certificate

This is normal and correct, since the certificate generated by simplehttp2server is self-signed and doesn’t carry the signature of any common certificate authority (CA). All browsers offer a way to temporarily ignore this error and proceed. This is safe to do.

When using Chrome you can enable the allow-insecure-localhost flag on chrome://flags which disableѕ the certificate warning for localhost. This flag is required if you want to use ServiceWorkers on https://localhost with a self-signed certificate you haven't explicitly "trusted".

Step 3 - Tell Charles to Proxy SSL

Open Charles and from the menu select Proxy \ SSL Proxy Settings.

Add 2 items in the list. One will be your remote domain name Ex: radumicu.com or dev.radumicu.com, and another for localhost localhost:{PORT} (replace port with your port).

Step 4 - Tell Charles to install its own signed certificates

Charles in order to proxy SSL connections needs to install its own certificates. With Charles open click on the Help menu and then select SSL Proxying \ Install Charles Root Certificate

How to map remote a file

To use Map Remote, you need to have a local server running that handles your requests. You could use Pythons simple http server, but that is not very good these days and it is slower than others.

A good tool is http-server NodeJs package, but a better tool is local-web-server. local-web-server is better because it can gzip your requests, and this helps with performance profiling.

Install it globally using:

npm install -g local-web-server

And from the path you want to serve your files run:

ws -p {port} -z --key {PATH}/localhost.key --cert {PATH}/localhost.crt

Replace {port} and {PATH} with your settings.

Next configure in Charles a Map Remote entry with your current settings and your remote resource will be replaced with your local one. Remember to clear cache before you test or use Disable cache in Dev Tools.

Notes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment