Page 6 - JavaScript

Cross Site Request Forgery is considered a solved problem by many teams the moment an application moves to a single page architecture with fetch instead of classic forms. In reality the risk merely shifts as long as session cookies are involved in authenticated API calls, and it stays real, requiring a deliberate combination of double submit cookie, the SameSite attribute and custom headers.

Classic unit tests check individual, hand-picked examples. Property-based testing flips that around: instead of writing examples, you define properties that must hold for every valid input, then let fast-check generate thousands of random cases to uncover exactly the edge cases a human writing tests by hand tends to overlook.

AbortSignal.timeout() replaces the manual setTimeout plus AbortController combination with a single expression, and AbortSignal.any() merges multiple cancellation sources into one signal. Together, both methods solve one of the most stubborn boilerplate problems in modern fetch based applications.

Web Components are a group of native browser APIs for building encapsulated UI building blocks that work without a framework runtime. Custom Elements, Shadow DOM and HTML Templates enable components that work equally well in React, Vue, Angular and plain HTML, a strong fit for design systems that span team and stack boundaries.

Embedded third party content such as payment widgets, ad banners or comment systems runs in the same document as your own application and, without consistent isolation, poses a substantial security risk. The sandbox attribute on iframe elements and strict origin checking in postMessage communication enable genuine isolation without blocking the actual functionality of embedded widgets.

JavaScript is single-threaded, but not sequential. The Event Loop determines the execution order of synchronous code, Promises, timers and callbacks. Anyone who does not understand the difference between microtasks and macrotasks ends up writing asynchronous code that runs in a mysteriously wrong order.

The JSON roundtrip trick has been the standard for deep cloning in JavaScript for years, and for years it has been losing Date objects, Map, Set, undefined values and circular references. structuredClone() is the native solution that has been available in all modern engines since 2022 and handles all of that correctly.

Signals are a reactivity pattern that Vue, Solid, Preact and Angular implemented independently of each other, yet all rely on the same few building blocks. Anyone who understands how a minimal signals system built from getters, setters and automatic dependency tracking works can use reactivity in any vanilla JavaScript project, with no framework dependency at all.

The File System Access API gives web applications real read and write access to local files and folders, without the classic detour through uploads and downloads. Anyone building editors, image tools or data exports in the browser gets behavior that feels almost like a native desktop application, including a permission model and persistent handles.

Anyone who simply overwrites globalThis.fetch in unit tests builds fragile mocks that need adjusting with every code change. Mock Service Worker instead intercepts network requests at the HTTP level, exercises the real fetch call, and can be configured precisely for both success and error cases without touching the application code itself.