Skip to main content

Content Security Policy Header

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);}) ();
  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;