The Risks of Domain Squatting with GitHub Pages Subdomains

Ben — Thu, 12 Jun 2025 08:12:02 +0000

GitHub Pages is a fantastic service that allows developers to host static websites or apps directly from a Git repository for free. It's a go-to for many developers and organizations looking to showcase their projects, documentation, or personal portfolios. However, there's a hidden risk associated with using custom domains with GitHub Pages that isn't widely discussed: domain squatting.

Understanding the Default Setup

By default, GitHub's documentation suggests that setting up a custom subdomain for your GitHub Pages site is pretty straightforward. You simply need to create a CNAME record in your DNS settings that points to ORGANIZATION.github.io. This process is well-documented and seems secure at first glance.

The Vulnerability

Here's the catch: this default setup is not as secure as it seems. Anyone can exploit this DNS record to point your custom domain to their own GitHub repository, even if they don't belong to your organization. This means that if someone else declares example.yourdomain.com as their own, they can effectively hijack your domain and serve their own content.

The Solution: Domain Verification

To mitigate this risk, GitHub provides an additional step for domain verification. This involves creating a TXT record in your DNS settings with a unique verification key. This step ensures that only you, the domain owner, can associate your custom domain with your GitHub Pages site.

⚠️ There is two settings to verify a domain for an organization : Organization > Settings > Verified and approved domain and Organization > Settings > Pages. Use the second one.

Steps to Secure Your Domain

Create a CNAME Record: Point your custom domain to ORGANIZATION.github.io.
Verify Your Domain: Add a TXT record to your DNS settings with the unique verification key provided by GitHub.

Why Isn't This the Default?

It's astonishing that this verification step isn't the default configuration. The documentation briefly mentions it, but it's not highlighted as a critical security measure. This oversight can lead to potential domain squatting, where malicious actors can take control of your domain and serve harmful or misleading content.

Conclusion

While GitHub Pages is an incredibly useful tool, it's essential to be aware of its vulnerabilities. By taking the extra step to verify your custom domain, you can protect your site from domain squatting and ensure that your content remains secure. It's high time that GitHub makes this verification process more prominent in their documentation to prevent potential misuse.

For more details, you can refer to the official GitHub documentation on managing a custom domain for your GitHub Pages site and verifying your custom domain.

Stay safe and secure your domains!

How to use qr-code-styling in Nuxt 3

Ben — Thu, 15 Feb 2024 21:25:15 +0000

Introduction

The best QR Code library is by far qr-code-styling for creating customizable QR codes in javascript. While it doesn't work out-of-the-box in Nuxt 3, due to its lack of server-side rendering support and not being a Vue 3 plugin either.
In this post, I will show you how I manage to make it work on fliqr.codes using Nuxt 3 client plugin.

Step 1: Install Dependencies

First, make sure you have qr-code-styling installed in your Nuxt 3 project:

npm install qr-code-styling

Step 2: Create a Nuxt 3 Plugin

Create a plugin file plugins/qrcode.client.ts to initialize the QRCodeStyling and provide it as a plugin:

// plugins/qrcode.client.ts
import QRCodeStyling, { Options } from 'qr-code-styling';

export default defineNuxtPlugin((nuxtApp) => {
    let qrCodeStyling: QRCodeStyling;
    return {
        provide: {
            // Provide a helper that returns an instance of QRCodeStyling
            qrCodeStyling: (options: Partial<Options>) : QRCodeStyling => {
                if (qrCodeStyling) return qrCodeStyling;
                qrCodeStyling = new QRCodeStyling(options);
                return qrCodeStyling;
            },
            // Provide here other helpers you may need
            // ...
        }
    }
});

Step 3: Create QRCode Component

Now, create a QRCode component QRCode.vue.

<template>
  <div ref="qrCode"></div>
</template>

<script setup lang="ts">
import type QRCodeStyling from 'qr-code-styling';
import { ref, watch, onMounted, defineProps, useNuxtApp } from 'nuxt';

const props = defineProps({
  data: String
});

const { $qrCodeStyling } = useNuxtApp();
const qrCode = ref<HTMLElement | null>(null);

// Default options
const options = {
  width: 300,
  height: 300,
  type: "svg",
  data: props.data,
  image: "https://fliqr.codes/fliqr.svg",
  dotsOptions: {
    color: "#000",
    type: "rounded"
  },
  backgroundOptions: {
    color: "#fff",
  },
  imageOptions: {
    crossOrigin: "anonymous",
    margin: 10
  }
};

const qrCodeStyling: QRCodeStyling = $qrCodeStyling(options);

onMounted(() => {
  // Append QR code to DOM element
  qrCodeStyling.append(qrCode.value);
  // Add viewbox to make it resizable
  qrCode.value!.firstChild!.setAttribute('viewBox', '0 0 300 300');
});

watch(() => props.data, (newValue: string) => {
  // Update QR code data when props change
  options.data = newValue;
  qrCodeStyling.update(options);
  // Add viewbox to make it resizable
  qrCode.value!.firstChild!.setAttribute('viewBox', '0 0 300 300');
});
</script>

<style scoped>
svg{
  width: 100%;
  height:100%;
}
</style>

Step 4: Using QRCode Component

Now, you can use the QRCode component in your Nuxt 3 pages or components. For example:

<template>
  <QRCode :data="qrData" />
  <button @click="downloadQRCode()">Download</button>
</template>

<script setup lang="ts">
import QRCode from '@/components/QRCode.vue';

// Define QR code data
const qrData = 'https://fliqr.codes';

// Function to download the QR Code
function downloadQRCode () {
  const { $qrCodeStyling } = useNuxtApp();
  $qrCodeStyling.download();
}
</script>

This setup initializes the QRCodeStyling library in a Nuxt 3 plugin and utilizes it in a Vue component to generate and display QR codes dynamically. Make sure to adjust the qrData variable according to your application logic.

Conclusion

And that's it ! You've learned how to easily integrate the QRCodeStyling library into your Nuxt 3 project. With a custom plugin and Vue component, you can easily generate and update QR codes based on dynamic data.

Don't forget to check Nuxt and qr-code-styling documentation for more information.

If you have any questions or suggestions, please feel free to leave a comment !

Thanks

Forem: Ben

The Risks of Domain Squatting with GitHub Pages Subdomains

Understanding the Default Setup

The Vulnerability

The Solution: Domain Verification

Steps to Secure Your Domain

Why Isn't This the Default?

Conclusion

How to use qr-code-styling in Nuxt 3

Introduction

Step 1: Install Dependencies

Step 2: Create a Nuxt 3 Plugin

Step 3: Create QRCode Component

Step 4: Using QRCode Component

Conclusion