Skip to main content
Contact Support

Forms Content Security Policy Headers

Ryan J.
Updated

A necessary security implementation

 

CSP headers are used to prevent unwanted content from being loaded on a web page, and this is a great security measure against Cross-Side Scripting (XSS).

 

Hosted Forms vs Embedded Forms

 

Forms CSP headers only apply to hosted forms. Once a user has decided to embed a form in their own page, they should only be concerned about their own CSP header. This is because Forms CSP headers are not loaded into the  users page.

 

Live Forms vs Forms Application

 

CSP headers are not only being included in live forms. One of the main purposes of this change is to protect the application, so it includes the builder, the submissions page, the settings page, and everything. 

 

Live forms should also include any source that is added as custom code. This can be done using the embed field or the custom header and footer, but there are limitations, some scripts can try to load additional content dynamically, and dynamic code won’t be loaded.

 

How to confirm a Content-Security-Policy issue

 

If some content is not loading, you can check the browser inspector on the console tab and look for a message like this:

 

 

Any message saying that some resource wasn’t loaded because it violates the Content Security Policy needs to be reported to the support team to investigate the reason that content wasn’t included.

 

Some variations of that message can also be refused to execute inline script.

 

How can this change affect my form?

 

With Formstack increasing its security, the use of CSP headers was a no-brainer change, but we want to make sure no customer is affected by this change. If you have any custom code, know that Formstack will automatically check the need to include some content as images, iframes, videos, or even scripts to the CSP header, but some content may load external data and even more images, or other scripts.

 

Here are two examples of code that can be affected:

 

  1. Using XMLHttpRequest or AJAX. The domains the application will include in CSP should belong to an element, like <img src=”url” />.

    So the following code will not work:
return fetch(`https://api.domain-name.com/endpoint?term=test`, {

    method: 'GET',

    headers: {

        'Content-Type': 'application/json',

    }
})


when you have an element like <script src=”http://domain-name.com/javascript-page.js”>but these javascript files have a code that loads more content.

The domain domain-name.com will be added to the CSP, but all other content this script tries to load will not be included.


The example above should be the one to be more careful about because it can or cannot work depending on what the script is executing. The recommendation is to disable the CSP flag for any user that loads JavaScript files.

 

If you believe this is your case, please contact the support team and let them know that you do not want the CSP header activated for your account.

Related articles