Add a host to the content security policy XML

The HTTP Content Security Policy (CSP) is a response header that controls what pages load for specific user agents. This primarily involves defining rules for specific origins and script endpoints to help protect and guard against cross-site scripting (XSS) attacks.

Implementing CSP in a VueJS Project

When trying to load a VueJS file from a Content Delivery Network (CDN), it is likely to fail due to CSP restrictions. To fix this issue, create another XML file within the etc directory and name it csp_whitelist.xml. You can refer to the core code for any files named csp_whitelist.xml as examples.

Creating a Policy ID

First, define a policy ID, which is usually script-src. This maps directly to an HTTP header that CSP expects to have. Next, add the values, which can be any number of values defined in value nodes.

For the value of this node, copy the root URL of the full CDN URL. It is good practice to pull out the main hostname and add it as the ID for this node. The value for this ID needs to be unique among other CSP policies inside the project.

Saving and Applying the CSP Policy

After saving the csp_whitelist.xml file, clear the cache and reload the page. The CSP policy will now be in effect. This XML file is converted into an HTTP header that resembles Content-Security-Policy followed by script-src (which maps to the policy ID), self, and the name of the host being defined.

This XML file outputs an HTTP header that allows requests to go to the specified CDN defined as the value.