CORS On Mediawiki API

Introduction on CORS

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. The mechanism is implemented on browser-side or client-side, in which the controlling variables is implemented based on client request header and server response header. This mechanism is implemented on various mobile and desktop browser.Prior to CORS Implementation, cross-site browser request is not allowed.

CORS Implementation on Mediawiki API

Mediawiki has its own implementation of CORS and its implemented inside file includes/api/ApiMain.php. This implementation enable the Mediawiki site admin to put whitelist of the domains that allow to perform API function calls to Mediawiki API.

How to configure

The CORS implementation is included on Mediawiki standard installation, required no additional extensions. First, we need to put $wgCrossSiteAJAXdomains entry on LocalSettings.php. The parameter can take single entry or array of string. All the entry in this parameter is the whitelist domain. The whitelist domain is needed to implemented in PKC's implementation to enable API Function Calls from other micro services. Below is the entry in LocalSettings.php

// Single Entry example
$wgCrossSiteAJAXdomains[] = '*.wikipedia.org';

// Multiple entry
$wgCrossSiteAJAXdomains = [
    'your.first.domain',
    'your.second.domain',
    'your.third.domain'
];

Then, Mediawiki API will add HTTP Header Response, in preflight or POST, to allow browser using Cross-Origin-Resource-Sharing. Below is the example to enable QuantUX to perform API calls in PKC Implementation

// Enable CORS on PKC Implementation
$wgCrossSiteAJAXdomains = [
  'https://qtux.pkc-dev.org',
  'pkc-dev.org'
];

Sample API Calls

This is the example to perform parse method on Mediawiki API, calling the page with the title of Data Science, from https://pkc-dev.org.

1. Put Origin on Parameter
2. Put Origin on Headers

Sample on cURL

curl --location \
--request POST 'https://pkc-dev.org/api.php?action=parse&format=json&origin=https://qtux.pkc-dev.org' \
--header 'Origin: https://qtux.pkc-dev.org' \
--form 'page="Data Science"'

Then, entry in Origin, will be cross checked with entry in $, below are the example output

< HTTP/1.1 200 OK
< Server: nginx/1.18.0 (Ubuntu)
< Date: Thu, 11 Aug 2022 17:29:32 GMT
< Content-Type: application/json; charset=utf-8
< Content-Length: 31443
< Connection: keep-alive
< X-Powered-By: PHP/7.4.28
< X-Content-Type-Options: nosniff
< Access-Control-Allow-Origin: https://qtux.pkc-dev.org
< Access-Control-Allow-Credentials: true
< Timing-Allow-Origin: https://qtux.pkc-dev.org
< Access-Control-Expose-Headers: MediaWiki-API-Error, Retry-After, X-Database-Lag, MediaWiki-Login-Suppressed
< X-Frame-Options: DENY
< Content-Disposition: inline; filename=api-result.json
< Set-Cookie: UseDC=master; expires=Thu, 11-Aug-2022 17:29:42 GMT; Max-Age=10; path=/; HttpOnly
< Set-Cookie: UseCDNCache=false; expires=Thu, 11-Aug-2022 17:29:42 GMT; Max-Age=10; path=/; HttpOnly
< Vary: Accept-Encoding,Origin,Accept-Language,Treat-as-Untrusted,Cookie
< Cache-Control: private, must-revalidate, max-age=0
< X-Request-Id: e2581f81ee0b07bbe65aa4e2
< 

Mediawiki API will put HTTP Header Response as Access-Control-Allow-Origin: https://qtux.pkc-dev.org, which will enable the browser to use the CORS. Below are the example which the CORS is not enable.

< HTTP/1.1 200 OK
< Server: nginx/1.18.0 (Ubuntu)
< Date: Thu, 11 Aug 2022 17:34:01 GMT
< Content-Type: application/json; charset=utf-8
< Content-Length: 351
< Connection: keep-alive
< X-Powered-By: PHP/7.4.28
< X-Content-Type-Options: nosniff
< MediaWiki-CORS-Rejection: Origin mismatch

Mediawiki API will shows MediaWiki-CORS-Rejection: Origin mismatch as the result that origin is not listed in $wg