@frame-digital/frame-safe-exit

A flexible web component for implementing a "safe exit" mechanism, allowing users to quickly and discreetly navigate away from a page to a predefined URL. This package is designed to provide a quick escape route, often used for privacy or safety-sensitive applications.

Features

• Custom HTML Element: Easy integration using the <safe-exit> custom element.
• Configurable Redirect: Specify a target URL for the safe exit.
• History Manipulation: Prevents easy return to the original page by pushing multiple redirect entries into the browser history.
• Visual Discretion: Immediately obscures the current page content and changes the favicon upon exit.
• Keyboard Shortcut: Triggers on Escape key press.
• Styling Options: Customizable colors and padding.

Installation

You can install this package using npm or yarn:

npm install @frame-digital/frame-safe-exit
# or
yarn add @frame-digital/frame-safe-exit

Usage

Import the package into your JavaScript entry file (e.g., main.js or app.js):

import '@frame-digital/frame-safe-exit';

Then, use the <safe-exit> custom element in your HTML:

<!-- Basic usage with a fallback URL -->
<safe-exit url="https://www.google.com"></safe-exit>

<!-- With custom text and a redirect path -->
<safe-exit url="https://example.com" redirect-path="/home">Emergency Exit</safe-exit>

<!-- With custom styling -->
<safe-exit url="https://example.com" color="#FF0000" text-color="#FFFFFF" pad="true" type="none"></safe-exit>

Attributes

The <safe-exit> element supports the following attributes:

• url (required): The URL to which the user will be redirected upon activating the safe exit. If not provided, it defaults to about:blank.
• redirect-path (optional): A path that will be pushed multiple times into the browser history. This makes it harder for the user to navigate back to the original page using the browser's back button.
• color (optional): Sets the background color of the safe exit button. Defaults to #ccc.
• text-color (optional): Sets the color of the text or icon within the safe exit button. Defaults to white.
• pad (optional): If set to true, the component will add padding to the top of the body to prevent content from being hidden underneath it. Can also be set to half for half the button's height.
• type (optional): Controls the visual style of the button.
  • icon (default): Displays an icon (e.g., an exit door).
  • close: Displays a close (X) icon.
  • none: Displays only the text content, if provided.

How it Works

When the safe exit mechanism is activated (either by clicking the button or pressing the Escape key):

1. Immediate Visual Obscuration: The current page's content is immediately hidden (document.body.style.opacity = 0), and the page title is changed.
2. Favicon Change: The browser's favicon is updated to a generic emoji, further masking the original page.
3. History Manipulation: If redirect-path is provided, several entries are pushed into the browser's history, making it difficult to use the "back" button to return to the sensitive page.
4. Redirection: The user is redirected to the specified url (or about:blank by default). This redirection happens with a slight delay to ensure the visual changes are applied first.
5. New Tab (optional): The user is also redirected to the specified url in a new tab if the url is provided. This happens simultaneously with the current tab's redirection.
6. Local Storage Flag: A flag is set in localStorage to detect if the user returns to the page (e.g., by closing the new tab and returning to the original window), triggering a reload and immediate re-redirection.

This comprehensive approach ensures a robust and discreet safe exit experience.