Browser
Browsers
| Browser | Strengths |
|---|---|
| Chrome |
Chrome DevTools
A modern have several process consists of engine and tabs. If one tabs die or hacked, the other process are safe.
Elements
This tab show the DOM of current page. After clicking an object, you can see these details for that object:
| Tab | Description |
|---|---|
| Styles | Shows every CSS rule currently applying to the selected element. Strikethrough means another rule is winning. The values can be edited. |
| Computed | The final value after calculation and CSS applied. |
| Layout | Show flexbox or grid lines |
| Event Listeners | List every JS function that is listening, can delete a listener for debugging. |
| DOM breakpoint | Freeze the browser when a script edit a DOM. |
| Properties | The JS object representation of that element |
| Accessibility (A11y) | Use to check the visibility, the contrast of that color to the background, and ARIA check: is the button properly function/labelled? |
Console
Read time JS runtime hook. Can filter messages. Use console.log() on JS to print on the console.
Sources
Scripts or asset from different origin (website) is listed and have folder that have the same structure as the server. The files are the local copy of the same file at the server. Editing on the local sources file will not sync unless Overrides feature is enabled. Debugger like breakpoint is available.
Network
Able to inspect request headers, response, initiator, timing
- HAR (HTTP Archive) is a json format file that records every single request and response during a session.
- Throttling enable to use other slower protocols like 3G
- XHR (XMLHttpRequest): The "old school" way JavaScript requested data without refreshing the page (AJAX).
Fetchis used in modern and is cleaner. - EventStream is a protocol for Server-Sent Events(SSE) with header
Content-Type: text/event-streamto broadcast new information to client.
Cookie
Attribute,What it does Name / Value,"The actual data (e.g., session_id=123)." Domain,"Limits the cookie to a specific site (e.g., google.com)." Path,"Limits the cookie to a specific folder (e.g., /admin)." Expires / Max-Age,"The ""best before"" date. If empty, it's a Session Cookie (deleted when you close the tab)." HttpOnly,"Crucial for security. If checked, JavaScript cannot ""see"" this cookie. This prevents hackers from stealing your login via XSS attacks." Secure,The cookie is only sent over HTTPS (encrypted) connections. SameSite,"Controls if cookies are sent when you click a link from a different site. Options: Strict, Lax (default), or None."
::warn Cookie's attribute is mostly standardized across browsers. However, SameSite behavior has minor differences in how "Default" is handled. ::
Performance
Measure if an element rerender it's size. Unsized image that updates the window when reader slide to that image, or ads popup can degrade the score.
Memory
Provide usage detail os each JavaScript VM instance.
Application
Contains json style key-value storage information for local, sesion, extension, cookies, shared, cache. Every other file can be found on Frame.
Security Restrictions on Storage
The foundation of restriction is Same-Origin Policy (Protocol + Domain + Port).
Redirect happens when you ask the browser for "Page A," but the server says, "Actually, go to Page B." HTTP Redirect (301/302)
Feature,Is it sent to the new site?,Why? Cookies,No,Cookies are only sent to the domain they belong to. LocalStorage,No,"It stays ""locked"" in the previous origin's bucket." SessionStorage,No,It is destroyed or stays with the original tab's history. Referer Header,Yes,The new site will see the URL of the page you just came from.
Security Policy
CORS (Cross-Origin Resource Sharing) restricts network requests from unknown source. The browser blocks the response.
CSRF (Cross-Site Request Forgery) prevent cookie from sending to unknown source. Configured by SameSite. Because browsers automatically send cookies with every request to a domain.
CSP (Content Security Policy) is a set of rules the server sends to the browser to prevent XSS (scripts injecting themselves).
Privacy and Security
Show the domain's security implementation and details like certificate and encryption protocol.
Third-Party Cookie
- First-Party Cookie: Created by
shoes.com. It remembers your shopping cart. - Third-Party Cookie: Created by the "guest" code
gooadvertise.com. When we visit a website, the website might have an ad, that ad stores cookie on the browser. When the cookie is planted bygooadvertise.comagain, it can see the previously planted cookie at key =gooadvertise.com. Because that same code is on millions of other websites, gooadvertise can see that you visitedshoes.com, thennews.com, thentravel.com.
Third-Party Cookies are for Tracking and Cross-Site Identity. Currently, browser starts to change its mechanism to use double key to find the cookie.
- On site-a.com: The tracker's bucket is labeled site-a.com, tracker.com. It stores ID 123.
- On site-b.com: The browser looks for a bucket labeled site-b.com, tracker.com. Since the "Top-Level" part of the key is different, it finds nothing.