Preventing Twig from escaping JSON

[NotionCommotion]

types is an array or object.  How do I prevent it from being escaped?  Thanks

{% set _jsScript = [
'var types=$.parseJSON('~types|json_encode()|raw~');'
] %}

{% macro listArray(list) %}
{% for item in list %}
{{ item }}
{% endfor %}
{% endmacro %}

{% if _jsScript|default %}
<script type="text/javascript">
    {{ forms.listArray(_jsScript) }}
</script>
{% endif %}

[NotionCommotion]

Ah, I see.

{% set _jsScript = [
'var types='~types|json_encode()~';'
] %}

{% macro listArray(list) %}
{% for item in list %}
{{ item|raw }}
{% endfor %}
{% endmacro %}

{% if _jsScript|default %}
<script type="text/javascript">
    {{ forms.listArray(_jsScript) }}
</script>
{% endif %}

[Jacques1]

json_encode() is not secure within JavaScript code. And I might add: It's also very poor spaghetti code.

 

If you want to read data from the server, use Ajax or put the JSON-encoded data into a hidden HTML element. Do not generate dynamic JavaScript code.

[NotionCommotion]

If you want to read data from the server, ... put the JSON-encoded data into a hidden HTML element.

 

Please give an example.  Thanks

[NotionCommotion]

Maybe?

<div id="myJSONdiv" data-json="<?php echo htmlentities(json_encode($jsonArray), ENT_QUOTES, 'UTF-8'); ?>"></div>

Edited August 16, 2016 by NotionCommotion

[NotionCommotion]

<div id="types" data-types="{{ types|json_encode() }}"></div>

Forgot I was using twig

Edited August 16, 2016 by NotionCommotion

[Jacques1]

If you go with data attributes, use an existing element like body (but not html, because a long attribute list can prevent the browser from finding the <meta charset> element).

 

But, yes, that's a valid approach.

[NotionCommotion]

Thanks Jacques, I will use an existing element.  Probably not body, however, as an extended template will be used to generate the the body tag, menu, etc.  Agree, or am I missing something?

[Jacques1]

It's fine. Pretty much anything other than inserting the data into a script context is OK.

[kicken]

I generally try and stick the data attribute with the json onto whatever element the script will be affecting. If you need to just pass some data to the script itself (say configuration info or whatever), you can stick the data attribute onto the script tag.

 

For example:

<script data-types="{{ types|json_encode() }}">
(function(){
    var types = $('script').last().data('types');
    console.log(types);
}());
</script>

[Jacques1]

You need to get rid of your inline scripts.

 

Not only is it, again, spaghetti code. It's also a major security issue, because the browser cannot easily distinguish between legitimate inline code and cross-site scripting attacks. When all scripts reside on external domains (or at least external files), you can block inline scripting entirely and whitelist the external scripts. But when your HTML markup is cluttered with inline scripts, your only chance is to go through each one of them and either whitelist its hash or implement secure nonces. Both is a lot more difficult.

 

So while you remove the HTML markup from your PHP scripts (which is great), you should also remove the inline styles and scripts from the HTML markup.

Edited August 17, 2016 by Jacques1