Security Headers

GlobalForms adds security headers to every response. These headers tell browsers which sites may embed your forms, which outside resources forms may load, and how to protect users. You can change them to embed forms in another website, call outside services from a form, or let other applications use the GlobalForms API.

Default headers

The default Content Security Policy is:

default-src 'self'; connect-src 'self' maxcdn.bootstrapcdn.com; style-src 'self' 'unsafe-inline' fonts.googleapis.com unpkg.com maxcdn.bootstrapcdn.com; img-src 'self' data: www.square-9.com; font-src 'self' data: fonts.gstatic.com maxcdn.bootstrapcdn.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' cdn.ckeditor.com unpkg.com maxcdn.bootstrapcdn.com; frame-ancestors 'self'; form-action 'self'; base-uri 'self';

How to change headers

1. Add an addHeaders section to config\local.json with only the headers you want to change or add. All other default headers stay in place.

2. Restart the GlobalForms service.

3. Test your forms (see Verify your changes).

To turn off a default header, set its value to an empty string, for example "X-XSS-Protection": "". Leaving a header out of local.json keeps the default.

Common tasks

Embed forms in another website

By default, browsers refuse to show GlobalForms inside a frame on another site. To allow a trusted site, for example https://www.example.com:

1. Add the site to frame-ancestors in the Content Security Policy.

2. Turn off X-Frame-Options, which cannot list other sites.

{
  "addHeaders": {
    "X-Frame-Options": "",
    "Content-Security-Policy": "default-src 'self'; connect-src 'self' maxcdn.bootstrapcdn.com; style-src 'self' 'unsafe-inline' fonts.googleapis.com unpkg.com maxcdn.bootstrapcdn.com; img-src 'self' data: www.square-9.com; font-src 'self' data: fonts.gstatic.com maxcdn.bootstrapcdn.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' cdn.ckeditor.com unpkg.com maxcdn.bootstrapcdn.com; frame-ancestors 'self' https://www.example.com; form-action 'self'; base-uri 'self';"
  }
}

Let forms call an outside service

If a form loads data from another site in the browser, for example a Select component that gets its options from https://api.example.com, add that site to connect-src:

connect-src 'self' maxcdn.bootstrapcdn.com https://api.example.com;

The outside service must also allow requests from your GlobalForms address.

Show images from another site

Add the site to img-src:

img-src 'self' data: www.square-9.com https://images.example.com;

Let another application use the GlobalForms API

If a web application hosted on another site calls the GlobalForms API from the browser, add cross-origin (CORS) headers that name that application's address:

{
  "addHeaders": {
    "Access-Control-Allow-Origin": "https://app.example.com",
    "Access-Control-Allow-Methods": "GET, POST, PUT, PATCH, DELETE, OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Authorization, x-jwt-token",
    "Access-Control-Allow-Credentials": "true",
    "Access-Control-Max-Age": "3600"
  }
}

Verify your changes

1. Open a form in your browser and press F12 to open developer tools.

2. On the Network tab, reload the page, select the first request and check its Response Headers.

3. On the Console tab, look for messages that mention Content Security Policy. They name the address that was blocked and the policy setting (such as connect-src) to add it to.

Troubleshooting

Related pages

• Configuring HTTPS

• Configuration Files

• Ports and External Access