Skip to main content

Content Security Policy Header

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);}) ();
  1. Import the mtcaptcha-integration.js JavaScript on the webpage using the following script tag

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

  1. 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;