views:

233

answers:

1

Once again I am faced with a great problem! :)

So, here is the stuff:

on the client side, I have a link. By clicking on it, jQuery makes a request to the server, gets response as HTML content, then popups UI dialog with that content.

Here is the code of the request-function:

function preview(){
    $.ajax({
        url: "/api/builder/",
        type: "post",
        //dataType: "html",
        data: {"script_tpl": $("#widget_code").text(),
               "widgets": $.toJSON(mwidgets), 
               "widx": "0"},
        success: function(data){
            //console.log(data)
            $("#previewArea").dialog({
                bgiframe: true,
                autoOpen: false,
                height: 600,
                width: 600,
                modal: true,
                buttons: {
                    "Cancel": function() {
                                $(this).dialog('destroy');
                              }
                }
            });
            //console.log(data.toString());
            $('#previewArea').attr("innerHTML", data.toString());
            $("#previewArea").dialog("open");
        },
        error: function(){
            console.log("shit happens");
        }
    })
}

The response (data) is:

<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <script type="text/javascript">var smakly_widget_sid = 0 ,widgets = [{"cols": "2","rows": "2","div_id": "smakly_widget","wid": "0","smakly_style": "small_image",}, ] </script>  <script type="text/javascript" src="/media/js/smak/smakme.js"></script>  </head>  <body>  preview <div id="smakly_widget" style="width:560px;height:550px"> </div>  </body> </html>

As you see, there is a script to load: smakme.js, somehow it doesn't execute in WebKit-based browsers (I tried in Safari and Chrome), but in Firefox, Internet Explorer and Opera it works as expected!

Here is that script:

String.prototype.format = function(){
    var pattern = /\{\d+\}/g;
    var args = arguments;
    return this.replace(pattern, function(capture){ return args[capture.match(/\d+/)]; });
}

var turl = "/widget"

var widgetCtrl = new(function(){

    this.render_widget = function (w, content){
        $("#" + w.div_id).append(content);
    }

    this.build_widgets = function(){
        for (var widx in widgets){
            var w = widgets[widx],
                iurl = '{0}?sid={1}&wid={2}&w={3}&h={4}&referer=http://ya.ru&amp;thrash={5}'.format(
                    turl, 
                    smakly_widget_sid, 
                    w.wid, 
                    w.cols, 
                    w.rows, 
                    Math.floor(Math.random()*1000).toString()),
                content = $('<iframe src="{0}" width="100%" height="100%"></iframe>'.format(iurl));
            this.render_widget(w, content);
        }
    }
})

$(document).ready(function(){
    widgetCtrl.build_widgets();
})

Is that some security issue, or anything else?

A: 

I think you need a reference to jQuery in the response (in any case it wouldn't hurt).

I tried to reproduce the problem by storing the HTML and JavaScript locally and I had to insert to a reference to jQuery. I used a reference to a Google version of jQuery and inserted it right after the line with meta:

<script
    type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;
</script>

However I saw no difference between Firefox 3.6 and Google Chrome 3.0.195.38. The script positively executed in Google Chrome when the jQuery reference was included.


A reformatted version of the response is (without the jQuery reference):

<html>
    <head>
        <meta
          http-equiv="Content-Type"
          content="text/html; charset=UTF-8">
        <script type="text/javascript">
          var smakly_widget_sid = 0 ,
              widgets =
                [
                  {
                    "cols": "2",
                    "rows": "2",
                    "div_id": "smakly_widget",
                    "wid": "0",
                    "smakly_style": "small_image",
                  },
                ]
        </script>

        <script
          type="text/javascript"
          src="/media/js/smak/smakme.js">
        </script>
    </head>

    <body>
        preview
        <div
          id="smakly_widget"
          style="width:560px;height:550px">
        </div>
    </body>
</html>
Peter Mortensen