Graphameleon Web extension
Graphameleon is a Web Browser Extension which collects and semantizes Web navigation traces.
Following research on the NORIA-O and DynaGraph projects, the Graphameleon Web extension brings visualization and recording of Web navigation traces at the browser level. Then, leveraging knowledge graph representations, to perform User and Entity Behavior Analytics (UEBA) and Anomaly Detection (AD).
The extension incorporates an internal semantical mapping module that relies on the RMLmapper library to construct a RDF knowledge graph during navigation. Additionally, it utilizes the React-Force-Graph visualization library, allowing users to view their navigation traces in a 3D representation of the knowledge graph.
If you use this software in a scientific publication, please cite:
Benjamin Stach, Lionel Tailhardat, Yoan Chabot, and RaphaΓ«l Troncy. 2023. Graphameleon: Relational Learning and Anomaly Detection on Web Navigation Traces Captured as Knowledge Graphs.
BibTex format:
@inproceedings{graphemeleon-2023,
title = {{Graphameleon: Relational Learning and Anomaly Detection on Web Navigation Traces Captured as Knowledge Graphs}},
author = {{Benjamin Stach} and {Lionel Tailhardat} and {Yoan Chabot} and {Rapha\"el Troncy}},
year = {2023}
}
Usage
Build
Pre-requisites:
- Downloading and installing Node.js and npm
- Cloning the repository to your computer
- Installing third-party npm modules:
npm install
Create a build for Firefox:
# Firefox is considered to be the browser by default for the build process
npm run start
Create a build for Chrome:
npm run start:chrome
Create a build for Edge:
npm run start:edge
Clean the distribution file:
npm run clean
Run on Firefox
- First, open a firefox navigation window and go to the following page:
about:debugging#/runtime/this-firefox
- In the Temporary Extensions section, click on the Load Temporary Add-on... button.
- Then, select the
manifest.json
from the./dist
or any other file from the same directory to load the extension.
The Graphameleon Extension is now loaded on Firefox !
Run on Chrome
- First, open a chrome navigation window and go to the following page:
chrome://extensions/
- Enable the Developer Mode on the top-right corner.
- Click on the Load unpacked button.
- Then, select the
manifest.json
from the./dist
or any other file from the same directory to load the extension.
The Graphameleon Extension is now loaded on Chrome !
Run on Edge
- First, open an edge navigation window and go to the following page:
edge://extensions/](edge://extensions/
- Enable the Developer Mode on the left navigation bar.
- Click on the Load unpacked button.
- Then, select the
manifest.json
from the./dist
or any other file from the same directory to load the extension.
The Graphameleon Extension is now loaded on Edge !
Data capture
The general process for performing data capture is as follows:
- Open the Graphameleon component, this brings a Graphameleon panel
- Select a capture mode (see table below for details):
- micro
- macro
- hybrid
- Select a general output format:
- Start data capture with the Record button
- Navigate the Web in the other Web browser tabs
- Stop data capture with the Stop button from the Graphameleon panel
- Select a file export format:
- Export the data with the Export button, the resulting data will be saved in the Web browser's default download folder.
Data collected with Graphameleon
The following table shows the type of data collected by the Graphameleon Web extension as a function of the capture mode (micro-activity vs macro-activity), and grouped by their scope (request vs interaction vs both):
Scope | Feature/header name | Micro | Macro |
---|---|---|---|
Request | Method | Yes | Yes |
URL | Yes | Yes | |
IP | Yes | Yes | |
Domain | Yes | Yes | |
Sec-Fetch-Dest | Yes | Yes | |
Sec-Fetch-Site | Yes | Yes | |
Sec-Fetch-User | Yes | Yes | |
Sec-Fetch-Mode | Yes | Yes | |
Interaction | EventType | - | Yes |
Element | - | Yes | |
Base URL | - | Yes | |
Both | User-Agent | Yes | Yes |
Start time | Yes | Yes | |
End time | Yes | Yes |
Data model for user activities
The following class diagram defines the concepts and properties used for the semantic representation of micro-activities (left) and macro-activities (right):
The names of concepts and properties used here are defined within the UCO vocabulary, the following namespaces apply:
core
: https://ontology.unifiedcyberontology.org/uco/core#ucobs
: https://ontology.unifiedcyberontology.org/uco/observable#types
: https://ontology.unifiedcyberontology.org/uco/types#
For micro-activities, the presented classes and properties accurately describe a sequence of requests captured at the Web browser level.
- An HTTP request is represented by an entity of the class
ucobs:HTTPConnectionFacet
, and its headers are represented by specific properties such asucobs:startTime
anducobs:endTime
for timestamps, andcore:tag
for fetch metadata request headers. - Since an IP address or URL can be common to multiple requests (e.g., a user repeating the same call to a website, a website with various services hosted on the same server), these elements shall be materialized through the
ucobs:IPAddressFacet
anducobs:URLFacet
classes respectively, and cross-references between entities is built through properties such asucobs:hasFacet
anducobs:host
.
Macro-activities further enhance the modeling by allowing the description of interactions.
- We consider the user interactions (e.g., click on a hyperlink, on a Web browser button) as
ucoact:ObservableAction
class instances, with relations to the aboveucobs:HTTPConnectionFacet
anducobs:URLFacet
entities for describing the context in which they occur. - Further, we consider the
types:threadNextItem
andtypes:threadPreviousItem
properties from UCO for modeling the chronology of activity traces.
Example dataset
Please check the graphameleon-ds repository for examples of data captured using the Graphameleon Web extension.
Repository structure
π graphameleon
ββββπ mapping/ <Default semantical mapping rules (RML, YARRRML)>
β ββββ...
ββββπ public/
β ββββπ assets/ <All assets files>
β β ββββ...
β ββββπ index.html
β ββββπ manifest.chrome.json <Manifest V3 for Chrome based browsers>
β ββββπ manifest.firefox.json <Manifest V2 for Firefox browser>
ββββπ src/ <Extension source code>
β ββββπ app/ <Application-specific files>
β β ββββπ components/ <React UI components and panels>
β β β ββββ...
β β ββββπ App.jsx <React app>
β ββββπ scripts/ <Extension scripts (background, content) and modules>
β β ββββπ modules/
β β β ββββπ Interaction.js <Interaction collector>
β β β ββββπ Manager.js <Managing communications, collections and mapping>
β β β ββββπ Mapper.js <Mapping management, graph builder>
β β β ββββπ Request.js <Request collector>
β β ββββπ utils/
β β β ββββπ mapping.js <Raw string default semantical mapping rules (RML)>
β β β ββββπ settings.js <Cross-browser specifiations>
β β β ββββπ tools.js <Handcrafted usefull functions>
β β ββββπ background.js <Background script: manager, mapper and request collector>
β β ββββπ content.js <Content script: interaction collectors>
β ββββπ index.jsx
ββββ...
License
Copyright
Copyright (c) 2022-2023, Orange. All rights reserved.