Wikipedia viewer API, Jquery does send query to servers

Hi,
I’ve been wrestling with this problem for quite a bit and I think it’s time to ask for help.
In this codepen I used .get() and .ajax() commands and yet I do not get the results I want. I have checked the URL and it does work when I copy it over to the browser.

I found the following root of the problem in network console. From here I’m not sure where to go.

Here is the link to my codepen: https://codepen.io/andreibuiza/pen/mEbmKR?editors=1010

Thank you for your support :slight_smile:

Try to add this

datatype: jsonp

Hi thank you for your reply but it did not work. My HTTP request still fails.

Hi, I’ve done a fork and commented a couple of things. if you have doubts (about the comments) please ask me.

// https://codepen.io/erretres/pen/MeWyLP?editors=1010

3 Likes

Wow that works! Can you please explain why adding the extra parameter in the ajax request made this work? I’m quite confused since I have never used it this way before.

1 Like

(using // https://codepen.io/andreibuiza/pen/mEbmKR?editors=1010 and opera for the test).

1.- In the opera (browser) console this was the error:

XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&format=json&datatype=jsonp&prop=extracts&exsentences=3&exintro=1&explaintext=1&titles=albert. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://s.codepen.io’ is therefore not allowed access.

XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&format=json&datatype=jsonp&prop=extracts&exsentences=3&exintro=1&explaintext=1&titles=albert. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://s.codepen.io’ is therefore not allowed access.

2.- Ok, now to the mozilla developer network ( // https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS):

A resource makes a cross-origin HTTP request when it requests a resource from a different domain than the one which the first resource itself serves. For example, an HTML page served from http://domain-a.com makes an src request for http://domain-b.com/image.jpg. Many pages on the web today load resources like CSS stylesheets, images and scripts from separate domains.

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest follows the same-origin policy. So, a web application using XMLHttpRequest could only make HTTP requests to its own domain. To improve web applications, developers asked browser vendors to allow XMLHttpRequest to make cross-domain requests.

But this new standard means servers have to handle new request and response headers

Examples of access control scenarios

For example, suppose web content on domain http://foo.example wishes to invoke content on domain http://bar.other. Code of this sort might be used within JavaScript deployed on foo.example:

Let us look at what the browser will send the server in this case, and let’s see how the server responds:

GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
Origin: http://foo.example

Note that the main HTTP request header of note here is the Origin: header … above, which shows that the invocation is coming from content on the the domain http://foo.example.

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

[XML Data]

show the HTTP response from the server on domain http://bar.other. In response, the server sends back an Access-Control-Allow-Origin: header, shown above … The use of the Origin: header and of Access-Control-Allow-Origin: show the access control protocol in its simplest use. In this case, the server responds with a Access-Control-Allow-Origin: * which means that the resource can be accessed by any domain in a cross-site manner.

3.- Let’s take a look to the headers (of the “albert” search):

Request Headers (10)
:authority:en.wikipedia.org
:method:GET
:path:/w/api.php?action=query&format=json&datatype=jsonp&prop=extracts&exsentences=3&exintro=1&explaintext=1&titles=albert
:scheme:https
accept:/
accept-encoding:gzip, deflate, lzma, sdch
accept-language:es-ES,es;q=0.8
origin:https://s.codepen.io
referer:https://s.codepen.io/andreibuiza/debug/mEbmKR?editors=1010
user-agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36 OPR/37.0.2178.43

Response Headers(24)
accept-ranges:bytes
age:0
backend-timing:D=36806 t=1464437268473541
cache-control:private, must-revalidate, max-age=0
content-encoding:gzip
content-length:179
content-type:application/json; charset=utf-8
date:Sat, 28 May 2016 12:07:48 GMT
p3p:CP="This is not a P3P policy! See https://en.wikipedia.org/wiki/Special:CentralAutoLogin/P3P for more info."
server:mw1225.eqiad.wmnet
set-cookie:WMF-Last-Access=28-May-2016;Path=/;HttpOnly;secure;Expires=Wed, 29 Jun 2016 12:00:00 GMT
set-cookie:CP=H2; Path=/; secure
set-cookie:GeoIP=[country]:[city]; Path=/; secure; Domain=.wikipedia.org
status:200
strict-transport-security:max-age=31536000; includeSubDomains; preload
vary:Accept-Encoding,Treat-as-Untrusted,X-Forwarded-Proto,Cookie,Authorization
via:1.1 varnish, 1.1 varnish
x-analytics:https=1;nocookies=1
x-cache:cp1053 miss, cp1067 miss
x-client-ip:
x-content-type-options:nosniff
x-frame-options:SAMEORIGIN
x-powered-by:HHVM/3.12.1
x-varnish:4041760055, 1651964881

4.- ¿what is the error?:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://s.codepen.io’ is therefore not allowed access.

5.- is true, there is no Response header ‘Access-Control-Allow-Origin:*’ or ‘Access-Control-Allow-Origin:https://s.codepen.io

6.- but ¿ why adding “dataType: ‘jsonp’,” work?

From // http://www.json-p.org :

" Cross-domain Ajax – brief introduction

The same-origin policy in browsers dictates that certain types of data transfer in the browser layer (via JavaScript) must be restricted to only occur if the target resource’s domain is identical to the page making the request. This policy is in place in all modern browsers to help protect users from unwanted or unsafe malicious JavaScript behaviors.

… cross-domain Ajax done properly seeks to make such communication using techniques which, for various reasons, are not subject to the same-origin policy.

… One such mechanism which can request content cross-domain is the script tag. In December 2005, Bob Ippolito formally proposed JSONP (later dubbed JSON-P, or JSON-with-padding) as a way to leverage this property of script tags to be able to request data in the JSON format across domains. JSON-P works by making a script element (either in HTML markup or inserted into the DOM via JavaScript), which requests to a remote data service location. The response (the loaded “JavaScript” content) is the name of a function pre-defined on the requesting web page, with the parameter being passed to it being the JSON data being requested. When the script executes, the function is called and passed the JSON data, allowing the requesting page to receive and process the data."

5 Likes

Thank you for this good example you gave me, I really appreciate it.

Now I wonder what is the advantage of not enabling Access-Control-Allow-Origin:* on Wikipedia’s server when this can be simply overcome by adding jsonp on ajax request?

What could the admins of wikipedia’s servers be thinking to protect against?

Reading the last paragraph, script tags (I’m thinking you mean the script tag that enclose the Javascript code in an HTML page) are able to overcome this security feature. So does this mean Web Server Applications (Backend) cannot overcome this feature?

you’re welcome :slight_smile:

I think is the other way, they are enforcing the same-origin policy (they dont should send a response header with Access-Control-Allow-Origin). jsonp enables a way to bypass the same-origing policy.

from //http://www.json-p.org :

Thus far, JSON-P has essentially just been a loose definition by convention, when in reality the browser accepts any abitrary JavaScript in the response. This means that authors who rely on JSON-P for cross-domain Ajax are in fact opening themselves up to potentially just as much mayhem as was attempted to be avoided by implementing the same-origin policy in the first place. For instance, a malicious web service could return a function call for the JSON-P portion, but slip in another set of JavaScript logic that hacks the page into sending back private user’s data, etc.

JSON-P is, for that reason, seen by many as an unsafe and hacky approach to cross-domain Ajax, and for good reason. Authors must be diligent to only make such calls to remote web services that they either control or implicitly trust, so as not to subject their users to harm.

I think that could be an example of xxs (cross site scripting attack) //Cross-site scripting - Wikipedia

  • erretres

I had this same error and the conversation about same-origin-policy and jsonp was really helpful! I wanted to implement this without using ajax and found that when the URL includes “callback=?” it gets treated as jsonp and makes a good workaround. I just added “&callback=?” to the end of my URL in the getJSON request and the error went away.

3 Likes

You can also work around this without using JSONP. :smile:

You can enable Wikipedia to set the Access-Control-Allow-Origin in their response by adding “&origin=*” to the end of your request URL and keeping everything else in your request set to JSON. This allows requests to come from anywhere, not just Wikimedia sites.

I wrote an article about it here; I guess it’s a recent addition to the Wikipedia API functionality that hasn’t been explained very clearly in the documentation.

10 Likes

+1 Works perfectly, no funny hacks whatsoever.

Works like a charm! :smiley:

Thanks, it works perfectly

Thanks @gcamacho079!!