Passing in javascript code through JSON causing error?

Question

I have the following code:

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '12345'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=12345&ev=PageView&noscript=1"
/></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->

which I want to pass into JSON so that my front end javascript can execute this and renders it in my client's browser.

I am taking this code, dump it through JSON and then render it my js file. like this:

  pixels = [ p.code for p in Pixel.query.all() ]
  return render_template('pixel/master_pixel.html',
                         pixels_json=json.dumps(pixels))

This is how my front end will parse it:

pixels = "{{ pixels_json }}";     // Rendered by jinja
pixels = JSON.parse(pixels);

I ran this and I got the following:

<html>
  <body>

  <script>
pixels = "[&#34;&lt;!-- Facebook Pixel Code --&gt;\r\n&lt;script&gt;\r\n!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?\r\nn.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;\r\nn.push=n;n.loaded=!0;n.version=&#39;2.0&#39;;n.queue=[];t=b.createElement(e);t.async=!0;\r\nt.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,\r\ndocument,&#39;script&#39;,&#39;https://connect.facebook.net/en_US/fbevents.js&#39;);\r\nfbq(&#39;init&#39;, &#39;325091591183913&#39;); // Insert your pixel ID here.\r\nfbq(&#39;track&#39;, &#39;PageView&#39;); fbq(&#39;track&#39;, &#39;Lead&#39;);\r\n&lt;/script&gt;\r\n&lt;noscript&gt;&lt;img height=\&#34;1\&#34; width=\&#34;1\&#34; style=\&#34;display:none\&#34;\r\nsrc=\&#34;https://www.facebook.com/tr?id=325091591183913&amp;ev=PageView&amp;noscript=1\&#34;\r\n/&gt;&lt;/noscript&gt;\r\n&lt;!-- DO NOT MODIFY --&gt;\r\n&lt;!-- End Facebook Pixel Code --&gt;\r\n&#34;]";     // Rendered by jinja
pixels = JSON.parse(pixels);

for (var encoded in pixels) {
  var iframe = document.createElementById('iframe');
  iframe.open();
  iframe.write(encoded);
  iframe.close();
  document.body.appendChild(iframe);
}
  </script>

  </body>
</html>

I am getting this error in firefox:

VM5791:1 Uncaught SyntaxError: Unexpected token & in JSON at position 1
    at JSON.parse (<anonymous>)
    at master:6
(anonymous) @   master:6

Any ideas?

because your JSON string is not json. You do not html encode quotes. NOt sure why you are using entities in the whole thing. — epascarello, Apr 28 '17 at 12:15
@mtizziani OPs code is unminified - the first minified block is what they're working with as a template from FB. — James Thorpe, Apr 28 '17 at 12:20

score 0 · Answer 1 · edited May 23 '17 at 10:31

0

It looks like you are trying to parse a string into JavaScript and not JSON. JSON is a very strict data structure. I think what you want is eval() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

But be very careful when using eval(): Why is using the JavaScript eval function a bad idea?

edited May 23 '17 at 10:31

Community

1
1

answered Apr 28 '17 at 12:16

Eeks33

2,245
1
14
17

Passing in javascript code through JSON causing error?

1 Answers1