Manual:CORS

From MediaWiki.org
Jump to: navigation, search
This page is a translated version of the page Manual:CORS and the translation is 45% complete.

Outdated translations are marked like this.
Other languages:
català • ‎Deutsch • ‎English • ‎français • ‎italiano • ‎日本語 • ‎Bahasa Melayu • ‎Nederlands • ‎polski • ‎português • ‎português do Brasil

MediaWiki API は、$wgCrossSiteAJAXdomainsManual:$wgCrossSiteAJAXdomains が有効な場合 CORS (クロスドメインに資源を共用する仕組み) の要求を支援します。 This is used on Wikimedia sites to do things like allow image uploads directly to Commons from Wikipedia sites on the mobile interface.

This page details how to use CORS requests in your JavaScript code to communicate between wikis on different domains.

説明[edit]

For CORS requests to go through, you need to pass an origin parameter in the query string with the local wiki protocol+host as value (for example, https://www.mediawiki.org). This must match one of the values in $wgCrossSiteAJAXdomains on the foreign wiki.

If you wish the browser to use any cookies it might have for the domain, to keep the current user logged in, you also need to set the withCredentials field of XMLHttpRequest to true.

For anonymous requests, origin query string parameter can be set to * which will allow requests from anywhere.

Examples[edit]

In the examples below, we assume that the local wiki from which the requests originate is www.mediawiki.org, and that the foreign wiki which the requests target is en.wikipedia.org.

Using mediawiki.ForeignApi[edit]

MediaWiki バージョン: 1.26

The mediawiki.ForeignApi module is an extension of mediawiki.api which automatically handles the details for you.

An example that checks whether the user is logged in on the foreign wiki:

mw.loader.using( 'mediawiki.ForeignApi' ).done( function () {
    var api = new mw.ForeignApi( 'https://en.wikipedia.org/w/api.php' );
    api.get( {
        action: 'query',
        meta: 'userinfo'
    } ).done( function ( data ) {
        alert( 'Foreign user ' + data.query.userinfo.name +
            ' (ID ' + data.query.userinfo.id + ')' );
    } );
} );

A basic write API example. We're acquiring a csrf token and using it to set a persistent custom user preference that a gadget might use afterwards:

mw.loader.using( 'mediawiki.ForeignApi' ).done( function () {
    var api = new mw.ForeignApi( 'https://en.wikipedia.org/w/api.php' );
    api.get( {
        action: 'query',
        meta: 'tokens'
    } ).done( function ( data ) {
        api.post( {
            action: 'options',
            token: data.query.tokens.csrftoken,
            optionname: 'userjs-test',
            optionvalue: 'Hello world!'
        } );
    } );
} );

The same example can be rewritten more succinctly using some mediawiki.api helper methods, which are available for ForeignApi too:

mw.loader.using( 'mediawiki.ForeignApi' ).done( function () {
    var api = new mw.ForeignApi( 'https://en.wikipedia.org/w/api.php' );
    api.postWithToken( 'options', {
        action: 'options',
        optionname: 'userjs-test',
        optionvalue: 'Hello world!'
    } );
} );

Using jQuery methods[edit]

If you wish not to use mediawiki.api for whatever reason, or if you're curious how this works at a lower level, here's how to implement the same functionality using plain jQuery AJAX functionality. (You could even use plain XMLHttpRequest, but we're not that masochistic in this manual.)

An example that checks whether the user is logged in on the foreign wiki:

$.ajax( {
    url: 'https://en.wikipedia.org/w/api.php',
    data: {
        action: 'query',
        meta: 'userinfo',
        format: 'json',
        origin: 'https://www.mediawiki.org'
    },
    xhrFields: {
        withCredentials: true
    },
    dataType: 'json'
} ).done( function ( data ) {
    alert( 'Foreign user ' + data.query.userinfo.name +
        ' (ID ' + data.query.userinfo.id + ')' );
} );

A basic write API example:

$.ajax( {
    url: 'https://en.wikipedia.org/w/api.php',
    data: {
        action: 'query',
        meta: 'tokens',
        format: 'json',
        origin: 'https://www.mediawiki.org'
    },
    xhrFields: {
        withCredentials: true
    },
    dataType: 'json'
} ).done( function ( data ) {
    $.ajax( {
        url: 'https://en.wikipedia.org/w/api.php?origin=https://www.mediawiki.org',
        method: 'POST',
        data: {
            action: 'options',
            format: 'json',
            token: data.query.tokens.csrftoken,
            optionname: 'userjs-test',
            optionvalue: 'Hello world!'
        },
        xhrFields: {
            withCredentials: true
        },
        dataType: 'json'
    } );
} );

Note that origin is part of the URL since POST CORS requests are preflighted and the origin parameter must be included in the preflight request.

メカニズムの拡張機能[edit]

CentralAuth[edit]

MediaWiki バージョン: 1.26

CentralAuth allows your code to authenticate on the foreign wiki as the user currently logged in on the local wiki using a centralauthtoken. This guarantees that the same associated account will be used for actions on both wikis, unlike regular CORS (which requires the user to have previously logged in to the foreign wiki).

If both the local and foreign wiki have CentralAuth installed, the mediawiki.ForeignApi mechanism is seamlessly extended to handle this for you. If you're implementing it yourself, see Extension:CentralAuth/API#centralauthtoken for instructions on how to acquire a token (from the local wiki) and pass it to a request (to the foreign wiki).

Alternatives[edit]

For anonymous requests you can use the JSONP format instead. This is simpler but slightly less secure (it fetches and executes arbitrary Javascript code from the wiki so an attacker who took over the MediaWiki site has an XSS vector against the remote site).