cti-stix-visualization

Installation

D3 is required as a peer dependency.

TODO POSSIBLY UPDATE

npm i cti-stix-to-vis 

Basic Use

import d3 from "d3"; 
import initViz from "cti-stix-to-viz"; 


const Viz = initViz(d3); 

const vizInstance = new Viz(document.getElementById("my-svg"), {
  id: "my-svg" 
}); 

vizInstance.vizStix(testData, {
  //config
}); 

Example usage with React:

TODO probably a good idea to add a link to code-sandbox

import React, { useEffect, useRef } from 'react';
import './App.css';

import { testData } from './testData';
import d3 from "d3";


//TODO UPDATE THIS
import initViz from "cti-stix-visualization-dwj";


const Viz = initViz(d3);


function App() {

  const svgRef = useRef<SVGSVGElement>(null);
  useEffect(() => {

    console.log(svgRef);
    if (svgRef.current) {
      const vizInstance = new Viz(svgRef.current, {
        id: 'foo',

      });

      vizInstance.vizStix(testData, {}, (...args) => {
        console.log("vizCallBack", args);
      }, (...args) => {
        console.log("errorCallback", args)
      });
    }
  }, [svgRef]);
  return (
    <div className="App" >
      <svg ref={svgRef} id='foo'></svg>
    </div>
  );
}

export default App;

Local use

Install dependencies

yarn

Build the compiled code (required for local server)

yarn build

Start local server

yarn start

Open your browser to http://localhost:3000

This is an OASIS TC Open Repository. See the Governance section for more information.

The STIX visualization is meant to provide producers and consumers of STIX content with a rapid way to visualize the objects in a STIX JSON file, and the relationships between those objects. The visualization is implemented in HTML, CSS, and JavaScript (using the D3.js library), and is suitable for standalone use — either on a hosted server or as a local file — or embedded into other applications. Regardless of how deployed, the JavaScript code in this repository does not transmit STIX data to any server; it is strictly processed within the browser in which the code is running, so it is suitable for data which the user does not wish to share.

It visualizes STIX 2.0 content using d3, and is 100% browser-based, meaning that you can use it without sending all your data to the server (great!)

How does it work?

This code makes a lot of assumptions! It assumes:

• The source - a file you upload, text you paste, or an external server - provides valid JSON
• That JSON has a bunch of keys and values, some of which are arrays
• Everything inside those arrays is an SDO, with an ID, type, and ideally title
• One of those arrays contains a list of relationships between the other SDOs provided

This should match most STIX 2.0 content inside a bundle. For a slightly out-of-date example, look at test.json.

Neat, a graph! What next?

Click on nodes or paths to get more detailed information for that element (and to pin nodes in place). If you want to unpin a pinned node, double-click it.

If you want to load another JSON file, just click on the title at the top of the page to go back to the input options.

How can I use it?

Go to http://oasis-open.github.io/cti-stix-visualization. Upload a JSON file, paste some valid JSON text, or provide the URL for an external JSON file. The URL for an external JSON file can be provided on the main page or as a URL parameter: https://oasis-open.github.io/cti-stix-visualization/?url=https://raw.githubusercontent.com/oasis-open/cti-stix-visualization/master/test.json.

Customizing the graph's appearance

You can also optionally customize the text and icons associated with each object type, shown on the graph. There is a separate field that accepts JSON (format is specified on the visualizer page), and allows you to specify a custom icon and/or a custom property to be shown. You can specify one custom icon and/or display property per type of object; you can overwrite the icon and/or text displayed for existing STIX object types, or for your own custom object types. Note that the custom icon must be located in the visualizer's icons directory. Alternatively, you can specify the custom icon via a web URL, in which case you must specify the protocol (e.g. https).

Integrating the visualizer

You can integrate the visualizer into your own web application. The visualizer is implemented as an AMD module that exports the Viz class. You can create a new Viz instance and visualize your STIX content using code like the following:

visualizer = new stix2viz.Viz(mySvgElement);
visualizer.vizStix(content);

Finally, you can use visualizer.vizReset() if you need to clear the graph.

Technical Details

Documenting AMD is beyond the scope of this document. There are various implementations of it; this repository includes requirejs. Importing and using AMD modules generally looks like:

require(["module1", "module2"], function(module1, module2) {
    /* Do stuff with the modules */
});

So you need to add your AMD implementation to your web page, and then use modules as above. With respect to stix2viz, you may need further configuration to ensure the module is found, especially since it was written to work as a Jupyter notebook extension. You may consult index.html and application.js for inspiration.

Acknowlegements

The icons used in the generated graphs are by Bret Jordan, licensed under the Creative Commons Attribution-ShareAlike (CC BY-SA) License, Version 4.0.

Governance

This GitHub public repository ( https://github.com/oasis-open/cti-stix-visualization ) was proposed and approved [bis] by the OASIS Cyber Threat Intelligence (CTI) TC as an OASIS TC Open Repository to support development of open source resources related to Technical Committee work.

While this TC Open Repository remains associated with the sponsor TC, its development priorities, leadership, intellectual property terms, participation rules, and other matters of governance are separate and distinct from the OASIS TC Process and related policies.

All contributions made to this TC Open Repository are subject to open source license terms expressed in the BSD-3-Clause License. That license was selected as the declared "Applicable License" when the TC Open Repository was created.

As documented in "Public Participation Invited", contributions to this OASIS TC Open Repository are invited from all parties, whether affiliated with OASIS or not. Participants must have a GitHub account, but no fees or OASIS membership obligations are required. Participation is expected to be consistent with the OASIS TC Open Repository Guidelines and Procedures, the open source LICENSE designated for this particular repository, and the requirement for an Individual Contributor License Agreement that governs intellectual property.

Maintainers

TC Open Repository Maintainers are responsible for oversight of this project's community development activities, including evaluation of GitHub pull requests and preserving open source principles of openness and fairness. Maintainers are recognized and trusted experts who serve to implement community goals and consensus design preferences.

Initially, the associated TC members have designated one or more persons to serve as Maintainer(s); subsequently, participating community members may select additional or substitute Maintainers, per consensus agreements.

Current Maintainers of this TC Open Repository

• Chris Lenk; GitHub ID: https://github.com/clenk; WWW: MITRE
• Jason Keirstead; GitHub ID: https://github.com/JasonKeirstead; WWW: IBM

About OASIS TC Open Repositories

• TC Open Repositories: Overview and Resources
• Frequently Asked Questions
• Open Source Licenses
• Contributor License Agreements (CLAs)
• Maintainers' Guidelines and Agreement

Feedback

Questions or comments about this TC Open Repository's activities should be composed as GitHub issues or comments. If use of an issue/comment is not possible or appropriate, questions may be directed by email to the Maintainer(s) listed above. Please send general questions about TC Open Repository participation to OASIS Staff at [email protected] and any specific CLA-related questions to [email protected].