如何在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中从Twig安全地打印字符串变量】在JavaScript上下文中这是完全有效的。如你所见, 该字符串包含在HTML版本中, 这些奇怪的字符对于JavaScript是安全的, 并在JavaScript引擎解析代码期间转换为人类可读的版本, 例如：

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

{% set myData = http://www.srcmini.com/{"a": "Complex String Data", "b": 12345, "c": "Hello, Multiline String"}%}< script> var myData = http://www.srcmini.com/{{ myData|json_encode() }}; < /script>

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

< script> var myData = http://www.srcmini.com/{& quot; a& quot; :& quot; Complex String Data& quot; , & quot; b& quot; :12345, & quot; c& quot; :& quot; Hello, /nMultiline String/n& quot; }; < /script>

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

{% set myData = http://www.srcmini.com/{"a": "Complex String Data", "b": 12345, "c": "Hello, Multiline String"}%}< script> var myData = http://www.srcmini.com/{{ myData|json_encode()|raw }}; < /script>

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