shacl-vue

Deployment feature: Security measures ​

Apart from browser-standard web security measures (such as the Same-origin policy and CORS), shacl-vue includes several configurable security features to protect against possible attacks. Such measures work preventatively against possible exploits of shacl-vue's config-, schema-, and content fetching functionality.

These features include:

The configurability becomes especially useful in the context of a multi-tenant deployment, where the administrator of the shacl-vue deployment and the provider of a UI instance configuration are not the same entities. While a tenant will configure the user-facing aspects of their UI/UX, the administrator can retain full control of security-specific configuration for that specific deployment via shacl-vue's build configuration approach.

Below we describe the security-specific build configuration variables that shacl-vue currently supports:

Sanitization with DOMpurify configuration ​

DOMpurify prevents XSS attacks by sanitizing HTML, SVG, and MathML content on the client side. shacl-vue uses this wherever v-html directives are used to render HTML content. The DOMpurify config option can receive an object with any standard DOMpurify options to tweak the sanitization behaviour

The default configuration, which will be overwritten if options are specified via build config, is:

yaml
DOMpurify:
    WHOLE_DOCUMENT: true
    USE_PROFILES:
        html: true
        svg: true

Content Security Policy configuration ​

A Content Security Policy provides "fine-grained control over the code that can be loaded on a site, and what it is allowed to do". It protects against XSS attacks, clickjacking, and MITM attacks.

The CSP_CONTENT build config option can be used to specify fetch- and other directives for the deployment, essentially resulting in an "allowlist" of origins that can pass CSP constraints for specific resources. The configured variables will be injected into the index.html's <meta http-equiv="Content-Security-Policy" content="…"> element.

There is no default specification, which means that no CSP is included/deployed by default.

yaml
CSP_CONTENT:
  connect-src:
    - "'self'"
    - https://hub.psychoinformatics.de/
    - https://concepts.datalad.org/

Note:

  • multiple values per directive should be specified as a list
  • the 'self' specification in any directive, if provided via YAML, should be enclosed in single AND double quotes, in order to retain the required single quotes after injecting it into the index.html file.

Secure fetch configuration ​

shacl-vue has an internal secureFetch method that replaces all app-wide and GET-method-specific uses of the standard fetch API. This occurs when:

  • fetching the shacl-vue configuration file content
  • fetching content specified in the shacl-vue configuration file
  • fetch turtle (ttl) content from an integrated dump-things-service backend

The reasoning behind secureFetch is to tighten security around the content that a shacl-vue instance can fetch from URLs that are configuration-supplied. Since these configuration files are not necessarily under the control of a deployment administrator, shacl-vue provides admin-level control by allowing build-time configuration of the secureFetch method via the FETCH option.

By default, secureFetch internally constrains a fetch operation to the following options:

  • method: 'GET'
  • credentials: 'omit'
  • method: 'cors'

Build-time configurable options include:

yaml
FETCH:
  MAX_BYTES: 5_000
  TIMEOUT_MS: 10_000
  CONTENT_TYPES: ...

Here:

  • MAX_BYTES specifies the maximum content size that secureFetch may fetch. By default this is unspecified and unconstrained.
  • TIMEOUT_MS specifies the maximum time a request is allowed to take before being aborted by the browser. By default this is unspecified and unconstrained.
  • CONTENT_TYPES specifies the standard content types that the application is allowed to fetch

The default in-app-specified content types are:

javascript
{
    json: [
        'application/json',
        'application/problem+json',
    ],
    html: [
        'text/html',
    ],
    yaml: [
        'application/yaml',
        'application/x-yaml',
        'text/yaml',
        'text/plain',
    ],
    text: [
        'text/plain',
    ],
    rdf: [
        'application/ld+json',
        'application/rdf+xml',
        'text/turtle',
        'application/n-triples',
        'application/trig',
    ],
    svg: [
        'image/svg+xml',
    ],
    image: [
        'image/png',
        'image/jpeg',
        'image/gif',
        'image/webp',
        'image/avif',
        'image/apng',
        'image/bmp',
    ],
}

Notes:

  • Build-time specification of ANY CONTENT_TYPES will override ALL in-app defaults.
  • For CONTENT_TYPES, the same keys MUST be used to re-specify existing defaults. New keys are not constrained.
  • The result of a constraint violation is that an error will be thrown which will be visible in the console.