Practical prototype and scipt.aculo.us part 31 ppt

Figure 8-2. The code doesn’t sanitize user input. From a server-side perspective, failing to sanitize user input is a huge security risk. From a client-side perspective, it’s also a monkey wrench in your page design. If we’re not allowing HTML in blog comments, then we’ve got to escape the input so that every char- acter is treated as a literal value (see Figure 8-3): function updateLivePreview() { var commentText = $('comment_text').value.escapeHTML(); $('live_preview').update(commentText); } CHAPTER 8 ■ OTHER HELPFUL THINGS: USEFUL METHODS ON BUILT-INS172 Figure 8-3. Comment preview with escaped HTML String#escapeHTML finds characters with special meaning in HTML—specifically angle brackets ( <>)—and converts them to their HTML entity equivalents: "Never, <em>never</em> pour salt in your eyes.".escapeHTML(); //-> "Never, &lt;em&gt;never&lt;/em&gt; pour salt in your eyes." As you might expect, String#unescapeHTML does the exact opposite: "Never, &lt;em&gt;never&lt;/em&gt; pour salt in your eyes.".unescapeHTML(); //-> "Never, <em>never</em> pour salt in your eyes." So that’s one approach we can take. Another would be to ignore anything that looks like HTML, rather than display it liter ally: "Never, <em>never</em> pour salt in your eyes.".stripTags(); //-> "Never, never pour salt in your eyes." CHAPTER 8 ■ OTHER HELPFUL THINGS: USEFUL METHODS ON BUILT-INS 173 In fact, this solution better captures the commenter’s original intent. String#stripTags removes all HTML from a string, leaving behind only plain text (see Figure 8-4). ■Caution Never, ever use client-side sanitization as a replacement for server-side sanitization. Client-side sanitization is trivial to bypass and gives you a false sense of security. Instead, decide how the server will handle unusual input, and then write client-side code to mirror that behavior. Live comment preview is a UI feature—not a security measure. Figure 8-4. HTML no longer has an effect on the page. The camelize, underscore, and dasherize Methods These string-formatting methods spring from identical methods in the popular Rails framework. They’re used to convert between different methods of word delimiting. I’ll let the code explain itself: "lorem-ipsum-dolor".underscore(); //-> "lorem_ipsum_dolor" "lorem_ipsum_dolor".dasherize(); //-> "lorem-ipsum-dolor" "lorem-ipsum-dolor".camelize(); //-> "loremIpsumDolor" CHAPTER 8 ■ OTHER HELPFUL THINGS: USEFUL METHODS ON BUILT-INS174 You can see that underscore converts hyphens to underscores, dasherize converts underscores to hyphens (yes, hyphens, even though the method calls them dashes!), and camelize removes hyphens while capitalizing the letters that follow (otherwise known as camel case). For instance, Prototype allows you to call Element#setStyle and pass CSS property names in either their hyphenated or their camelized variants: $('foo').setStyle({ paddingBottom: '10px' }); $('foo').setStyle({ 'padding-bottom': '10px' }); Element#setStyle makes this possible by calling String#camelize to ensure that all property names are in camel case. The capitalize and truncate Methods These methods format strings so that they’re fit for user consumption. String#capitalize will convert the first letter of a string to uppercase and all other letters to lowercase: "never".capitalize(); //-> "Never"; "NEVER".capitalize(); //-> "Never"; "Never".capitalize(); //-> "Never"; String#truncate is quite interesting. It will return the first n characters of a string, along with an ellipsis to indicate the truncation: var warning = "Never, never pour salt in your eyes." var truncation = warning.truncate(15); //-> "Never, never " truncation.length; //-> 15 The first argument, naturally, indicates how long you’d like the resulting string to be. The optional second argument lets you specify a custom truncation, if you’re not a fan of the default ( ). Keep in mind that the length of the truncation is included in the length of the returned string. var otherTruncation = warning.truncate(20, ">>>>>"); //-> "Never, never po>>>>>" CHAPTER 8 ■ OTHER HELPFUL THINGS: USEFUL METHODS ON BUILT-INS 175 The include, startsWith, endsWith, empty, and blank Methods Last of all are five methods that test the content of strings. All five return a Boolean— true or false. String#include tests for a simple substring match. String#startsWith and String#endsWith do the same, but test whether the anchored substring exists at the beginning or the end of the string, respectively: var warning = "Never, never pour salt in your eyes." warning.include("salt"); //-> true warning.startsWith("salt"); //-> false warning.startsWith("N"); //-> true warning.startsWith("n"); //-> false warning.endsWith("your eyes.") //-> true All three of these methods are case sensitive. String#empty and String#blank take no arguments—they simply test if the string is empty (has a length of 0) or blank (contains only whitespace): " ".blank(); //-> true " ".empty(); //-> false "".empty(); //-> true "".blank(); //-> true All empty strings are blank, but not all blank strings are empty. The Template Class and String Interpolation Think of your favorite programming language right now. (If your favorite language is JavaScript, you’re an anomaly. Think of your second favorite.) The language you’re think- ing of certainly has some handy way of mixing variables into existing strings. P HP and Ruby, for instance, give us v ariable interpolation : // PHP: echo "Touchdown scored by ${position} ${first_name} ${last_name}!"; // Ruby: puts "Touchdown scored by #{position} #{first_name} #{last_name}!"; CHAPTER 8 ■ OTHER HELPFUL THINGS: USEFUL METHODS ON BUILT-INS176 In both these languages, we can mark certain parts of a string to be replaced by vari- ables. We notify the language’s interpreter by using a special pattern in the string. JavaScript doesn’t have variable interpolation, but since when has that stopped us? We can fake it. Using the Template Class Prototype gives us a class named Template. Let’s play around with it. var t = new Template("The quick brown #{first} jumps over the lazy #{second}."); We declare a new instance of Template and pass it a string. You should recognize the special syntax we use inside the string—it’s identical to Ruby’s. Now we can use this template over and over again, passing different values for inter- polation, with Template#evaluate: t.evaluate({ first: "fox", second: "dog" }); //-> "The quick brown fox jumps over the lazy dog." t.evaluate({ first: "yak", second: "emu" }); //-> "The quick brown yak jumps over the lazy emu." t.evaluate({ first: "tree", second: "human" }); //-> "The quick brown tree jumps over the lazy human." Ignore the increasing improbabilities of these statements. Instead, note that Template#evaluate takes one argument, an Object, with properties corresponding to the names we used in the original string. Note also that we need only create the template once—but we can use it over and over to generate strings that conform to the same pattern. Since an array is just a special kind of object with numeric property names, you can define a template that uses numbered replacements: var t = new Template("The quick brown #{0} jumps over the lazy #{1}."); t.evaluate(["bandicoot", "hyena"]); //-> "The quick brown bandicoot jumps over the lazy hyena." Of course, sometimes you won’t need to interpolate more than once. So there’s also String#interpolate: "The quick brown #{first} jumps over the lazy #{second}." .interpolate({ first: "ocelot", second: "ibex" }); //-> "The quick brown ocelot jumps over the lazy ibex." CHAPTER 8 ■ OTHER HELPFUL THINGS: USEFUL METHODS ON BUILT-INS 177 . doesn’t have variable interpolation, but since when has that stopped us? We can fake it. Using the Template Class Prototype gives us a class named Template. Let’s play around with it. var t = new. new instance of Template and pass it a string. You should recognize the special syntax we use inside the string—it’s identical to Ruby’s. Now we can use this template over and over again, passing. we used in the original string. Note also that we need only create the template once—but we can use it over and over to generate strings that conform to the same pattern. Since an array is just