0

I'd like to write a simple javascript embeddable widget that displays some information retrieved from the API of my application.

The API I'm building is written in Symfony2 and I'm trying to simply get the resulting JSON string and display it in a demo HTML page using javascript.

To get the JSON string I'm trying to use some code I found here on Stackoverflow.

The complete Javascript code I'm using is the following:

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
    if (request.readyState === 4) {
        if (request.status === 200) {
            document.body.className = 'ok';
        } else {
            document.body.className = 'error';
        }
    }
};

var url = 'http://127.0.0.1:8000/widget/1';

request.open("GET", url, true);
request.send(null);

document.getElementById('demo').innerHTML = request;

The HTML is a simple page like this:

<!DOCTYPE html>
<html lang="it">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="UTF-8" />
        <meta name="generator" content="Aerendir's Hands" />
        <title>Widget demo page</title>
    </head>
    <body>
        <h1>Pagina demo del widget di TrustBack.Me</h1>
    <p id="demo"></p>
        <script src="widget.js"></script>
    </body>
</html>

When I open http://localhost/demo.html, the Chrome console tells me:

XMLHttpRequest cannot load http://127.0.0.1:8000/widget/1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

I understand that this is a security measure to prevent some kind of Cross Site Scripting, but how Facebook can do those kind of requests with its widgets?

Fortunately I'm using http://127.0.0.1 and http://localhost, so this problem turned out immediately! (I think this is the cause of the error o.O).

How can I get the JSON string from my application to use it in my javascript code?

I'm really good at PHP and Symfony2, but I have no knowledge of JavaScript and this is my first attempt to learn it.

So I hope someone here can help me to better understand the mechanics behind a widget.

I've read a lot of posts about how to build a javascript widget here on Stackoverflow and on the Internet, but I cannot find something current: all resources I've found are old (max 2012) and I'm not sure they can be useful or still relevant.

Usually I read some documentation to have an idea of what to do and then I start trying, but in this case, as I have no previous knowledge about best practices and as I don't know the Javascript language, I cannot recognize good advices and cannot separate the current good advices from the old and useless ones.

I know Facebook uses iFrames and my knowledge and comprehension stops here.

Can someone put me on the right direction to achieve my goal?

My goal, in this moment, is to have a javascript variable with the json string returned by my remote API.

Thankyou in advance!

Community
  • 1
  • 1
Aerendir
  • 6,152
  • 9
  • 55
  • 108
  • 1
    Allow the domains you need (or use * to allow all) http://stackoverflow.com/questions/7564832/how-to-bypass-access-control-allow-origin – JimL Oct 04 '15 at 17:17
  • It works! `$response->headers->set('Access-Control-Allow-Origin', '*');`. Thank you! – Aerendir Oct 04 '15 at 17:27
  • Also if I think this is not the best way to achieve my goal, for the moment I think it is sufficient: this solution doesn't make me feel really secure o.O – Aerendir Oct 04 '15 at 17:28
  • 1
    Write it up as an answer with some additional info and maybe an alternative solution like making the request to the same domain and then server-to-server to the other domain. – markus Oct 04 '15 at 17:41

0 Answers0