Protect sensitive text on any website

User ID & session ID — optional

userId and sessionId are not provided by IDEnforcer. They come from your own application — the same login/session data you already have when you render the page.

PHP — server knows who is logged in

<script>
  document.addEventListener("DOMContentLoaded", function () {
    ViewShield.init({
      licenseKey: "<?= htmlspecialchars($viewshieldLicenseKey) ?>",
      protectedSelector: "[data-protected]",
      userId: "<?= (int)($_SESSION['user_id'] ?? 0) ?>",
      sessionId: "<?= session_id() ?>"
    });
  });
</script>

React / Vue — from your auth context

ViewShield.init({
  licenseKey: "VS-XXXX-XXXX-XXXX",
  protectedSelector: "[data-protected]",
  userId: String(user.id),           // from your auth provider
  sessionId: user.sessionToken       // or auth.session.id
});

These values are stored in ViewShield config and returned by ViewShield.getStatus() for your own audit trails. The on-screen watermark shows a date/time stamp — not the user ID.

How it works

ViewShield finds every element matching your selector, hides the raw text, and draws a canvas overlay using the element's computed font. Each animation frame, a subset of tiles is visible, inverted, dimmed, or noised — the full value never appears in a single frame, so a photo or screenshot captures an incomplete image.

Licensing

Purchase at idenforcer.com/pay.php?plugin=viewshield ($4.99/mo or $53.89/yr). You receive a license key by email.

• Domain binding — first site use auto-registers the domain (up to 5 per license). Add more in Admin → Plugins → Licenses.
• Live validation — payment lapse, suspension, or cancellation disables protection on the customer's site within minutes.
• Scripts are public — but useless without an active key authorized for that domain.
• Enterprise / partner keys — permanent lifetime keys are issued by IDEnforcer admin; they never expire but remain domain-bound and can be revoked.

Markup — protect any text field

Tag the displayed value only. Labels, headings, and public fields stay unmarked.

Basic example

<label>License number</label>
<span data-protected>123456789</span>

<label>Name</label>
<span>John Doe</span>

Tables, cards, and lists

<td data-protected>01/01/1985</td>
<div class="record-value" data-protected>123 Main Street</div>
<li>Account: <span data-protected>ACC-99281</span></li>

Custom selector

<span class="vs-sensitive">secret-value</span>

ViewShield.init({ licenseKey: "VS-XXXX-XXXX-XXXX", protectedSelector: ".vs-sensitive" });

Recommended CSS

Use the standard stylesheet so protected fields match the live demo (font size, weight, and layout).

<link rel="stylesheet" href="https://idenforcer.com/viewshield/includes/viewshield-protected.css">

<link rel="stylesheet" href="/viewshield/includes/viewshield-protected.css">

Download integration files

If you host ViewShield on your own server instead of the CDN, download the bundle with the engine scripts and includes/ folder:

Download viewshield-integration.zip

• TemporalTileEngine.js + ViewShieldV5.js — protection engine
• includes/viewshield-protected.css — standard field styling
• includes/viewshield-defaults.js — demo-matched init defaults
• includes/viewshield-init.sample.js — copy, set your license key, and load

Configuration

All options are passed to ViewShield.init({ … }). Use ViewShieldPresets.resolve("light") or "dark" for recommended settings, or pass only licenseKey for engine defaults (compact light overlay).

Built-in defaults (override only if needed)

Pass only licenseKey for demo-matched settings. Include extra options below only when you want to change them:

ViewShield.init({
  licenseKey: "VS-XXXX-XXXX-XXXX",
  protectedSelector: "[data-protected]",
  userId: String(currentUser.id),       // optional — your auth user ID
  sessionId: currentUser.sessionToken   // optional — your session token
});

JavaScript API

// After AJAX loads new records:
fetch("/api/record/123").then(function (r) { return r.json(); }).then(function (data) {
  document.getElementById("license").textContent = data.license;
  ViewShield.refresh();
});

Dynamic & single-page apps

• Initial load: call ViewShield.init() after protected content is in the DOM.
• Content updates: call ViewShield.refresh() after inserting or changing text.
• Navigation away: call ViewShield.destroy() before unmounting.

React

useEffect(function () {
  ViewShield.init({ licenseKey: "VS-XXXX-XXXX-XXXX", protectedSelector: "[data-protected]", userId: String(user.id), sessionId: user.sessionToken });
  return function () { ViewShield.destroy(); };
}, [user.id]);

useEffect(function () { ViewShield.refresh(); }, [record]);

PHP / server-rendered

<span data-protected><?= htmlspecialchars($license) ?></span>

<script src="https://idenforcer.com/viewshield/TemporalTileEngine.js"></script>
<script src="https://idenforcer.com/viewshield/ViewShieldV5.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    ViewShield.init({
      licenseKey: "<?= htmlspecialchars($viewshieldLicenseKey) ?>",
      protectedSelector: "[data-protected]",
      userId: "<?= (int)($_SESSION['user_id'] ?? 0) ?>",
      sessionId: "<?= session_id() ?>"
    });
  });
</script>

Content Security Policy

If your site uses CSP, allow scripts from IDEnforcer:

script-src 'self' https://idenforcer.com;

ViewShield does not require 'unsafe-eval'. Move init code to an external file on your origin to avoid 'unsafe-inline'.

Hosted files

Load these two files in order:

• https://idenforcer.com/viewshield/TemporalTileEngine.js
• https://idenforcer.com/viewshield/ViewShieldV5.js

Version 5.0.0 · Default: Extreme 53% · 1.75×1.75 tiles · Random · ProSol watermark

License: $4.99/mo or $53.89/yr (10% annual discount) · Purchase

Live preview

Protected fields on this page — try photographing your screen vs. reading live.