Code. Build. Scale.

Ý tưởng trên màn hình. Hệ thống trên Cloud. Nghệ thuật trong từng dòng code.

HttpOnly Cookie là gì? "Vũ khí tối thượng" bảo vệ Token khỏi tấn công XSS

Bạn đang lưu JWT Access Token vào localStorage? Dừng lại trước khi quá muộn! Cùng đào sâu vào lý thuyết bảo mật Web, hiểu bản chất của lỗ hổng XSS và cách HttpOnly Cookie trở thành chiếc két sắt bất khả xâm phạm đối với JavaScript.

2/5/20265 phút đọc

Đọc thêm

Hàng mới ra lò

Xem tất cả

ArchitectureadvancedDesign Pattern

CODE SNIPPETS

Đặc sản của Tech Stash

Mẹo nhỏ, hook, pattern — copy về dùng liền.

Typescript

Group Array Of Objects By Key

Gom nhóm một mảng các đối tượng (objects) thành một object lớn dựa trên một thuộc tính (key) cụ thể.

export function groupBy<T, K extends keyof T>(
  array: T[],
  key: K
): Record<string, T[]> {
  return array.reduce((result, currentValue) => {
    // Ép kiểu thuộc tính thành string để làm key cho object
    const groupKey = String(currentValue[key]);

Typescript

Copy Text To Clipboard

Tiện ích sao chép văn bản vào clipboard sử dụng Navigator API hiện đại, xử lý an toàn các lỗi permission.

export const copyToClipboard = async (text: string): Promise<boolean> => {
  try {
    if (!navigator?.clipboard) {
      console.warn('Clipboard API not supported');
      return false;
    }
    await navigator.clipboard.writeText(text);

Typescript

Async Sleep / Delay Promise

Hàm tạo độ trễ (delay) trong các luồng xử lý bất đồng bộ (async/await) dựa trên Promise.

export const sleep = (ms: number): Promise<void> => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

// Cách dùng:
// console.log('Bắt đầu...');
// await sleep(2000); // Đợi 2 giây

css

cn() utility function

Merge Tailwind classes đúng cách với clsx + tailwind-merge.

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Typescript

Zustand Store với TypeScript

Setup Zustand store đơn giản nhất, đủ dùng cho 80% use case.

interface BearState {
  bears: number;
  increase: () => void;
  reset: () => void;
}

const useStore = create<BearState>((set) => ({

Typescript

Supabase Realtime subscription

Subscribe vào realtime changes của một table trong Supabase.

const channel = supabase
  .channel('table-changes')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'posts' },
    (payload) => console.log(payload)
  )