Not able to pass object in a function Javascript

Question

Following is my plnkr, which is working fine If I am not passing any parameter to my open1 method, but I need to pass an object in $scope.open1 method but it is throwing error.

Let me know what I am doing wrong.

Plnkr - http://plnkr.co/edit/dzYfy1qtmBD3ng804nXR?p=preview

Code where I am facing issue -

  function imageHtml(data, type, full, meta) {
    // Error here
    var testData = {"key1": "val1", "key2": "val2"};
        return '<img src="'+data+'" ng-click="open1('+testData+')" />';
    }

I am alerting data via this method -

  $scope.open1 = function(data) {
    alert(data);
  };

EDIT -

Data needs to be pass on image click.

important dev note: **never** build and then set HTML using strings. It's not 1998 anymore, we learned many times over that this is an incredibly bad, and even dangerous, thing to do. Instead, create an image element (using document.createElement), set its attributes (using setAttribute) and then return that DOM node, so that you insert it where it is needed. Don't build strings. — Mike 'Pomax' Kamermans, Oct 12 '15 at 17:46
That's a ridiculous statement @Mike'Pomax'Kamermans .. what do you think gets put to `$templateCache` ? — charlietfl, Oct 12 '15 at 17:48
@Mike'Pomax'Kamermans It is how angular datatables manipulating the cell data http://l-lin.github.io/angular-datatables/#/bindAngularDirective — Tech Solvr, Oct 12 '15 at 17:48
@charlietfl no idea, and that doesn't particularly matter either if `data` or `testdata` contains user-generated content. A nice `'> — Mike 'Pomax' Kamermans, Oct 12 '15 at 17:53
@TechSolvr note that in that example (the JS section) you can defend it by demonstrating only safe values get used (`data.id` can only be numerical). The code in your question, however, deals with unrestricted data, and is a potential XSS or worse, waiting to happen. — Mike 'Pomax' Kamermans, Oct 12 '15 at 17:56
@charlietfl great, feel free to link TechSolvr to more information on that, so they can understand when it's safe, and when it's not safe, to inject data. Highly restricted data: ideally not by generating plain strings, but if you must because of your MVC choice, go for it. Unrestricted data: not even once. — Mike 'Pomax' Kamermans, Oct 12 '15 at 17:58
@Mike'Pomax'Kamermans Can you share a link to read more about it as its my first time I am aware of this so dont have much info — Tech Solvr, Oct 12 '15 at 18:00
You bet. https://www.owasp.org is filled with lots of information on what not to do on the web if you want to offer a secure site, XSS in particular is covered as FAQ on https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet and in more detail on https://www.owasp.org/index.php/XSS. In this particular case, your code allows for stored XSS. — Mike 'Pomax' Kamermans, Oct 12 '15 at 18:06
@Mike'Pomax'Kamermans Thx a ton, I will surely go through these link :) — Tech Solvr, Oct 12 '15 at 18:09
Also, for OWASP maintains a top 10 of things not to do if you want a secure site, which is on https://www.owasp.org/index.php/Top_10, and a little easier to digest if you want to first familiarise yourself with just "what can happen" rather than "give me all the details" =) — Mike 'Pomax' Kamermans, Oct 12 '15 at 18:11

score 1 · Accepted Answer · answered Oct 12 '15 at 17:59

You need to json your object so it become a string for you to concatenate.

return '<img src="'+data+'" ng-click=\'open1('+JSON.stringify(testData)+')\' />';

Edit: Not sure if this would work if your data contains some single quotes. You might have to escape them.

score 0 · Answer 2 · answered Oct 12 '15 at 18:38

With special thanks to @Mike'Pomax'Kamermans I changed my data structure and now only using numbers, i.e data.id ..something like this -

function imageHtml(data, type, full, meta) {
    var dataId = parseInt(data.listId);
    return '<img src="'+data.ImageThumb+'" ng-click="open1('+dataId+')" />';
}

Feel free to correct me anytime.

Not able to pass object in a function Javascript

2 Answers2