CodeProtection

|Version | Framework | |--- |--- | | 3.0.1 | Angular |

Configuration

By default all the features are disable, so you need to configure the features that you want to use. The configuration is an interface with the next structure:

interface Configuration {
    preventDeveloperTools ?: boolean;
    windowBlur ?: Action;
    visibilityChange ?: Action;
    debuggerOn ?: Action;
    timeout ?: TimerAction;
}

| Attribute | Type | Description| |---|---|---| | preventDeveloperTools | boolena| Disable the context menu and the shotcuts used for access to Developer Tools| | windowBlur | Action | Detects when the document is not active and excecutes the configured task | | visibilityChange | Action| Detects when the window is not active and excecutes the configured task | | debuggerOn | Action| Detects when the developer tools window is active and excecutes the configured task | | timeout |TimerAction | Enable a timer and excecutes the configured task whent the timeout|

Action & TimerAction

interface Action {
   enabled: boolean;
   behavior ?: ActionBehavior;
}
interface TimerAction extends Action {
   maxTime?: number;
}

| Attribute | Type | Description | |---|---|---| | enabled | boolean| Enable/disable the task| | behavior | ActionBehavior | Sets the behavior triggered when the user's action is detected | | maxTime (only for timeout)| number | Sets the time to wait in miliseconds before the timer action be triggerred |

ActionBehavior | Value | Description | |---|---| | ERROR_MESSAGE | The directives will notify an error | | REDIRECT | Redirects the user to the component defined through the redirectionToComponent attribute |

Example

{
    preventDeveloperTools : true,
    windowBlur : {enabled : true, behavior : ActionBehavior.ERROR_MESSAGE},
    visibilityChange : {enabled : true, behavior : ActionBehavior.ERROR_MESSAGE},
    debuggerOn : {enabled: false, behavior : ActionBehavior.ERROR_MESSAGE},
    timeout: {enabled: false, behavior : ActionBehavior.ERROR_MESSAGE, maxTime: 5 * 60 * 1000}
};

Global code protection (global-code-protection)

Description

Global code protections is an Angular Directive that allows the developer to prevent some user's behavior along all the app.

How to use

Just add the global-code-protection tag in the HTML file and set your custom configuration through the [configuration] attribute.

• If some configuration attribute has as ActionBehavior the "REDIRECT" value, the redirection will be to the "redirectionToComponent" attribute, so add the route you want the user to be redirected

• If some configuration attribute has as ActionBehavior the "ERROR_MESSAGE" value, the error will be notified through the "(onerror)" event, so set your method's name that will manage the errors

<global-code-protection 
  [configuration]="config" 
  redirectionToComponent="error" 
  (onerror)="onerror($event)">
</global-code-protection>

Suggestion Use this directive in app.component.html

Global code protection service

Code protection (component level)

<component 
  code-protection 
  [configuration]="config" 
  (onerror)="onerror($event)" >
</component>