Understanding Content Security Policy - CSP

What is CSP?

Content Security Policy (CSP) is an additional layer of security that allows website administrators to control which resources the user agent is permitted to load on a given page.

The purpose of this security layer is to prevent code injection attacks (cross-site scripting) resulting from the execution of malicious content on the web page. These attacks aim to steal data and even deface the site to distribute malware.

How does CSP affect the Hand Talk Plugin?

Now that we understand what Content Security Policy (CSP) is and its functionality, it becomes easier to understand why the Hand Talk Plugin might not be loading on your website.

As explained earlier, CSP is an additional security layer that allows site administrators to control the content that can be loaded on the page. If your website has CSP configured, you will need to allow the loading of content from the Hand Talk Plugin.

Would you like to see a practical example of blocking?

When attempting to open the Hand Talk Plugin, we notice that we cannot load it completely. When we open the developer tools in the browser, on the console tab, we see the following message:

Basically, this message informs us that the page refuses to load image content (img-src) from the Hand Talk Plugin because the URL violates the Content Security Policy directive.


 

In the Network tab of the browser's developer tools, we notice some requests being blocked by the website's server.


 

When we open the links being blocked by the server, we see that these files are related to the textures of the Hand Talk Plugin translator.


 

How to configure the release of Hand Talk on a website?

CSP configuration on your website can vary depending on the environment used. In most environments, this configuration can be done by adding a <meta> tag.

To configure the release of the block that occurs in the practical example shown above, we can use the <meta> tag as follows:
 

<meta http-equiv="Content-Security-Policy" content="img-src 'self' blob: https://handtalk.me/;" />

In the <meta> tag described above, we allow image content from the Hand Talk domain (https://handtalk.me/), thus configuring your CSP to allow the loading of the Hand Talk Plugin.