Charles http monitorwebproxy

18.5.2018 CharlesHTTPMonitorWebproxy.html#slide=1
ﬁle:///Users/birol/Google%20Drive/gedat/Webslide%20(Pra%CC%88sentation%20erstellen)/Beispiel5-Charles_HTTP_Monitor_Webproxy/CharlesHTTPMonitorWebproxy.html#slide=1 1/16
Charles Web Debugging Proxy • HTTP
Monitor / HTTP Proxy / HTTPS & SSL
Proxy / Reverse Proxy
Website: Charles Proxy
Introduction into Charles Proxy Tool

Outline
What is Charles
Key features
Recording, Map Local Files
Breakpoints, Caching, DNS Spoo ng, Load Testing, Network Throttling (Bandwith)
Recording and Mapping Local les
Install Chalres Proxy
Install Certi cate
Con guring for HTTPS (SSL)
Demo: Recording
Demo: Mapping

We build software like cathedrals:
build rst - then pray.
— Gerhard Chroust
“

What is Charles
Charles is in between your server and you WebApp (Web Proxy Server)

Keyfeatures
What is Charles
Key features
Recording, Map Local Files
Breakpoints, Caching, DNS Spoo ng, Load Testing, Network Throttling (Bandwith), Recording and Mapping Local les

How To
Instead of the javascript loaded by the server, Charles
should be handed a local JS. Have here the following
les are created locally for me::
CSS
test.css
1) start Charles (listening on the HTTP port)
ggf. Recording
2) execute the page with the relevant CSS and JS
https://www-
kons.zf.com/master/en/corporate/monday_forms_test
/monday_forms.html
3) The tab "Structure" shows the relevant CSS and JS
le
„.css"
swap this le through my local le (copy mostly)
Right click on the ".js" le -> " Map Local..."
4) Reload the page again

now your own ".js" should run

HTTPS tra c - SSL Proxying Settings
Problem: HTTPS data only arrive as "Unknown"
Solution:
1) Mark Charles's certi cate for the browser as safe
2) Right-click on the SSL website
select "Enable SSL Proxying"
If I load the page again, I should have access to the
contents of the page
3) Certify certi cate on the OS as trustworthy
Keys Management (on Mac)
looking for "Charles"
Set "trust" drowdownbox to "always trust"
Screenshot:

You may need to con gure your browser or
application to trust the Charles Root Certi cate.
See SSL Proxying in the Help menu.
Solution:
URL
https://stackover ow.com/questions/17823434/
ssl-proxy-charles-and-android-trouble?
utm_medium=organic&utm_source=google_rich_
qa&utm_campaign=google_rich_qa
in Charles open „Proxy“ -> „SSL Proxying
Settings…"
Settings:
Host: „*"
Port: „*"

How can I disable Local Mapping of a
page?
Antwort:
„Tools“ -> „Map Local"
Screenshot

How do I nd a le in the path
Go to the page and open the Inspector
„CMD + P"
search for the le
Screenshot

Info: Why should I use Charles Web Proxy?
View HTTP/HTTPS Tra c (Request, Response, Headers)
Record the Tra c while loading the page
If you
…. download you page, you want see the same result as when you download it
e. g. iFrame from a third party
… you don’t have access to the remote system and its les
Info: How it is used
Mapping you remote les locally or even the website
Demo
Info: Charles vs. Chrome DevTools
In Charles I can actually save the les and map them
Demo: Mapping
At request, Charles checks for mapping (local les)
Demo „ZF Components“ Page
„index.html“, „.css“-File, „.js“-File
„Map Local"

takes remote (server) ressource, if the local one is not provided

Charles http monitorwebproxy

Recommended

Recommended

More Related Content

Similar to Charles http monitorwebproxy

Similar to Charles http monitorwebproxy (20)

Recently uploaded

Recently uploaded (20)

Charles http monitorwebproxy