As a front-end engineer who deals with web pages every day, it is quite reasonable to be familiar with the use of DevTools. Whenever there is an issue with an API, I just press the shortcut to open DevTools, switch to the Network tab, find the red line, right-click to copy it as cURL, and paste it into the group chat for the backend team to troubleshoot.
But I wonder if anyone has encountered situations where DevTools are not sufficient. What should we do then?
Many people might have followed the news three weeks ago about the well-known extension Material Theme being proactively removed from VS Code by Microsoft. So what was the reason for its removal? Depending on your source of information, there might be two answers:
When you want to send some tracking-related information to the server from a webpage, there is another option that is often recommended over directly using fetch to send requests: navigator.sendBeacon.
Why is this recommended?
Because if you use the usual method of sending requests, there may be issues when the user closes the page or navigates away. For example, if a request is sent just as the page is being closed, that request may not go through and could be canceled along with the page closure.
Although there are ways to try to force the request to be sent, these methods often harm the user experience, such as forcing the page to close later or sending a synchronous request.
navigator.sendBeacon was created to solve this problem.
It’s been a while since I wrote writeup. I’ve wanted to write for a long time but kept procrastinating. For something like CTF writeups, speed is quite important because most discussions happen in Discord after the competition. Over time, it’s harder to find information, and it’s very likely to forget, so I need to quickly write a writeup to record those useful pieces of information.
This article brings together writeups for three CTFs. Some I didn’t play myself; I just looked at others’ writeups and take a note of them.
Keyword list:
In idekCTF 2024, there was an interesting problem called srcdoc-memos from @icesfont, which involved a lot of knowledge related to iframes. I did not actually participate in the competition, but after the event, I looked at the problem and the solution, and it took me several days to finally understand why. It is definitely worth documenting the process and the solution.
Since this problem involves a lot of knowledge related to iframes, I will try to explain it step by step for better understanding.
For the past half year, I have been busy with other things and haven’t had a chance to participate in a CTF. This time, I made time for GoogleCTF 2024 and solved all the web challenges with my teammates.
The challenges were interesting as always. I participated in three of them, while my teammates quickly solved the other two simpler ones before I could even take a look. Nevertheless, I will make a brief record of them. I really enjoy CTF challenges that are mostly client-side focused.
Keywords:
Polyfill.io is a service that automatically provides front-end polyfills, making it very convenient to use. You just need to select the functionality you want to polyfill and then include a JavaScript file like this:
<script src="https://polyfill.io/v3/polyfill.min.js"></script>The server will automatically determine based on the user-agent whether to return a polyfill, so only the necessary code will be included. It sounds convenient and useful.
However, some people may have received notifications from Google Ads recently about a security issue. Why is that?
In the past, when I wanted to deploy a simple service, I would go to Heroku because it was simple and free, although there were some usage restrictions, overall it was very convenient, and there were even some simple databases available. For static web pages, I would choose Netlify or GitHub Pages, both of which are simple and convenient options.
However, Heroku stopped offering free plans after the end of 2022, so many people were looking for alternative solutions, including Render or fly[dot]io, which became popular choices for many. I used to have three or four projects on Heroku myself, but after the changes at Heroku, I never touched them again.
Recently, I received an email from the founder of Zeabur hoping to collaborate with me to promote this platform. After trying it out myself, I found the experience to be quite good, so I decided to write this article to introduce it.
If you have read my blog before, you should know that I have always been writing in React and have never touched Vue or Angular. Since I started using React in 2015, I have been using it for work.
However, recently due to work requirements, I started working with Vue. Coincidentally, some readers asked me about my insights on transitioning from React to Vue, so I decided to write a brief post to share my thoughts.
Last month’s (January 2024) Intigriti challenge was very interesting, made by @kevin_mizu. I have often seen him post client-side related challenges on Twitter before, and this time the quality of the challenge was as good as ever, worth documenting.
The challenge link is here, if you haven’t seen it yet, you can take a look: https://challenge-0124.intigriti.io/