
Research
Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique
A malicious package uses a QR code as steganography in an innovative technique.
@kit-data-manager/inclde
Advanced tools
An Includable Linked Data Editor, a web component allowing easy modification of JSON-LD in the browser.
INCLDE (spelled "/ɪnˈkluːd/", as "include") is a web component that allows editing of linked data. The goal is to allow easy integration into web-based applications.
npm install
To start the dev server use the following command:
npm start
The web component can be built using npm run build
and after embedding the resulting files in to a website, INCLDE can be invoked like other web components. The components' documentation has a separate, auto-generated readme file. Example:
fetch("/data/example.jsonld")
.then((response) => response.json())
.then((data) => {
const editor = document.createElement("inclde-editor");
editor.data = data;
editor.config = config;
editor.addEventListener('editorClosed', event => {
console.log('event', event.detail);
// Process return data further
})
document.body.appendChild(editor);
});
You may also want to take a look at the index.html example, which is what you see when you run npm start
.
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
config (required) | config | object | string | undefined | |
data (required) | data | object | string | undefined |
data
defines the data that should be edited. It can be either a JSON object or a JSON-LD string.
config
defines the configuration of the editor. It can be either a JSON object or a JSON-LD string.
An example config showcasing all currently available functionality:
{
"title": "INCLDE Demo Instance",
"hideAttributesByDefault": false,
"allowNewAttributes": true,
"attributConfig": [
{
"onType": "http://schema.org/Comment",
"attributes": [
{
"name": "http://schema.org/image",
"readOnly": true
}
]
},
{
"onId": "https://adhesivewombat.bandcamp.com/track/funky-sundays",
"attributes": [
{
"name": "http://schema.org/duration",
"hidden": true
}
]
}
]
}
Allowing specific attributes to be hidden or set to read only.
Event | Description | Type |
---|---|---|
editorClosed | Fired when the editor is closed with the save or cancel buttons. event.detail contains the edited data if the save button was clicked, undefined otherwise. | CustomEvent<NodeObject | NodeObject[] | undefined> |
Custom Elements provide a way to overwrite the way certain elements are rendered. This can be used to add custom functionality to the editor.
For this custom elements need to implement the CustomElement
interface.
Here a minimal example:
import { h } from '@stencil/core';
import { CustomElement } from './index';
export default class ExampleEl implements CustomElement {
public static id = 'http://custom-elements.definition/example';
public value: string = "";
private callback?: (value: any) => void;
constructor(valueObj: any, callback?: (value: any) => void) {
if (typeof valueObj['value'] === 'string') {
this.value = valueObj['value'];
} else {
// Error handling
}
this.callback = callback;
}
private onInput(event: InputEvent) {
if (event.target instanceof HTMLInputElement) {
this.value = event.target.value;
if (this.callback !== undefined) {
this.callback(this.value);
}
}
}
render() {
return <input value={this.value} onInput={this.onInput} />
}
}
INCLDE (formerly lmd-editor) is licensed under MIT License. See LICENSE for more information.
Currently, the editor also makes use of icons from Font Awesome 6.4.0 (License)
FAQs
An Includable Linked Data Editor, a web component allowing easy modification of JSON-LD in the browser.
We found that @kit-data-manager/inclde demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.