The Open Web Application Security Project has a page with general recommendations for security-related HTTP header fields , such as: Content-Security-Policy Strict-Transport-Security Permissions-Policy and more. If you use a web server such as nginx or Apache , you might set such headers in the web server configuration as follows: Apache <IfModule mod_headers.c> Header set X-Frame-Options "DENY"…
One of the advantages of HTML is that it can be streamed. When you re viewing a large HTML document, your browser only needs the first few kilobytes or so to start displaying content. For a simple demonstration, open this page - if you ll find that some content appears quickly, even though the entire page takes a few seconds longer to load. This works by default when loading a page, but you might…
#1 - after submission This can be useful for forms that are intended to be submitted multiple times. After submitting one instance of the form, all fields are reset to their default values, allowing the user to fill out and submit another instance of the form. It s tempting to think the 205 Reset Content status code would do this. But it doesn t. This was discussed on the Mozilla Firefox…
GitHub uses this code snippet on its homepage to advertise its AI programming assistant Copilot : import { fetch } from "fetch-h2" ; // Determine whether the sentiment of text is positive // Use a web service async function isPositive ( text: string ): Promise < boolean > { const response = await fetch( `http://text-processing.com/api/sentiment/` , { method: "POST" , body: `text= ${text} ` ,…
I ve recently published html2tumblr , a website and web API that converts HTML into posts on the blogging service tumblr . While tumblr used to allow its users to submit posts as HTML, it has since switched to an alternative format called NPF . HTML is a tree-based markup language: HTML elements can contain other HTML elements, which can contain more elements, with no limit. This allows websites…
JavaScript is a dynamically-typed language, which means that any array can contain a combination of values of different types. The following is a valid array: [ "everything" , 18 , null , 22 ] There s no obvious way to sort values of different types. The built-in function Array.prototype.sort converts all values from an array into a string, and then compares those strings to determine the position…
Fungible Tokens and Decentralized Exchanges 1. What is a fungible token? I previously blogged about smart contracts . Tl;dr, a smart contract is a piece of software that lives on a computer network and store data. One use-case is to create a token, which is in simple terms a virtual item with a limited supply. Tokens may be fungible, meaning that all tokens are indistinguishable, or non-fungible,…
Consider using CSV At my current job, I write a lot of microservices that communicate via HTTPS. Microservice architectures are super hyped at the moment. Very often, the data format of choice is JSON. And that makes sense: JSON is ubiquitous, more lightweight than XML but still flexible enough to represent any data structure you typically need. However, JSON has some disadvantages too: It still…
Talking to Yourself Many years ago I read a book called Momo. It tells the story of a little girl, also named Momo, who lives in the ruins of an amphitheatre on the outskirts of a large city. Momo has no parents, can t read or count and doesn t know how old she is. But the people in her neighborhood love her because they can come visit and talk to her, and she listens to them. She doesn t say much…
This article shows a method of estimating the number of documents in a Firestore collection by reading only a small number of documents. It works if all documents in the collection use Firestore auto-IDs. Important: this article may soon be obsolete as Firestore is adding built-in functionality to count the documents in a collection . I m leaving it up for reference. 1. Introduction Firestore is a…
You ve probably heard that HTTPS makes websites more secure. That s true, but HTTPS has some limitations, and Strict Transport Security and Preloading are ways you can overcome those limitations. 1. what does HTTPS do? HTTPS adds encryption to the connection between two computers and a server you re connecting to. That means that anyone with the ability to listen in on your connection can t…
What is an eTLD + 1? In short, an eTLD + 1 is the part of the web address that tells you who owns a website. What does that mean and how exactly can you find it? 1. what is a domain? The domain is the part of a website address after the protocol ( https:// ) and before the next slash. In a URL like https://jfhr.me/what-is-an-etld-+-1 , the domain is jfhr.me . 2. what is a TLD? A domain consists of…
Tl;dr this blog now has a slightly new design, a dark mode, and better loading performance. New Design The blog now (finally) has a dark theme. It should turn on automatically if you have your browser or operating system set to dark mode. If something isn t working let me know ! Also, if you have high contrast mode enabled, the theme now meets WCAG guidelines for accessibility . That way, people…
This post is a short introduction to smart contracts: How they work, what you can do with them, and how to develop and interact with one. 1. Introduction If you ve ever used an object-oriented programming language, you know what an object is: An object contains internal state in the form of attributes and attribute values, and methods that can change that internal state. Objects are created from…
I previously blogged about optimizing images with the HTML <picture> tag . Tl;dr the <picture> tag lets you specify multiple sources for an image, and the browser will load the first one that it supports. You can achieve the same thing in CSS with the image-set() function. Short example: < div class = "bg-image" > </ div > < style > .bg-image { background-image : url ( "./image.png" ); /* Vendor…
If you have a website, you probably want it to be fast. Websites that load fast are more fun. They’re also higher ranked on Google. If you make money from your website, chances are you’ll make more money the faster it loads. Faster websites also use less energy. One common reason why websites aren’t fast is because they have a lot of images. Images take time to load. Generally, the browser will…
See also Wesley Aptekar-Cassels post End-to-end testing emails for an alternative approach that uses playwright and a local SMTP server. The company I work for uses its own little email newsletter software. I wanted to write an automated test to make sure the newsletter works correctly. In the spirit of full e2e testing, that meant verifying that newsletters are actually sent out, and that the…
Note: This article from 2021 talks about an HTTP feature that is now obsolete and unshipped or intended to be unshipped by all major browsers. Imagine you re at a library looking for sources for your university homework. You see a book about the topic you re interested in and start reading. After a few pages, there s a reference to an earlier book that sounds interesting. So you go back to the…
Build automation with JavaScript and zx zx is an open-source tool by google for creating server-side scripts with JavaScript. In this post I ll talk a bit about what it does, and how and why I use it in several projects to automate builds. Why JavaScript? JS may not be the most popular programming language , but it is the most used . And if you re building a web-app, you re probably using JS…
The DeconstruCT.F 2021 I played in the DeconstruCT.F 2021 with ps1ttacus ! It s a little late, but these are my writeups for the web challenges I solved. Never gonna lie to you (243 points) The page linked in this challenge had a robots.txt file with the following content: User-agent:* Disallow:/static/ Disallow:/never_gonna_give_you_up/ The first two lines are nothing unusual, but the last one…
The Down Under CTF 2021 Yesterday, I played in my very first organized Capture-the-Flag game, the DownUnderCTF 2021 . I was spontaneously invited on a team by ps1ttacus (btw, read his blog !). The most important thing I learned: CTF s are fun! I m glad I participated and want to say a big thank you to the organizers. Below I ll share writeups of the challenges I solved: Discord (100 points) This…
If you search for "check online JavaScript", you ll quickly come across the navigator.onLine property. Unsurprisingly, it returns true if you re online, and false if you aren t. In addition, the window.ononline and window.onoffline events notify you whenever that value changes. False positives If it was quite this easy, I wouldn t be sitting here writing a blog post about it. In fact, if we look…
document .designMode = "on" ; This single line of JavaScript makes an entire webpage editable. Try it out by clicking the button below: designMode on Now just click anywhere and add some text. Or delete something if you re feeling a little destructive today. Go have some fun. You can also make text bold, italic, underlined, all that fun stuff. On iOS, you even get a nice UI when selecting any…
Mighty I ve recently read about the project Mighty . Tl;dr, it s stadia for the web browser. Mighty runs Chrome on their server and streams it to your device, promising better performance and less battery use. Sounds interesting, and I ll definitely try it once it s available - but there are some things I want to talk about. Why is this necessary? In the early years of the internet, it was normal…
Before you start, there s also a guide for bootstrap 4 here . Angular and Bootstrap are a great combination for building good-looking, interactive web-apps. This guide describes how I go about starting a new project: 1. Create an angular project This step is simple, just run: ng new ng12b5-example Replace ng12b5-example with the name of your project. The Angular CLI will ask which stylesheet…
Start an app with Angular 12 and Bootstrap 4 Skip to main content 2021-05-30 Before you start, there s also a guide for bootstrap 5 here . Angular and Bootstrap are a great combination for building good-looking, interactive web-apps. This guide describes how I go about starting a new project: 1. Create an angular project This step is simple, just run: ng new ng12b4-example Replace ng12b4-example…
Let s say you have an Angular single-page app and use Bootstrap for styling. You want to let your users choose between multiple themes (e.g. a light and dark theme). You also want the option to use custom SASS for each theme, as well as for all themes at once. The solution If you just want the code , it s on github . It s CC-0, so feel free to copy it into your project :) There s also a demo here…
The data HTML element It is useful whenever the human-readable and machine-readable representation of a value are different. Consider the following table: Location Population % of World India 1,417,492,000 17.2% China 1,404,890,000 17.0% United States 341,784,857 4.1% <table> <thead> <tr> <th> Location <th> Population <th> % of World <tbody> <tr> <td> India <td> 1,417,492,000 <td> 17.2% <tr> <td>…
The Tor browser makes it very difficult for website operators to view your IP address (and thus your approximate location), and for your internet service provider (ISP) to view which websites you visit. This is especially important if you live under an authoritarian government, or one that is currently moving in that direction. You can download the Tor browser from the Tor project website's…