FAQ Index

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'  https://service.mtcaptcha.com https://service2.mtcaptcha.com;  
Content-Security-Policy: frame-src https://service.mtcaptcha.com https://service2.mtcaptcha.com;

‍

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 = 'https://service.mtcaptcha.com/mtcv1/client/mtcaptcha.min.js';(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(mt_service);
   var mt_service2 = document.createElement('script');mt_service2.async = true;mt_service2.src = 'https://service2.mtcaptcha.com/mtcv1/client/mtcaptcha2.min.js';(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'  https://service.mtcaptcha.com https://service2.mtcaptcha.com;  
Content-Security-Policy: frame-src https://service.mtcaptcha.com https://service2.mtcaptcha.com;