If your website wants to experience new features that have not yet been officially launched by the browser, what should you do?

Usually, these features are already available, but not yet open. Therefore, browsers provide some flags that can be turned on and off. As long as the switch is turned on, you can experience the new features in advance. However, we usually cannot ask users to turn on the switch themselves.

Therefore, Chrome provides a mechanism called origin trials. You can register on the website to obtain a set of tokens. After setting it up, if the user visits your website with Chrome, the new feature will be turned on, allowing your website to use it.

This article will briefly introduce how to use this mechanism.

Read More

Although Same Site and Same Origin may seem similar, they are actually quite different. This difference affects how the browser perceives the relationship between these two websites and the permissions it grants.

This article will cover the following topics:

1. What is Origin? What makes it Same Origin?
2. What is Site? What makes it Same Site?
3. What is the difference between Same Origin and Same Site?
4. How to turn Same Site into Same Origin?

Without further ado, let’s get started!

(Before we begin, let’s answer a question. Yes, the title was inspired by the ninja Hattori.)

2022-01-20: Modified the “Examining Same Site” section to supplement the history of the scheme. Thanks to @littlegoodjack.

Read More

I believe that to truly understand JavaScript, we must start from its history. Why? Because by understanding its history, we can know why certain parts are designed in a certain way and why there are seemingly strange behaviors. Although some ancient knowledge may not have much practical use, it is very interesting to me.

Learning its history is not about memorizing the year it appeared or how many days it took to develop and design, but rather understanding the context in which it appeared and why it was needed and designed in a certain way.

If you want to learn about the history of JavaScript, my top recommendation is this resource: JavaScript: The First 20 Years, because Brendan Eich, the father of JavaScript, is also one of the authors. If you want to read the Chinese version, it is available here: JavaScript 20 Years.

This book records the history of JavaScript from 1995 to 2015, a total of 20 years. If you have time, I strongly recommend that you read it all. It will give you a different understanding of JavaScript (and you will also learn a lot of interesting facts).

Below, I will pick some of the more important things to write about. If there is no specific mention of the data source, it is from the book mentioned above, so it is normal if it seems familiar.

Since I was born around the same time as JavaScript, I have not personally experienced the early history. If it seems like I have participated in it, it is all just imagination.

Read More

Introduction

I have introduced Intigriti’s XSS challenge many times before, so I won’t go into detail this time. If you are interested, you can refer to my previous articles. The focus of this article will be on their October challenge, which is not difficult. After spending about one or two days to solve it, I didn’t touch it anymore. I decided to write this article because after the challenge ended, I saw many unexpected solutions, so I wanted to record them in an article.

Read More

This article is the text version of my presentation “Discovering the Depth of Front-end through Cybersecurity” at Modern Web 2021. The video of the talk is not yet available, but if you want to see the slides, you can find them here: slides

I personally think that the combination of video and slides would be better than text alone, but I thought it would be nice to have a written record, so I wrote this article. The content may differ slightly from the video, as it’s like rewriting it.

Read More

I have written some articles about XSS before, mainly discussing the implementation of prevention and defense details:

1. Preventing XSS may be harder than you think
2. A brief discussion on the various aspects of XSS attacks and defense

Originally, I wanted to write about the basics of XSS, the three types that everyone has heard of: Stored (Persistent), Reflected (Non-Persistent), and DOM-based XSS. However, when I was about to start writing, I suddenly had a few questions in my mind: “When did XSS appear? When were these three types classified?”

Therefore, I spent some time looking for information, and this article will talk about the history of XSS with you, so that we can better understand the past and present of XSS.

Read More

Introduction

As a front-end engineer or someone who knows JavaScript, you must have heard of the term “prototype” and may even have encountered related questions during interviews.

However, you may not have heard of a type of attack technique closely related to the prototype chain in JavaScript, which utilizes the characteristics of the prototype chain to carry out attacks - Prototype Pollution. This is an interesting and powerful attack technique.

Read More

Introduction

There is a very common feature in many websites, which is redirection.

For example, if a page requires permission to view but the user has not logged in yet, the user will be redirected to the login page first, and then redirected back to the original page after logging in.

For instance, suppose there is a social networking site and to view a personal profile, one needs to log in. If Ming’s personal profile URL is https://example.com/profile/ming, then as a visitor, when I click on it, I will be redirected to the login page with the original URL as a parameter:
https://example.com/login?redirect=https://example.com/profile/ming

After successful login, the website will redirect me to the original page based on the value of redirect.

Although it seems like a small feature, there are actually many security issues to consider behind it.

Read More

Introduction

Among various attack methods targeting front-end, I find clickjacking quite interesting. Its Chinese translation is usually “click hijacking”, which actually means that you think you clicked something on website A, but in fact, you clicked on website B. Malicious websites hijack users’ clicks, making them click on unexpected places.

Just a click, what harm can it cause?

Suppose it is a bank transfer page in the background, and the account number and amount are filled in. Just press a button and the money will be transferred out. This is very dangerous (but usually unlikely, because transferring money still requires entering OTP and the like, this is just an example).

Or take a more common example. There is a page that looks like a page for unsubscribing from an email newsletter, so you click the “Confirm Unsubscribe” button, but actually, there is a Facebook Like button hidden underneath, so you not only did not unsubscribe, but also gave a Like (because the target of hijacking is Like, it is also called likejacking).

In this article, I will introduce the attack principle, defense methods, and practical cases of clickjacking, so that everyone can better understand this attack method.

Read More

Introduction

A supply chain attack targets vulnerabilities upstream to launch an attack, as contaminating upstream will also contaminate downstream.

Taking front-end as an example, do you realize the risks associated with using npm packages or third-party scripts imported into your code, which are called “upstream”?

This article will use cdnjs as an example to show front-end supply chain attacks and defenses.

Read More