Skip to content

Instantly share code, notes, and snippets.

@liuliangsir
Forked from radum/charles-map-remote.md
Created February 26, 2023 09:41
Show Gist options
  • Save liuliangsir/7c97586a2822c0889837beee44419aea to your computer and use it in GitHub Desktop.
Save liuliangsir/7c97586a2822c0889837beee44419aea to your computer and use it in GitHub Desktop.

Revisions

  1. @radum radum revised this gist Feb 7, 2020. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -93,4 +93,5 @@ Next configure in Charles a Map Remote entry with your current settings and your
    * [Alternative for openssl generated certificate steps](https://github.com/lwsjs/local-web-server/wiki/How-to-get-the-%22green-padlock%22-with-a-new-self-signed-certificate)
    * [Common name no longer supported in Chrome](https://www.chromestatus.com/feature/4981025180483584)
    * All cert components must be SHA256 (Chrome)
    * Due to a long-running bug in openssl, must explicitly pass -extfile and extensions in order for the extensions to copy from the certificate request to the certificate. See [here](https://mta.openssl.org/pipermail/openssl-users/2016-January/002764.html).
    * Due to a long-running bug in openssl, must explicitly pass -extfile and extensions in order for the extensions to copy from the certificate request to the certificate. See [here](https://mta.openssl.org/pipermail/openssl-users/2016-January/002764.html).
    * https://github.com/lukejacksonn/servor
  2. @radum radum revised this gist Jun 27, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -18,6 +18,7 @@ Use

    - https://zerossl.com/free-ssl/#self
    - https://letsencrypt.org/docs/certificates-for-localhost/
    - https://github.com/FiloSottile/mkcert

    or do it manually using the following commands.

  3. @radum radum revised this gist Jun 22, 2018. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,12 @@ In order to use Map Remote over https you need to create a self signed certifica

    ### Step 1 - Create a self signed certificate

    Use https://zerossl.com/free-ssl/#self or do it manually using the following commands.
    Use

    - https://zerossl.com/free-ssl/#self
    - https://letsencrypt.org/docs/certificates-for-localhost/

    or do it manually using the following commands.

    ```shell
    openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout localhost.key -out localhost.crt
  4. @radum radum revised this gist Oct 27, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -40,7 +40,7 @@ This will make the browser trust your certificate. The https icon on Chrome and

    #### Step 2 - Alternative

    ## That browser warning
    ##### 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:

  5. @radum radum revised this gist Oct 27, 2017. 1 changed file with 12 additions and 0 deletions.
    12 changes: 12 additions & 0 deletions charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -38,6 +38,18 @@ 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](https://raw.githubusercontent.com/GoogleChrome/simplehttp2server/master/warning.png)

    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](http://peter.sh/experiments/chromium-command-line-switches/#allow-insecure-localhost) 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`.
  6. @radum radum revised this gist Jul 10, 2017. 1 changed file with 8 additions and 1 deletion.
    9 changes: 8 additions & 1 deletion charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -63,9 +63,16 @@ npm install -g local-web-server
    And from the path you want to serve your files run:

    ```shell
    ws -p {port} -c --key {PATH}/localhost.key --cert {PATH}/localhost.crt
    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

    * [Alternative for openssl generated certificate steps](https://github.com/lwsjs/local-web-server/wiki/How-to-get-the-%22green-padlock%22-with-a-new-self-signed-certificate)
    * [Common name no longer supported in Chrome](https://www.chromestatus.com/feature/4981025180483584)
    * All cert components must be SHA256 (Chrome)
    * Due to a long-running bug in openssl, must explicitly pass -extfile and extensions in order for the extensions to copy from the certificate request to the certificate. See [here](https://mta.openssl.org/pipermail/openssl-users/2016-January/002764.html).
  7. @radum radum revised this gist Jun 30, 2017. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@ Use https://zerossl.com/free-ssl/#self or do it manually using the following com
    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`.
    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
    @@ -34,6 +34,8 @@ On a Mac open Keychain and use the `File \ Import` menu to import the newly crea

    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 3 - Tell Charles to Proxy SSL
  8. @radum radum revised this gist Mar 13, 2017. 1 changed file with 5 additions and 3 deletions.
    8 changes: 5 additions & 3 deletions charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -50,16 +50,18 @@ Charles in order to proxy SSL connections needs to install its own certificates.

    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](https://www.npmjs.com/package/http-server) NodeJs package. Install it globally using:
    A good tool is [http-server](https://www.npmjs.com/package/http-server) NodeJs package, but a better tool is [local-web-server](https://github.com/75lb/local-web-server). `local-web-server` is better because it can gzip your requests, and this helps with performance profiling.

    Install it globally using:

    ```shell
    npm install http-server -g
    npm install -g local-web-server
    ```

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

    ```shell
    http-server -a localhost -p {port} -S -K {PATH}/localhost.key -C {PATH}/localhost.crt
    ws -p {port} -c --key {PATH}/localhost.key --cert {PATH}/localhost.crt
    ```

    Replace `{port}` and `{PATH}` with your settings.
  9. @radum radum revised this gist Mar 13, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,7 @@ In order to use Map Remote over https you need to create a self signed certifica
    Use https://zerossl.com/free-ssl/#self or do it manually using the following commands.

    ```shell
    openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout localhost.key -out localhost.crt
    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`.
  10. @radum radum revised this gist Mar 13, 2017. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -14,6 +14,8 @@ In order to use Map Remote over https you need to create a self signed certifica

    ### Step 1 - Create a self signed certificate

    Use https://zerossl.com/free-ssl/#self or do it manually using the following commands.

    ```shell
    openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout localhost.key -out localhost.crt
    ```
  11. @radum radum revised this gist Jan 29, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    # [Charles Proxy](https://www.charlesproxy.com/) Map Remote / Local over HTTP or HTTPS
    # [Charles Proxy](https://www.charlesproxy.com/) 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.

  12. @radum radum revised this gist Jan 29, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    # How to use [Charles Proxy](https://www.charlesproxy.com/) to Map Remote
    # [Charles Proxy](https://www.charlesproxy.com/) Map Remote / Local 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.

  13. @radum radum revised this gist Jan 29, 2016. No changes.
  14. @radum radum revised this gist Jan 29, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -46,7 +46,7 @@ Charles in order to proxy SSL connections needs to install its own certificates.

    ## 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 and it is slower than others.
    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](https://www.npmjs.com/package/http-server) NodeJs package. Install it globally using:

  15. @radum radum revised this gist Jan 29, 2016. 1 changed file with 9 additions and 9 deletions.
    18 changes: 9 additions & 9 deletions charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@ Using this feature for `http` resources does't require anything else apart from

    ## HTTPS

    In order to use Map Remote using https you need to create a self signed certificate and launch your local server with that.
    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

    @@ -26,12 +26,14 @@ 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 you Keychain
    ### 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`.

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

    ### Step 3 - Tell Charles to Proxy SSL

    Open Charles and from the menu select `Proxy \ SSL Proxy Settings`.
    @@ -44,22 +46,20 @@ Charles in order to proxy SSL connections needs to install its own certificates.

    ## How to map remote a file

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

    A good tool is [http-server](https://www.npmjs.com/package/http-server) node package.
    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 and it is slower than others.

    Install it globally using
    A good tool is [http-server](https://www.npmjs.com/package/http-server) NodeJs package. Install it globally using:

    ```shell
    npm install http-server -g
    ```

    And from the within the folder where you want to server your files run
    And from the path you want to serve your files run:

    ```shell
    http-server -a localhost -p {port} -S -K ~/{PATH}/localhost.key -C ~/{PATH}/localhost.crt
    http-server -a localhost -p {port} -S -K {PATH}/localhost.key -C {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.
    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.
  16. @radum radum revised this gist Jan 29, 2016. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,14 @@
    # How to use [Charles Proxy](https://www.charlesproxy.com/) to Map Remote

    ```
    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.
    ```
    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
    ## HTTPS

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

  17. @radum radum revised this gist Jan 29, 2016. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,8 @@
    # How to use [Charles Proxy](https://www.charlesproxy.com/) to Map Remote

    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.
    ```
    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

  18. @radum radum revised this gist Jan 29, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -57,7 +57,7 @@ npm install http-server -g
    And from the within the folder where you want to server your files run

    ```shell
    ttp-server -a localhost -p {port} -S -K ~/{PATH}/localhost.key -C ~/{PATH}/localhost.crt
    http-server -a localhost -p {port} -S -K ~/{PATH}/localhost.key -C ~/{PATH}/localhost.crt
    ```

    Replace `{port}` and `{PATH}` with your settings.
  19. @radum radum revised this gist Jan 29, 2016. 2 changed files with 65 additions and 3 deletions.
    65 changes: 65 additions & 0 deletions charles-map-remote.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    # How to use [Charles Proxy](https://www.charlesproxy.com/) to Map Remote

    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 using https you need to create a self signed certificate and launch your local server with that.

    ### Step 1 - Create a self signed certificate

    ```shell
    openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -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`.

    ```
    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 you 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`.

    ### 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 Python simple http server, but that is not very good and it is slower than others.

    A good tool is [http-server](https://www.npmjs.com/package/http-server) node package.

    Install it globally using

    ```shell
    npm install http-server -g
    ```

    And from the within the folder where you want to server your files run

    ```shell
    ttp-server -a localhost -p {port} -S -K ~/{PATH}/localhost.key -C ~/{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.
    3 changes: 0 additions & 3 deletions gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -1,3 +0,0 @@
    ```shell
    openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout localhost.key -out localhost.crt
    ```
  20. @radum radum renamed this gist Jan 29, 2016. 1 changed file with 0 additions and 0 deletions.
    File renamed without changes.
  21. @radum radum revised this gist Jan 29, 2016. No changes.
  22. @radum radum revised this gist Jan 29, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.txt
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,3 @@
    ```bash
    ```shell
    openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout localhost.key -out localhost.crt
    ```
  23. @radum radum created this gist Jan 29, 2016.
    3 changes: 3 additions & 0 deletions gistfile1.txt
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    ```bash
    openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout localhost.key -out localhost.crt
    ```