Cloudflare’s Post

Title: Demystifying the Journey of a URL: What Happens When You Type https://www.google.com in Your Browser? Have you ever wondered what happens behind the scenes when you type a URL like https://www.google.com into your web browser and hit Enter? The process of turning human-readable web addresses into the digital language that computers can understand is a fascinating journey through the intricate workings of the internet. Let's break down the steps involved in this seemingly simple act of entering a URL and accessing a website: 1. **URL Parsing**: When you type https://www.google.com into your browser's address bar, the browser first parses the URL to understand its components. In this case, "https" is the protocol, "www.google.com" is the domain name. 2. **DNS Resolution**: The browser needs to find out the IP address associated with the domain name www.google.com in order to connect to the server hosting the website. It sends a Domain Name System (DNS) query to a DNS server to resolve the domain name to an IP address. 3. **Initiating a Connection**: Once the browser has the IP address of the server, it initiates a connection to that server using the Hypertext Transfer Protocol Secure (HTTPS) for secure communication. This involves a series of handshakes to establish a secure connection. 4. **Request and Response**: The browser sends an HTTP request to the server, asking for the webpage located at the specified URL. The server processes the request and generates an HTTP response, which includes the webpage content along with other information like headers, status codes, and more. 5. **Rendering the Page**: The browser receives the response from the server and begins to render the webpage using HTML, CSS, and JavaScript. It parses the content to display text, images, links, and interactive elements according to the instructions in the webpage code. 6. **Rendering the Page**: The browser receives the response from the server and begins to render the webpage using HTML, CSS, and JavaScript. It parses the content to display text, images, links, and interactive elements according to the instructions in the webpage code. 7. **Displaying the Page**: Finally, the webpage is rendered on your screen, and you can interact with it by clicking on links, filling out forms, or performing other actions as intended by the website's design. The entire process, from typing the URL to loading the webpage, takes only a fraction of a second due to the efficiency of modern web technologies and high-speed internet connections. However, the underlying complexity of the steps involved in fetching and displaying a webpage showcases the intricate infrastructure that powers our everyday web browsing experiences. Next time you type https://www.google.com or any other URL into your browser, remember the journey that your request takes through the vast network of servers, protocols, and technologies that make up the internet as we know it today.

Are you just missing that little touch of customization in your CDN, where a Javascript worker would just have been total overkill? Then check out Cloudflare Snippets! A snippet can run on every request or only on certain requests, e.g. based on various criteria such as bot score, country of origin, or a cookie. The best thing? Snippets are free of charge. Available today in our Enterprise plan and will become available to our pro and business plans soon. Want to learn more? https://lnkd.in/efPShBmx Want to check it out? Go to your Cloudflare dashboard, you'll find "snippets" under "rules" in domains in your account.

The second Installment of 5 Bubble related tips covers, 1 . How do you load content on the page before the page loads? 2 . What Should be the format of a favicon? 3. Fixed and Align to Parent containers vs Row and Column containers (& What is Z-index in bubble.io?) 4. Approach to set up Privacy Rules (& When should I start setting up Privacy Rules?) 5. What kind of content is on AWS and What is on the CloudFlare CDN in the context of your bubble.io application? https://lnkd.in/gtcjg3qG Feel free to read it and provide your input. Constructive criticism is also welcome. If you would like to correct me on something, feel free to do so. #bubble #bubbleio #nocode #nocodedevelopment #nocodelearning #bubblelearning

Ever wondered what's a cookie, and why every website keeps asking you to accept them? What happens if you choose to accept (or not)? This post covers almost everything you need to know about HTTP cookies in the context of Rails. We'll explore what a cookie is, why we need it, how to set & get a cookie, how to restrict cookies to a particular domain/path, prevent JavaScript access, how to sign & encrypt cookies, and much more. As always, I hope you find it useful and you learn something new. (from the archives...)

Why HTTP 200 Status Code isn't always Ok and how to solve 304 problem? Fun Fact: A lot of devs and SEOs are trying to solve the 304 "error." If you don't believe me, search Reddit. 🤐 Imagine a website with thousands of pages. Each time a bot crawls your site, serving a 200 status code for unchanged pages means re-downloading each one, consuming bandwidth and crawl budget. Instead, serving a 304 status code allows the bot to recognize unchanged content and move on to more important updates, thus making your site's crawling and indexing more efficient. ➡ Why Use 304 Not Modified? ⬅ 1️⃣ Improved Performance: - Returning a 304 status can significantly reduce server load and bandwidth usage by allowing browsers and bots to use cached versions of the content. - This can enhance page load times for users and improve the website's overall performance. 2️⃣ Efficient Use of Crawl Budget: - For large websites with numerous pages, efficiently managing the crawl budget is vital. Search engines allocate a limited number of pages they will crawl on a site within a given period. - By using 304 responses, you help search engines avoid wasting resources re-downloading unchanged content, allowing them to crawl and index more pages. 3️⃣ Enhanced User Experience: - Users benefit from faster load times as their browsers can quickly retrieve cached content instead of waiting for the server to send the entire resource again. ➡How browsers and bots work with 304 NotModified?⬅ 1️⃣ Browsers: - When a user revisits a webpage, the browser sends a conditional request to the server using headers like If-Modified-Since or If-None-Match. - If the server determines that the content hasn't changed, it responds with a 304 status, prompting the browser to load the page from its cache. 2️⃣ Bots (Crawlers): - Similar to browsers, search engine bots use conditional requests to check if the content has changed since their last visit. - A 304 response tells the bot that the cached version is still valid, saving time and resources, and enabling the bot to move on to other pages. ➡How to enforce a browser or bot to send If-Modified-Since or If-None-Match headers? ⬅ This one is pretty simple: 1️⃣ For If-Modified-Since, add the Last-Modified response header. 2️⃣ For If-None-Match, add the ETag response header.

The current proposed implementation of "Related Website Sets" (https://lnkd.in/ejgJHdUU) is disastrous for the internet. Relegating control of what sites can be tied together to a single, central entity (GitHub repo in this case)—no matter how altruistic its goals or "independent" its organizational structure—is simply unacceptable. Google is essentially using the monopoly power of Chrome to dictate to website owners how they may allow their sites to interact—all in the name of "privacy." It's telling that every author of this proposal is an employee of Google. No one from Mozilla, Apple, or Microsoft is named on the proposal, yet Chromium is going full-speed ahead to adopt it. Web developers everywhere should be flooding the WICG with comments decrying this implementation. We must return to the drawing board on this. Privacy is important to the internet and we should fix the issues that third-party cookies have caused; however, we must do so in a way that keeps the internet free, independent, and *distributed* in nature. How anyone thinks this proposed approach is a good idea is baffling. 🤯

🌐 𝐓𝐡𝐞 𝐔𝐑𝐋 𝐄𝐱𝐩𝐞𝐝𝐢𝐭𝐢𝐨𝐧: 𝐘𝐨𝐮𝐫 𝐊𝐞𝐲𝐛𝐨𝐚𝐫𝐝 𝐭𝐨 𝐭𝐡𝐞 𝐖𝐞𝐛'𝐬 𝐖𝐨𝐧𝐝𝐞𝐫𝐥𝐚𝐧𝐝 Ever wondered what happens when you enter a URL in your web browser? Here's a quick breakdown of the fascinating journey: 1. URL Breakdown: The browser divides the URL into parts: scheme (e.g., "http" or "https"), domain (e.g., "www.example.com"), and path (e.g., "/page.html"). 2. DNS Query: It queries a DNS server to find the website's IP address if it's not already cached. 3. Network Connection: The browser establishes a connection to the web server using the IP and port number (usually 80 for HTTP or 443 for HTTPS). 4. HTTP Request: An HTTP request is sent to the server, specifying the resource you want along with headers, cookies, and user agent info. 5. Server Response: The web server processes the request, retrieves the data, and sends back an HTTP response containing content and status information. 6. Rendering: The browser receives the response, which includes HTML, CSS, JavaScript, and other resources, and begins rendering the web page. 7. DOM Construction: It constructs a Document Object Model (DOM) from the HTML, processes CSS, and executes JavaScript to display the page. 8. Page Display: The final page appears on your screen, and you can interact with it. Dynamic content may update without a full page reload. 9. Resource Caching: The browser may cache resources to speed up future visits. 10. Interaction: You interact with the page, triggering more HTTP requests and responses. 11. Secure Connection: For HTTPS sites, a secure SSL/TLS connection is established to encrypt data. 12. Cookie Management: Cookies and sessions are managed to maintain user preferences and state. Modern browsers optimize performance, security, and user experience through various techniques. Inspired by a sketch from @manekinekko on X (formerly Twitter).

Pouring a bit more water to make the glass full. TLS Handshake (for HTTPS): For secure websites, this step is vital to establish a secure connection, ensuring that data transmitted between the browser and the server is encrypted and protected from eavesdropping and tampering.

What’s all the fuss around Polyfill? You probably would have come across the term Polyfill multiple times in the past few days. You would have probably also read that this is a Supply Chain Attack. Let’s try to understand the whole story a bit better. What exactly is Polyfill? Polyfill is a Javascript library that adds modern features to older browsers. By simply importing the Polyfill script on a website, developers do not need to write different versions for their code depending on the user’s browser version. No doubt developers loved it. This library was originally created by Andrew Betts (https://x[.]com/triblondon). However, someone had the brilliant idea of uploading the script to a domain polyfill[.]io and started serving it via cdn[.]polyfill[.]io. The original author had nothing to do with this domain. All worked well for about 8 years since this website’s inception. As per reports, over 100,000 websites were importing this script from cdn[.]polyfill[.]io. So, what went wrong? In Feb 2024, a Chinese company “funnull” bought this domain along with the Github account from its original owner. Remember that the author of the polyfill package is different from the owner of the polyfill[.]io domain. Following this transfer, the original author of this library warned users to stop using the script from polyfill[.]io. (https://x[.]com/triblondon/status/1761852117579427975) Fast-forward to Jun 2024: Researchers at sansec[.]io published an analysis showcasing that the new owners of polyfill[.]io were redirecting users to sports betting sites and injecting malicious scripts from genuine-looking fake domains such as googie-analytics[.]com. They also employed various obfuscation tactics to evade detection. It seems that the purchase of this domain was ill-intended and this was a well thought out campaign. Thanks to the researchers from Sansec, the situation is now under control. Due to widespread publicity of their research, many actions were taken to protect websites who still wanted to use Polyfill. To name a few: - Cloudflare and Fastly hosted the original Polyfill code on their CDN - Namecheap, the registrar for polyfill[.]io put the domain on hold eliminating the risk of malicious code delivery - More such domains owned by the same company were identified: bootcdn[.]net, bootcss[.]com, staticfile[.]net, staticfile[.]org, unionadjs[.]com, xhsbpza[.]com, union[.]macoms[.]la, newcrbpc[.]com Although the risk has been mitigated at the domain level, it is still recommended to replace the malicious import with a more cleaner version from Fastly or Cloudflare.