Как безопасно напечатать строковую переменную из Twig в JavaScript

Содержание

1 Безопасная печать значения Twig внутри строки JavaScript
2 Безопасная печать массивов в json

Функциональная совместимость между языками была проблемой, поскольку такая возможность возможна. В веб-технологиях это довольно сложно, поскольку неправильные действия могут сделать ваше веб-приложение недоступным, например, если вы отправляете строковую переменную из PHP в JavaScript, не экранируя ее правильно, ваш JavaScript может вызвать исключение, и ваше приложение не будет работать.

Twig, механизм шаблонов не является исключением для этой функции, и если вы печатаете небезопасный контент в JavaScript, ваше приложение может не работать. Например, рассмотрим следующий фрагмент:

{% set username = "sdkcarlos" %}
{# Note the multiline string ! #}
{% set userdescription = " Hello,
This is my description
" %}
var userName = "{{- username -}}";
var description = "{{- userdescription-}}";

Предыдущий фрагмент Twig напечатает следующий HTML-код:


var userName = "sdkcarlos";
var description = " Hello,
This is my description
";

Этот код будет выдавать каждому здравомыслящему браузеру следующее исключение js: Uncaught SyntaxError: неверный или неожиданный токен.

Безопасная печать значения Twig внутри строки JavaScript

К счастью, Twig делает все довольно легко для всех. По умолчанию он не экранирует контент в формат JS, так как он не нужен везде, поэтому вы должны указать это поведение, используя escape фильтр в режиме js. Экранирующий фильтр экранирует строку для безопасной вставки в окончательный вывод. Он поддерживает различные стратегии выхода в зависимости от контекста шаблона. e Фильтр — это просто псевдоним, чтобы сделать его короче, поэтому вы можете использовать тот, который вам нужен, так как он такой же:

{% set username = "sdkcarlos" %}
{# Note the multiline string ! #}
{% set userdescription = " Hello,
This is my description
" %}
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") -}}"

Теперь каждая переменная, напечатанная этим фильтром, будет безопасна для печати внутри строки JavaScript, и вам не нужно беспокоиться о том, что ваше приложение потерпит неудачу из-за небезопасного пользовательского контента. Предыдущий фрагмент будет печатать:


var userName = "sdkcarlos";
var description = "\x20Hello,\x0AThis\x20is\x20my\x20description\x0A";

Что полностью допустимо в контексте JavaScript. Как вы можете видеть, строка содержит в версии HTML странные символы, которые безопасны для JavaScript и преобразуются во время синтаксического анализа кода механизмом JavaScript в читаемую человеком версию, например:

Безопасная печать массивов в json

Другие разработчики вместо простых строк решают передать целые массивы с данными, которые могут быть использованы JavaScript. Для этого вы можете использовать json_encode фильтр, который автоматически экранирует содержимое массива для безопасного использования JavaScript:

{% set myData = {
"a": "Complex String Data",
"b": 12345,
"c": "Hello,
Multiline String
"
}%}
var myData = {{ myData|json_encode() }};

Однако вам также необходимо использовать необработанный фильтр для печати строки как литерала в Twig, иначе HTML-сущности будут преобразованы и напечатаны, например:


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

Так что не забудьте использовать необработанный фильтр после json_encode:

{% set myData = {
"a": "Complex String Data",
"b": 12345,
"c": "Hello,
Multiline String
"
}%}
var myData = {{ myData|json_encode()|raw }};

Теперь мы получили бы безопасный массив из Twig, доступный в JavaScript:


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