Hallmark Security Features: A Zero-Dependency, Privacy-First Architecture

Hallmark implements a comprehensive security model that eliminates external attack surfaces by serving all assets from the same origin, disabling auto-play media, respecting accessibility preferences, and persisting only non-identifying theme data.

Hallmark is a static site generator designed with security and privacy as core architectural principles. According to the Nutlope/hallmark source code, the project achieves robust protection against common web vulnerabilities through a deliberately minimal attack surface and zero external dependencies. This article examines the specific security features implemented in site/js/main.js and throughout the repository's static architecture.

No External Dependencies or Third-Party Services

Hallmark eliminates supply-chain vulnerabilities by refusing to load any external resources. The entire application logic resides in site/js/main.js, which contains no import statements that fetch remote modules. All JavaScript, CSS, fonts, and images are served from the same origin, preventing data leakage and compromising via third-party services.

The example pages in site/_tests/01-tide-podcast/index.html demonstrate this isolation: they consist only of static markup with no <script src="..."> tags pointing to external hosts. This self-contained design means Hallmark pages can be hosted on any static file host—such as GitHub Pages or Netlify—without requiring server-side processing or exposing backend attack vectors.

Content Isolation and Static Architecture

Hallmark enforces strict content isolation by generating pure HTML, CSS, and JavaScript without embedded iframes, remote widgets, or analytics trackers. Because the site relies exclusively on local files, browsers' default same-origin policy acts as an implicit Content Security Policy, blocking injection of external code by default.

The repository structure confirms this architecture: the site/ folder contains only static assets, with site/index.html serving as the entry point that pulls in exclusively local resources. There is no server-side code to compromise, eliminating risks of SQL injection, authentication leaks, or credential exposure.

User-Controlled Media and Motion

Respecting Reduced-Motion Preferences

To prevent device fingerprinting through motion tracking and to respect accessibility needs, Hallmark checks for prefers-reduced-motion preferences immediately on load. In site/js/main.js, lines 5–10 query this media feature and force all .reveal elements into their final state before any scroll-based animations can execute.

// site/js/main.js – lines 5‑10
const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
/* All .reveal elements are forced into their final state on load,
   so no scroll‑based animation runs. */
document.querySelectorAll(".reveal").forEach(el => el.classList.add("is‑in"));

This approach ensures that users with motion sensitivity are never exposed to unwanted animations, while simultaneously reducing the attack surface for motion-based fingerprinting techniques.

Hover-Play Video Handling

Hallmark prevents hidden-media attacks by explicitly disabling auto-play on desktop devices. The code in site/js/main.js, lines 11–38, detects fine-pointer devices and removes the autoplay attribute from video elements, requiring active user interaction via hover events before playback begins.

// site/js/main.js – lines 11‑38
const supportsHover = matchMedia("(hover: hover) and (pointer: fine)").matches;
const videos = document.querySelectorAll("video[data-hover-play]");

if (supportsHover) {
  videos.forEach(video => {
    video.removeAttribute("autoplay");               // stop auto‑play
    video.pause(); video.currentTime = 0;            // show first frame
    const card = video.closest(".ex-card, .diptych__half") || video.parentElement;
    const onEnter = () => video.play().catch(() => {});
    const onLeave = () => { video.pause(); video.currentTime = 0; };
    card.addEventListener("mouseenter", onEnter);
    card.addEventListener("mouseleave", onLeave);
  });
}

Touch devices receive a simplified autoplay loop, but desktop users maintain full control over media playback, preventing malicious or unexpected audio/video execution.

Minimal Data Persistence

The only client-side state Hallmark persists is the user's selected theme. In site/js/main.js, lines 61–66, the code defines a single namespaced key—hallmark-theme—and stores nothing else to localStorage.

// site/js/main.js – lines 61‑66
const STORAGE_KEY = "hallmark-theme";
const savedTheme = localStorage.getItem(STORAGE_KEY);
if (savedTheme && THEMES[savedTheme]) applyTheme(savedTheme);

This design ensures that no user-identifying data, browsing history, or behavioral tracking information is written to persistent storage. The theme value is non-identifying and does not correlate across sessions or devices.

Transport and Infrastructure Security

The live demonstration at https://www.usehallmark.com is served exclusively over HTTPS, as documented in the project's README.md. This TLS delivery protects the integrity of static files in transit, preventing man-in-the-middle attacks that could otherwise inject malicious content into the self-contained codebase.

Because Hallmark requires no server-side processing, authentication mechanisms, or database connections, it eliminates entire categories of backend vulnerabilities. The static nature of the output means generated pages maintain their security posture regardless of hosting environment.

Summary

• Zero external dependencies: All assets in site/js/main.js and HTML templates are same-origin, eliminating supply-chain attack vectors.
• Implicit Content Security Policy: The absence of external scripts or iframes allows browsers' default same-origin policy to block code injection.
• Accessible motion defaults: Lines 5–10 of main.js respect prefers-reduced-motion to prevent fingerprinting and support accessibility.
• Controlled media playback: Hover-play logic in lines 11–38 prevents unauthorized auto-play on desktop devices.
• Minimal data footprint: Only the hallmark-theme key is stored in localStorage, containing no personally identifiable information.
• Static architecture: No server-side components means no injection attacks, authentication leaks, or credential exposure.

Frequently Asked Questions

Does Hallmark implement Content Security Policy headers?

While Hallmark does not explicitly set CSP headers, it achieves equivalent protection through architectural design. Because all assets are served from the same origin and no HTML files contain external <script src="..."> references, browsers' default same-origin policy effectively blocks third-party code injection. This implicit CSP is enforced by the strict absence of cross-origin resources throughout the repository.

How does Hallmark handle user tracking and analytics?

Hallmark does not implement any tracking mechanisms, analytics scripts, or telemetry beacons. The only data written to persistent storage is the user's theme preference under the hallmark-theme key in localStorage. This value contains no personally identifiable information and is not used to correlate user behavior across sessions or devices.

Is Hallmark vulnerable to supply-chain attacks?

No. The core logic in site/js/main.js contains no module import statements fetching remote JavaScript, and no HTML templates reference external CDNs or third-party libraries. This zero-dependency approach eliminates the supply-chain attack surface present in typical npm-based web applications, ensuring that compromised external packages cannot affect Hallmark-generated pages.

Can videos auto-play without user consent in Hallmark pages?

On desktop devices, videos cannot auto-play without explicit user interaction. The code in lines 11–38 of site/js/main.js removes the autoplay attribute from all video elements and only initiates playback during hover events. While touch devices use a simplified autoplay loop for usability, desktop users maintain complete control over media execution, preventing hidden-media attacks and unwanted audio disruptions.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}