Wikipaedia viewer and cross site scripting

1

Hi. I’m struggling with the wikipedia viewer and think its due to the cross-site scripting issue.
My code looks like this:

but doesn’t return anything or populate the wikiText element. If I replace the wikipedia source with a local file, everything works.
All the solutions I’ve found refer to server-side solutions and server proxies, but as this challenge is in the Front End section I assume there is a way to ocercome the cross-site scripting.
Any guidance from the clever people?

2

oops - I don’t know what happened to my code snippet

       <script>
           $(document).ready(function() {
               $("#wikiBtn").click(function(){
                   alert("btn click");
                   $("#wikiText").load("http://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exintro=&titles=Stack%20Overflow");
               });
           });
        </script>

Edit [JB] (I fixed up you code snippet for you, should display fine now)

3

Either use jsonp or a proxy like https://crossorigin.me/

4

@JScher, thanks for the guidance, I’ll try to get my head around jsonp. I think a FCC challenge or two on jsonp and cross-site scripting could be a good idea as I spent days stumbling around why I was getting nothing returned.

1 Like
5

using jsonp, just means to add a p to the end of data type json.

In a way, it’s a un secure work around. You should only use it with trusted sites. There are some APIs that simply require it, like Reddit’s API for example.

6

@sethkoch - thanks for the explanation. However I got twitchy about the ‘un secure work around’ so did more digging. it seems like CORS is the way to go (certainly for the future, but I can’t quite get it to work with wikipedia. So I’ll go with JSONP for now, and then revisit it when I’ve learnt more - maybe when I get to the backend stuff I’ll understand more about passing data up and down.

7

Is it the case that Wikipedia just isn’t supporting CORS correctly?
I’m curious why I didn’t need to use JSONP when making the Random Quote Machine and the Weather App.

8

Good observation about the weather app DustinX. Maybe some clever guys out there can give insight.
I stumbled around a lot on this one, so could quite easily have got the CORS stuff wrong with wikipedia. I’m trying to find a good dummies level tutorial on Callbacks (one that I can understand) but no luck so far.