127

I'm looking at this Railscast episode and wondering why the call to escape_javascript is needed here:

$("#reviews").append("<%= escape_javascript(render(:partial => @review)) %>");

What is escape_javascript used for?

According to the Rails docs:

escape_javascript(javascript)

Escape carrier returns and single and double quotes for JavaScript segments.

But that doesn't mean much to me.

1
  • 25
    FYI, the accepted answer here is not the correct answer. Kikito's is
    – Steve
    Jun 4, 2013 at 5:56

4 Answers 4

381

It's easier to understand if you split the code in two parts.

The first part $("#reviews").append("<%= ... %>"); is javascript with erb. This means that the <%= ... %> will be replaced by whatever the ruby code inside of it returns. The result of that replacement must be valid javascript, otherwise it will throw an error when the client tries to process it. So that's the first thing: you need valid javascript.

Another thing to take into account is that whatever ruby generates must be contained inside a javascript string with double quotes - notice the double quotes around the <%= ... %>. This means that the generated javascript will look like this:

$("#reviews").append("...");

Now let's examine the ruby part inside the <%= ... %>. What does render(:partial => @review) do? It is rendering a partial - which means that it could be rendering any kind of code - html, css ... or even more javascript!

So, what happens if our partial contains some simple html, like this one?

<a href="/mycontroller/myaction">Action!</a> 

Remember that your javascript was taking a double-quoted string as a parameter? If we simply replace the <%= ... %> with the code of that partial, then we have a problem - immediately after the href= there is a double quote! The javascript will not be valid:

// Without escaping, you get a broken javascript string at href
$("#reviews").append("<a href="/mycontroller/myaction">Action!</a>");

In order for this not to happen, you want to escape these special characters so your string is not cut - you need something that generates this instead:

<a href=\"/mycontroller/myaction\">Action!</a>

This what escape_javascript does. It makes sure that the string returned will not "break" javascript. If you use it, you will get the desired output:

$("#reviews").append("<a href=\"/mycontroller/myaction\">Action!</a>")

Regards!

7
  • 4
    indeed, very nice explanation thank you. I guess then using 'escape_javascript' is kind of misleading because we're not actually using it to escape actual javascript. You can put a script tag in the partial and execute any javascript you want.
    – Steve
    Jun 4, 2013 at 5:50
  • 13
    @Steve agreed, a better name would be escape_for_javascript, since often you are escaping other code (html for example) so that it doesn't break javascript.
    – kikito
    Jun 4, 2013 at 8:52
  • 14
    escape_javascript() has now a shorter method: simpley j() (in Rails 4 at least).
    – mjnissim
    Aug 16, 2013 at 19:56
  • @kikito, does using this effect me trying to render an html partial that consist of a remote form? I'm trying to find out why rendering a partial with javascript that includes another form that will submit via javascript causes the second request to be html instead of js. If you have time, could you please look at the question I already posted regarding this? Thanks! My question
    – Jake Smith
    Mar 27, 2014 at 6:16
  • 1
    @JakeSmith answered in your question
    – kikito
    Mar 27, 2014 at 11:33
10

users may post malicious code (malicious users) that if left unescaped will potentially get executed, allowing users to control your application.

try this:

<% variable = '"); alert("hi there' %>
$("#reviews").append("<%= variable %>");

not really familiar with the syntax of rails, but if you don't escape variable then an alert box will show, and i dont think that is intended behaviour.

9

If you look at the source here, it will be much clearer.

This function accomplishes the following two things:

  1. It substitutes the characters in the input string with the ones defined in JS_ESCAPE_MAP

    The purpose of this is to make sure that the javascript code is serialized correctly without interfering with the outer string within which it is being embedded. For example if you have a javascript string in double quotes then all the quotes within for string literals must be in single quotes to avoid the code from breaking.

  2. The function also checks if the resulting string is html safe. If it is not then it does the necessary escaping to make sure that the string becomes html safe and returns the result.

When you are using escape_javascript, it is usually being embedded within another string or existing html dynamically. You need to make sure that doing this will not make your entire page not render.

Some aspects of this response were pointed out in other responses but I wanted to bring all the items together include the difference between javascript escaping and html escaping. Also, some responses allude that this function helps to avoid script injection. I don't think that is the purpose of this function. For example, in your review if your review has alert('hi there'), just appending it to the node will not fire the pop-up. You are not embedding it within a function that is triggered on page load or through some other event. Merely having alert('hi there') as part of your html does not mean that it will execute as javascript.

That said I am not denying that script injection is not possible. But to avoid that you need to take steps when you take the user data and store it in your database. The function and example you are providing are related to rendering the information, which was already saved.

I hope this helps and answers your question.

-5

Because you don't want users posting JavaScript that the browser actually executes?

3
  • 4
    But how about when you want to pass and render javascript code?
    – berto77
    Feb 22, 2012 at 3:38
  • Yeah, actually it's more of a formatting method. It doesn't prevent users from executing their own javascript. Nothing can prevent that. Feb 23, 2015 at 1:31
  • 5
    This isn't helpful. See kikito's answer instead.
    – nitsas
    Dec 2, 2016 at 9:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.