Content Security Policy (Csp) Headers With MTCaptcha

Following are two examples on how to enable MTCaptcha with Content Security Policy (CSP) HTTP Headers,:

Simple CSP Headers (Less Secure)

The simplest is to set the following headers though this provides weak security as it requires ‘unsafe-inline’

Content-Security-Policy: script-src 'self' 'unsafe-inline';  
Content-Security-Policy: frame-src;

Secure CSP Headers

For a more secure CSP setting without using dynamic nonce or unsafe-inline:

1 ) Create a new file ‘mtcaptcha-integration.js’ and place the mtcaptcha initialization and import code in this. For complete mtcaptcha initialization and import settings please see MTCaptcha’s Code Builder and MTCaptcha’s Developer Guide.

// This code should be placed in a file called mtcaptcha-integration.js
    var mtcaptchaConfig = {
      "sitekey": "<YOUR SITE KEY>"
   (function(){var mt_service = document.createElement('script');mt_service.async = true;mt_service.src = '';(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(mt_service);
   var mt_service2 = document.createElement('script');mt_service2.async = true;mt_service2.src = '';(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(mt_service2);}) ();

2) Import the mtcaptcha-integration.js javascript on the webpage using the following script tag

<script src="mtcaptcha-integration.js" ></script>

3) Add the following CSP headers

Content-Security-Policy: script-src 'self';  
Content-Security-Policy: frame-src;