[SymfonyProfiler] Cannot Edit when key contains double quotes

[matthieu-k]

Hello,

I noticed an issue while editing message on Symfony Profiler. The Edit button is not clickable when the key contains a double quote. The console show an error message.

When I checked the sources, I remarked that the value of the onclick attribute is written inside single quotes instead of double quotes and vice-versa for the argument of getEditForm function. I'm not sure why this was done in this way but I was able to fix this by inversing the quotes, to double to single and to single to double:

File: /php-translation/symfony-bundle/Resources/views/SymfonyProfiler/translation.html.twig:
<a class="edit btn btn-sm" href="javascript:void(0);" onclick='getEditForm("{{ key }}")'>Edit</a>
to
<a class="edit btn btn-sm" href="javascript:void(0);" onclick="getEditForm('{{ key }}')">Edit</a>

File: php-translation/symfony-bundle/Resources/views/SymfonyProfiler/edit.html.twig

<input type="button" class="btn btn-sm" value="Save" onclick='saveEditForm("{{ key }}", document.getElementById("edit_{{ key }}").value)'>
<input type="button" class="btn btn-sm" value="Cancel" onclick='cancelEditForm("{{ key }}", "{{ message.translation }}")'>

to

<input type="button" class="btn btn-sm" value="Save" onclick="saveEditForm('{{ key }}', document.getElementById('edit_{{ key }}').value)">
<input type="button" class="btn btn-sm" value="Cancel" onclick="cancelEditForm('{{ key }}', '{{ message.translation }}')">

Before making a pull request, I'm wondering if the single quotes are initially there for some reason ?

Thanks

[welcoMattic]

Hello @matthewkp,

We will have the reversed problem if we reverse the quotes: key containing single will break the HTML/JS behaviour. I think that we have to escape the key content in order to fix the JS issue, and clear the escape on server side to handle the key properly.

[matthieu-k]

Hello @welcoMattic,

Thanks for the answer, you're right, how I miss that !

I tried a couple of combinations of escaping the key message and then decoding the message on server side, however the same has to be done upon cancelling which is handled in JavaScript. There were so many combinations to test so I ended up with another solution where the key message is hidden in a textarea in raw with no escape. Then in JavaScript, instead of passing the key message in the argument of the function, I'm looking the value of the hidden textarea and send it via ajax.

For now, I forked it here with this fix, you can see the changes here: matthieu-k@4d61653

What do you think of this approach ?