如何在JavaScript中从Twig安全地打印字符串变量

本文概述

• 安全地在JavaScript字符串中打印Twig值
• 安全地将数组打印到json

语言之间的互操作性一直是一个问题, 因为这种事情是可能的。在网络技术中, 相当复杂, 因为出错会导致你的Web应用程序不可用, 例如, 如果你从PHP向JavaScript发送字符串变量但未正确转义, 则JavaScript可能会引发异常, 并且你的应用程序将无法正常工作。

Twig, 模板引擎不是该功能的例外, 并且如果你将不安全的内容打印到JavaScript中, 则你的应用程序可能也不起作用。例如, 考虑以下代码片段：

{% set username = "sdkcarlos" %}

{# Note the multiline string ! #}
{% set userdescription = " Hello, This is my description
" %}

<script>
    var userName = "{{- username -}}";
    var description = "{{- userdescription-}}";
</script>

上一个Twig片段将打印以下HTML：

<script>
    var userName = "sdkcarlos";
    var description = " Hello, This is my description
";
</script>

此代码将在每个理智的浏览器上引发以下js异常：未捕获的SyntaxError：无效或意外的令牌。

安全地在JavaScript字符串中打印Twig值

幸运的是, Twig使每个人都很轻松。默认情况下, 它不会将内容转义为JS格式, 因为到处都不需要, 所以这就是为什么你需要在js模式下使用转义过滤器指示这种行为的原因。转义过滤器转义字符串以安全地插入最终输出。它根据模板上下文支持不同的转义策略。 e过滤器只是使其更短的别名, 因此你可以使用所需的过滤器, 因为它是相同的：

{% set username = "sdkcarlos" %}

{# Note the multiline string ! #}
{% set userdescription = " Hello, This is my description
" %}

<script>
    var userName = "{{- username|escape("js") -}}";
    var description = "{{- userdescription|escape("js") -}}";
    
    {# Or using e for a shorter syntax #}
    var userName = "{{- username|e("js") -}}";
    var description = "{{- userdescription|e("js") -}}"
</script>

现在, 使用此过滤器打印的每个变量都可以安全地在JavaScript字符串中打印, 并且你不必担心你的应用是否会因为用户内容不安全而失败。上一个代码片段将打印：

<script>
    var userName = "sdkcarlos";
    var description = "\x20Hello, \x0AThis\x20is\x20my\x20description\x0A";
</script>

在JavaScript上下文中这是完全有效的。如你所见, 该字符串包含在HTML版本中, 这些奇怪的字符对于JavaScript是安全的, 并在JavaScript引擎解析代码期间转换为人类可读的版本, 例如：

安全地将数组打印到json

其他开发人员决定使用JavaScript可以使用的数据传递整个数组, 而不是使用纯字符串。为此, 你可以使用json_encode过滤器, 该过滤器会自动转义要由JavaScript安全使用的数组内容：

{% set myData = {
    "a": "Complex String Data", "b": 12345, "c": "Hello, Multiline String
    "
}%}

<script>
    var myData = {{ myData|json_encode() }};
</script>

但是, 你还需要使用原始过滤器来在Twig中将字符串作为文字打印, 否则html实体将被转换和打印, 例如：

<script>
    var myData = {&quot;a&quot;:&quot;Complex String Data&quot;, &quot;b&quot;:12345, &quot;c&quot;:&quot;Hello, \n        Multiline String\n    &quot;};
</script>

因此, 请不要忘记在json_encode之后使用原始过滤器：

{% set myData = {
    "a": "Complex String Data", "b": 12345, "c": "Hello, Multiline String
    "
}%}

<script>
    var myData = {{ myData|json_encode()|raw }};
</script>

现在, 我们将从JavaScript中获得Twig的安全数组：

<script>
    var myData = {"a":"Complex String Data", "b":12345, "c":"Hello, \n        Multiline String\n    "};
</script>

编码愉快！