Fortress Security - Documentation & Integration Guide

Overview

Fortress is a universal security script that protects your website from code theft, unauthorized copying, and DevTools inspection. It works with any framework or platform with zero configuration.

🌐

Universal

Works with React, Vue, Next.js, WordPress, and all frameworks

⚡

Zero Config

Add one script tag. No setup required. Works immediately.

🔒

Multi-Layer

Protects against right-click, copy/paste, DevTools, and more

🎯

Smart Protection

Automatically allows forms and inputs while blocking everything else

Free & Open Source

Fortress is completely free to use. No hidden costs, no premium tiers for basic features. Full protection for everyone.

Quick Start

Get Fortress running on your website in less than 2 minutes.

Step 1: Get Your CDN Link

Step 2: Add to Your Website

Add this single line before the closing </body> tag:

HTML

<script src="https://cdn.naraway.com/fortress/v1.js"></script>

Step 3: You're Protected!

That's it! Fortress will automatically protect all pages on your website.

✅ Works Immediately

No configuration, no setup, no npm install. Just add the script tag and you're done.

Installation

Fortress can be installed in multiple ways depending on your project setup.

Via CDN (Recommended)

The easiest way is to use our CDN:

HTML

<!-- Add before closing </body> tag -->
<script src="https://cdn.naraway.com/fortress/v1.js"></script>

Self-Hosted

Download and host on your own server:

HTML

<!-- Download from GitHub and upload to your server -->
<script src="/js/fortress.js"></script>

⚠️ Important

Always add the script at the END of your <body> tag to ensure all page elements are loaded first.

Features

Fortress provides comprehensive protection through multiple security layers:

Protection Layers

Feature	Description	Platforms
Right-Click Block	Disables context menu on protected elements	All
Copy/Paste Block	Prevents copying text and code	All
Text Selection Block	Disables text selection with mouse	All
DevTools Detection	Detects and warns when DevTools opened	Desktop
Keyboard Shortcuts	Blocks F12, Ctrl+U, Ctrl+Shift+I, etc.	Windows, Mac, Linux
Drag & Drop Block	Prevents dragging images and content	All
Smart Whitelisting	Automatically allows inputs, forms, buttons	All

What's Protected

Text Content: All text, headings, paragraphs
Images: All images and graphics
Code: Inline code and code blocks
Source Code: View source blocked (Ctrl+U)
Developer Tools: F12 and DevTools shortcuts blocked

What's NOT Protected

Forms: Input fields, textareas, select boxes
Buttons: All clickable buttons
Links: Navigation and clickable links
User Interactions: Any element user needs to interact with

Smart Protection

Fortress automatically detects and allows user-interactive elements while blocking everything else. No configuration needed.

React Integration

Add Fortress to your React application in seconds.

Method 1: In public/index.html

Add to your public/index.html file:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    
    <!-- Add Fortress before closing body -->
    <script src="https://cdn.naraway.com/fortress/v1.js"></script>
  </body>
</html>

Method 2: Using React Helmet

If you prefer managing scripts in React components:

JSX

import { Helmet } from 'react-helmet';

function App() {
  return (
    <>
      <Helmet>
        <script src="https://cdn.naraway.com/fortress/v1.js" />
      </Helmet>
      <YourComponents />
    </>
  );
}

✅ Recommended

Method 1 (public/index.html) is recommended as it loads Fortress on every page automatically.

Next.js Integration

Add Fortress to your Next.js application.

In _document.js

Add to your pages/_document.js file:

JavaScript

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        
        {/* Add Fortress */}
        <script src="https://cdn.naraway.com/fortress/v1.js" />
      </body>
    </Html>
  );
}

Using Next.js Script Component

Alternatively, use Next.js Script component:

JSX

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script 
          src="https://cdn.naraway.com/fortress/v1.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Vue.js Integration

Add Fortress to your Vue application.

In public/index.html

Add to your public/index.html file:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    
    <!-- Add Fortress -->
    <script src="https://cdn.naraway.com/fortress/v1.js"></script>
  </body>
</html>

In App.vue

Or add dynamically in your root component:

Vue

<script>
export default {
  name: 'App',
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://cdn.naraway.com/fortress/v1.js';
    document.body.appendChild(script);
  }
}
</script>

Angular Integration

Add Fortress to your Angular application.

In index.html

Add to your src/index.html file:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My Angular App</title>
  </head>
  <body>
    <app-root></app-root>
    
    <!-- Add Fortress -->
    <script src="https://cdn.naraway.com/fortress/v1.js"></script>
  </body>
</html>

In angular.json

Or add to scripts array in angular.json:

JSON

"scripts": [
  "https://cdn.naraway.com/fortress/v1.js"
]

WordPress Integration

Add Fortress to your WordPress site.

Method 1: In Theme Files

Edit your theme's footer.php file and add before </body>:

PHP

<script src="https://cdn.naraway.com/fortress/v1.js"></script>
<?php wp_footer(); ?>
</body>
</html>

Method 2: Using Plugin

Install "Insert Headers and Footers" plugin and add to footer:

HTML

<script src="https://cdn.naraway.com/fortress/v1.js"></script>

Method 3: In functions.php

Add to your theme's functions.php:

PHP

function add_fortress_security() {
    echo '<script src="https://cdn.naraway.com/fortress/v1.js"></script>';
}
add_action('wp_footer', 'add_fortress_security');

HTML/CSS Integration

Add Fortress to any static HTML website.

Basic HTML

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    
    <!-- Your Content -->
    <h1>Hello World</h1>
    
    <!-- Add Fortress before closing body -->
    <script src="https://cdn.naraway.com/fortress/v1.js"></script>
  </body>
</html>

That's It!

For static HTML sites, this is all you need. Add the script tag once and it protects all pages.

Customization

While Fortress works out-of-the-box, you can customize its behavior.

Allow Specific Elements

Use the data-fortress-allow attribute to allow specific elements:

HTML

<!-- This div's content can be selected and copied -->
<div data-fortress-allow="true">
  Users can copy this text
</div>

<!-- This will be protected -->
<div>
  This text is protected by Fortress
</div>

Custom Warning Messages

Fortress shows warning messages when users try to copy. These are built-in and automatic.

Auto-Allowed Elements

Fortress automatically allows: input, textarea, select, button, form, a, nav, and any contenteditable elements.

Whitelisting

Fortress automatically whitelists interactive elements, but you can add more.

Automatic Whitelist

These elements are always allowed:

<input> - All input fields
<textarea> - Text areas
<select> - Dropdown menus
<button> - All buttons
<form> - Forms and their children
<a> - Links
<nav> - Navigation elements
[contenteditable] - Editable content

Custom Whitelist

Add data-fortress-allow="true" to any element:

HTML

<!-- Allow selection in specific sections -->
<div class="blog-post" data-fortress-allow="true">
  <h2>My Blog Post</h2>
  <p>Users can select and copy this content</p>
</div>

<!-- Protected section -->
<div class="premium-content">
  <p>This content is protected</p>
</div>

Protection Levels

Fortress offers different protection levels based on registration status.

Free Tier (60% Protection)

✅ Right-click blocking
✅ Copy/paste blocking
✅ Basic keyboard shortcuts (F12, Ctrl+U)
✅ Text selection blocking
✅ Fortress branding badge

Registered Tier (100% Protection)

✅ Everything in Free Tier
✅ Advanced DevTools detection
✅ All keyboard shortcuts blocked
✅ Save page blocking (Ctrl+S)
✅ Print blocking (Ctrl+P)
✅ Optional branding badge

100% Free Registration

API - Methods

Fortress runs automatically. No JavaScript API calls needed in most cases.

Check Protection Status

JavaScript

// Check if Fortress is active
const isFortressActive = document.documentElement.hasAttribute('data-fortress');

console.log('Fortress Active:', isFortressActive);

Get Fortress Version

JavaScript

// Get Fortress version
const version = document.documentElement.getAttribute('data-fortress');

console.log('Fortress Version:', version);

Zero Configuration

Fortress is designed to work automatically. You don't need to call any methods or configure anything.

API - Events

Fortress logs all security events to the console (in development mode).

Security Events

Fortress tracks these events internally:

fortress_initialized - When Fortress loads
right_click_blocked - When right-click is blocked
copy_blocked - When copy is blocked
devtools_detected - When DevTools opened
keyboard_shortcut_blocked - When keyboard shortcut blocked

Event Tracking

Events are tracked for analytics purposes to help improve Fortress. No personal data is collected.

API - Options

Fortress is designed for zero configuration, but here are the internal options:

Internal Configuration

JavaScript

// These are built into Fortress (no need to set)
{
  rightClick: true,           // Block right-click
  textSelection: true,        // Block text selection
  copyPaste: true,           // Block copy/paste
  devTools: true,            // Detect DevTools
  keyboard: true,            // Block keyboard shortcuts
  dragDrop: true,            // Block drag & drop
  
  // Automatic whitelist
  allowedSelectors: [
    'input',
    'textarea', 
    'select',
    'button',
    'form',
    'a',
    'nav',
    '[contenteditable="true"]',
    '[data-fortress-allow="true"]'
  ]
}

No Custom Configuration

Currently, Fortress doesn't support custom configuration to keep it simple and secure. Contact us if you need custom features.

FAQ

Is Fortress really free?

Yes! Fortress is completely free to use. No hidden costs, no premium tiers for basic protection. Everyone gets full protection.

Does it work with my framework?

Yes! Fortress works with React, Vue, Next.js, Angular, WordPress, Shopify, and any other framework. It's framework-agnostic.

Will it break my forms?

No! Fortress automatically detects and allows all interactive elements like inputs, buttons, and forms.

Does it slow down my website?

No! Fortress is only ~15KB and loads asynchronously. It has zero impact on page load time.

Can users still view my source code?

Technical users can always view source code through browser DevTools. Fortress makes it significantly harder and deters casual copying.

Is it GDPR compliant?

Yes! Fortress only tracks domain-level usage (which website uses it). No personal data from end-users is collected.

Can I remove the Fortress badge?

The badge only appears in Free tier. Register your website (still free) to get the option to remove it.

Does it work on mobile?

Yes! Fortress works on all devices: desktop, tablet, and mobile.

What if I have issues?

Troubleshooting

Fortress not working

Check:

Script is added before closing </body> tag
CDN link is correct
No JavaScript errors in console (press F12)
Page has fully loaded

Forms not working

Check:

Forms use proper HTML tags (<form>, <input>)
No custom JavaScript blocking form functionality
Forms are not inside custom protected areas

Users can still right-click

Possible reasons:

User is on a whitelisted element (input, button, link)
Element has data-fortress-allow="true"
Fortress not loaded yet (check console)

DevTools warning not showing

Check:

Website is registered (DevTools detection is 100% tier)
Browser window size allows detection
Not testing on localhost (works on live sites)

Need Help?

Can't solve your issue? Email us at info@naraway.com with details and we'll help you debug.

Support

Get Help

We're here to help! Contact us through:

📧

Email Support

info@naraway.com

💬

Live Chat

Available on naraway.com

📚

Documentation

You're reading it!

About Naraway

Fortress is developed and maintained by Naraway, a software development company based in India.

We build products that help developers and businesses protect their digital assets.

Made in India 🇮🇳

Fortress is proudly made in India and used by developers worldwide.

🛡️ Fortress Security

Overview

Universal

Zero Config

Multi-Layer

Smart Protection

Quick Start

Step 1: Get Your CDN Link

Step 2: Add to Your Website

Step 3: You're Protected!

Installation

Via CDN (Recommended)

Self-Hosted

Features

Protection Layers

What's Protected

What's NOT Protected

React Integration

Method 1: In public/index.html

Method 2: Using React Helmet

Next.js Integration

In _document.js

Using Next.js Script Component

Vue.js Integration

In public/index.html

In App.vue

Angular Integration

In index.html

In angular.json

WordPress Integration

Method 1: In Theme Files

Method 2: Using Plugin

Method 3: In functions.php

HTML/CSS Integration

Basic HTML

Customization

Allow Specific Elements

Custom Warning Messages

Whitelisting

Automatic Whitelist

Custom Whitelist

Protection Levels

Free Tier (60% Protection)

Registered Tier (100% Protection)

API - Methods

Check Protection Status

Get Fortress Version

API - Events

Security Events

API - Options

Internal Configuration

FAQ

Is Fortress really free?

Does it work with my framework?

Will it break my forms?

Does it slow down my website?

Can users still view my source code?

Is it GDPR compliant?

Can I remove the Fortress badge?

Does it work on mobile?

What if I have issues?

Troubleshooting

Fortress not working

Forms not working

Users can still right-click

DevTools warning not showing

Support

Get Help

Email Support

Live Chat

Documentation

About Naraway

Get Fortress Free 🛡️

You're All Set!