TinyMCE - Set Editor Content - javascript

I am building an auto-save feature for my TinyMCE editor.
With jQuery, I have saved the editor's content to my database and now want to load the content back in to the editor. I am having troubles with the quotes (") in the HTML coming from the DB.
My code:
var content = "<%=content%>" // Classic ASP variable containing HTML from DB
tinyMCE.activeEditor.setContent(content);
Example output:
var content = "<p>Oh yes, from Churchill, the <em><span style="text-decoration: underline;"><strong>dog</strong></span></em>.</p>"
tinyMCE.activeEditor.setContent(content);
In the variable, "content", there are double quotes in the style tag which is causing a JS error. How do I get around this? Do I replace quotes with single quotes or do I use an escape or encode function? Please help.

VBScript has escaping functionality like Javascript (also ready if you use JScript as default language in classic asp)
Check out Escape and UnEscape.
Following is an efficient way of doing to append server-side variables to client-side js block.
// escape on server-side, unescape with js
var content = unescape("<%= escape(content) %>");
tinyMCE.activeEditor.setContent(content);
Example output:
var content = unescape("%3Cp%3EOh%20yes%2C%20from%20Churchill%2C%20the%20%3Cem%3E%3Cspan%20style%3D%22text-decoration%3A%20underline%3B%22%3E%3Cstrong%3Edog%3C/strong%3E%3C/span%3E%3C/em%3E.%3C/p%3E");
tinyMCE.activeEditor.setContent(content);

If it is just HTML (no javascript) it is probably quickest to replace the double quotes with singles.

str = "<span style="color:black">Text "string"</span>";
tag_pattern = /\<.*\>/m;
matches = str.match(tag_pattern);
//copy matches array and replace quotes, then use matches array to replace into original string

Additionally to BeaverusIVs first answer i have to add that the line
str = "<span style="color:black">Text "string"</span>";
should look like this
str = '<span style="color:black">Text "string"</span>';
otherwise the string is not valid and an error is thrown.

Related

How do you define a string in JavaScript that could contain any character?

Even though I'm using a Salesforce variable in my JavaScript, it is not necessary to know Salesforce to answer my question. There's a password field I want to access. I can do this by using the Salesforce variable, {!Account.Password__c}, inside my JavaScript like so:
var p = '{!Account.Password__c}';
I've been using this for a long time, but there are some instances where it doesn't work. The only problem is that the password could contain any character (as a good password should). So if it contains a single quote, then this JavaScript will not run. I could write it with double quotes:
var p = "{!Account.Password__c}";
But it could contain a double quote also. It could also contain forward slashes and/or back slashes.
The password string needs to be able to take any of these:
Idon'tknow
pass"word"
/-\_|)_/-\_/\/\
"'!##
+*co/rn
This is my code:
var u = '{!Account.Email_Address__c}';
var p = escape(encodeURIComponent('{!Account.Password__c}'));
window.open('http://mywebsite.com/?&u=' + u + '&p=' + p,'_blank');
What you're looking for is the JSENCODE function. It will escape quotes, backslashes, and anything else that might mess up your Javascript string.
var p = '{!JSENCODE(Account.Password__c)}';
If your Javascript is inside an HTML tag (eg: in an 'onclick' attribute) then use the JSINHTMLENCODE function, which will html-encode the characters <&> .
These are documented in the Visualforce Functions reference.
Your problem is that of escaping. You can backslash any character in a string - so if you have, say, owowow"'!thisishard as a password, to assign it straight up to a JS var, you would do this:
var p = "owowow\"\'!thisishard";
Which deals with the escaping. You do not need to do this if you have acquired the variable from another source (say, a text element through element.value).
This does not reove a couple of issues:
Passing passwords through GET params is pretty high up on the OWASP guidelines of things not to do. The reason being that they will show up on server logs in addition to being sniffable through conventional means.
Why on earth are you doing this?

Store Html.Raw() in a string in Javascript, ASP.NET MVC 3

I'm using ASP.NET and I have a string of HTML in the database.
I want to get that html into a variable on the client.
If I do this:
var x = '#Html.Raw(myModel.FishValue)'
it works fine, because it's essentially doing
var x = '<p>hello!</p>';
however if there are quotes in the html it breaks the page.
My initial guess would be to .Replace the raw string to add escapes to the quotes, however both .ToString() and .ToHtmlString() (as Html.Raw returns an IHtmlString) do not produce the same markup as simple Html.Raw().
So I'm at a loss of what best to do.
What about replacing before calling the Html.Rawmethod?
var x = '#Html.Raw(myModel.FishValue.Replace("'","\\'"))'
UPDATE:
There might be other escape chars in the string coming from the model. For that reason I would recommend replacing the slashes first as well. Of course it all depends on what might come from the server in your model.
var x = '#Html.Raw(myModel.FishValue.Replace("\\","\\\\'").Replace("'","\\'"))'
A sample snippet representing the behavior in the javascript:
//Let's say my Model Content is > I'd Say \ is a escape character. You can't "Escape"
// YOu would have to replace ' --> \' and \ --> \\
var stringFromServer = 'I\'d Say \\ is a escape character. You can\'t "Escape"'
alert(stringFromServer)
Try this:
var x = '#(System.Web.HttpUtility.HtmlEncode(myModel.FishValue))';
If you need to decode the HTML on the client side use
unescape(x)
I think JQuery (not sure if you're using it or not) handles encoded HTML strings so you might not need unescape().
Try out the anti-xss library from Microsoft (which will be included I believe by default in asp.net 4.5):
AntiXss.JavascriptEncode(yourContent)
Anti-Xss is available 4.1 beta. If you want to use it in your application which I highly recommend, check out:
http://weblogs.asp.net/jgalloway/archive/2011/04/28/using-antixss-4-1-beta-as-the-default-encoder-in-asp-net.aspx

How to deal with sigle quote in javascript in jsp page?

onclick= "_deleteWPSchemeData(${viewWPMasterGrid.id}, '${viewWPMasterGrid.name}')"
${viewWPMasterGrid.name} retutrns me a string(for e.g. W.P.WINT OFF ALL'10) which often has single quote character so from the calling javascript method I am not getting the second parameter at all. How to deal with problem?
When a dynamic String can be put inside a JavaScript string literal, it should be JS-escaped. Just as when a dynamic String is put inside a HTML page, it's HTML-escaped.
Use commons-lang StringEscapeUtils.escapeECMAScript (or escapeJavaScript depending on the version) to escape the String. You could create a very simple EL function to do that straight from the JSP.
Note that you could have problems with single quotes, but also double quotes, tags, EOLs, backslash, which must all be escaped in a JS String literal.
It looks like you could split the second parameter out into its own variable first. If I have understood your question correctly.
var viewWPMasterGridName = "${viewWPMasterGrid.name}";
onclick = "_deleteWPSchemeData(${viewWPMasterGrid.id},'" + viewWPMasterGridName + "')";
Use '${viewWPMasterGrid.name.replaceAll("'", "\'")}'
try this,
var name = "${viewWPMasterGrid.name}".replace(/'/g,"\\'");

How do I extract the title value from a string using Javascript regexp?

I have a string variable which I would like to extract the title value in id="resultcount" element. The output should be 2.
var str = '<table cellpadding=0 cellspacing=0 width="99%" id="addrResults"><tr></tr></table><span id="resultcount" title="2" style="display:none;">2</span><span style="font-size: 10pt">2 matching results. Please select your address to proceed, or refine your search.</span>';
I tried the following regex but it is not working:
/id=\"resultcount\" title=['\"][^'\"](+['\"][^>]*)>/
Since var str = ... is Javascript syntax, I assume you need a Javascript solution. As Peter Corlett said, you can't parse HTML using regular expressions, but if you are using jQuery you can use it to take advantage of browser own parser without effort using this:
$('#resultcount', '<div>'+str+'</div>').attr('title')
It will return undefined if resultcount is not found or it has not a title attribute.
To make sure it doesn't matter which attribute (id or title) comes first in a string, take entire html element with required id:
var tag = str.replace(/^.*(<[^<]+?id=\"resultcount\".+?\/.+?>).*$/, "$1")
Then find title from previous string:
var res = tag.replace(/^.*title=\"(\d+)\".*$/, "$1");
// res is 2
But, as people have previously mentioned it is unreliable to use RegEx for parsing html, something as trivial as different quote (single instead of double quote) or space in "wrong" place will brake it.
Please see this earlier response, entitled "You can't parse [X]HTML with regex":
RegEx match open tags except XHTML self-contained tags
Well, since no one else is jumping in on this and I'm assuming you're just looking for a value and not trying to create a parser, I'll give you what works for me with PCRE. I'm not sure how to put it into the java format for you but I think you'll be able to do that.
span id="resultcount" title="(\d+)"
The part you're looking to get is the non-passive group $1 which is the '\d+' part. It will get one or more digits between the quote marks.

How do I escape a string inside JavaScript code inside an onClick handler?

Maybe I'm just thinking about this too hard, but I'm having a problem figuring out what escaping to use on a string in some JavaScript code inside a link's onClick handler. Example:
Select
The <%itemid%> and <%itemname%> are where template substitution occurs. My problem is that the item name can contain any character, including single and double quotes. Currently, if it contains single quotes it breaks the JavaScript code.
My first thought was to use the template language's function to JavaScript-escape the item name, which just escapes the quotes. That will not fix the case of the string containing double quotes which breaks the HTML of the link. How is this problem normally addressed? Do I need to HTML-escape the entire onClick handler?
If so, that would look really strange since the template language's escape function for that would also HTMLify the parentheses, quotes, and semicolons...
This link is being generated for every result in a search results page, so creating a separate method inside a JavaScript tag is not possible, because I'd need to generate one per result.
Also, I'm using a templating engine that was home-grown at the company I work for, so toolkit-specific solutions will be of no use to me.
In JavaScript you can encode single quotes as "\x27" and double quotes as "\x22". Therefore, with this method you can, once you're inside the (double or single) quotes of a JavaScript string literal, use the \x27 \x22 with impunity without fear of any embedded quotes "breaking out" of your string.
\xXX is for chars < 127, and \uXXXX for Unicode, so armed with this knowledge you can create a robust JSEncode function for all characters that are out of the usual whitelist.
For example,
Select
Depending on the server-side language, you could use one of these:
.NET 4.0
string result = System.Web.HttpUtility.JavaScriptStringEncode("jsString")
Java
import org.apache.commons.lang.StringEscapeUtils;
...
String result = StringEscapeUtils.escapeJavaScript(jsString);
Python
import json
result = json.dumps(jsString)
PHP
$result = strtr($jsString, array('\\' => '\\\\', "'" => "\\'", '"' => '\\"',
"\r" => '\\r', "\n" => '\\n' ));
Ruby on Rails
<%= escape_javascript(jsString) %>
Use hidden spans, one each for each of the parameters <%itemid%> and <%itemname%> and write their values inside them.
For example, the span for <%itemid%> would look like <span id='itemid' style='display:none'><%itemid%></span> and in the javascript function SelectSurveyItem to pick the arguments from these spans' innerHTML.
If it's going into an HTML attribute, you'll need to both HTML-encode (as a minimum: > to > < to &lt and " to ") it, and escape single-quotes (with a backslash) so they don't interfere with your javascript quoting.
Best way to do it is with your templating system (extending it, if necessary), but you could simply make a couple of escaping/encoding functions and wrap them both around any data that's going in there.
And yes, it's perfectly valid (correct, even) to HTML-escape the entire contents of your HTML attributes, even if they contain javascript.
Try avoid using string-literals in your HTML and use JavaScript to bind JavaScript events.
Also, avoid 'href=#' unless you really know what you're doing. It breaks so much usability for compulsive middleclickers (tab opener).
<a id="tehbutton" href="somewhereToGoWithoutWorkingJavascript.com">Select</a>
My JavaScript library of choice just happens to be jQuery:
<script type="text/javascript">//<!-- <![CDATA[
jQuery(function($){
$("#tehbutton").click(function(){
SelectSurveyItem('<%itemid%>', '<%itemname%>');
return false;
});
});
//]]>--></script>
If you happen to be rendering a list of links like that, you may want to do this:
<a id="link_1" href="foo">Bar</a>
<a id="link_2" href="foo2">Baz</a>
<script type="text/javascript">
jQuery(function($){
var l = [[1,'Bar'],[2,'Baz']];
$(l).each(function(k,v){
$("#link_" + v[0] ).click(function(){
SelectSurveyItem(v[0],v[1]);
return false;
});
});
});
</script>
Another interesting solution might be to do this:
Select
Then you can use a standard HTML-encoding on both the variables, without having to worry about the extra complication of the javascript quoting.
Yes, this does create HTML that is strictly invalid. However, it is a valid technique, and all modern browsers support it.
If it was my, I'd probably go with my first suggestion, and ensure the values are HTML-encoded and have single-quotes escaped.
Declare separate functions in the <head> section and invoke those in your onClick method. If you have lots you could use a naming scheme that numbers them, or pass an integer in in your onClicks and have a big fat switch statement in the function.
Any good templating engine worth its salt will have an "escape quotes" function. Ours (also home-grown, where I work) also has a function to escape quotes for javascript. In both cases, the template variable is then just appended with _esc or _js_esc, depending on which you want. You should never output user-generated content to a browser that hasn't been escaped, IMHO.
I have faced this problem as well. I made a script to convert single quotes into escaped double quotes that won't break the HTML.
function noQuote(text)
{
var newtext = "";
for (var i = 0; i < text.length; i++) {
if (text[i] == "'") {
newtext += "\"";
}
else {
newtext += text[i];
}
}
return newtext;
}
Use the Microsoft Anti-XSS library which includes a JavaScript encode.
First, it would be simpler if the onclick handler was set this way:
<a id="someLinkId"href="#">Select</a>
<script type="text/javascript">
document.getElementById("someLinkId").onClick =
function() {
SelectSurveyItem('<%itemid%>', '<%itemname%>'); return false;
};
</script>
Then itemid and itemname need to be escaped for JavaScript (that is, " becomes \", etc.).
If you are using Java on the server side, you might take a look at the class StringEscapeUtils from jakarta's common-lang. Otherwise, it should not take too long to write your own 'escapeJavascript' method.
Is the answers here that you can't escape quotes using JavaScript and that you need to start with escaped strings.
Therefore. There's no way of JavaScript being able to handle the string 'Marge said "I'd look that was" to Peter' and you need your data be cleaned before offering it to the script?
I faced the same problem, and I solved it in a tricky way. First make global variables, v1, v2, and v3. And in the onclick, send an indicator, 1, 2, or 3 and in the function check for 1, 2, 3 to put the v1, v2, and v3 like:
onclick="myfun(1)"
onclick="myfun(2)"
onclick="myfun(3)"
function myfun(var)
{
if (var ==1)
alert(v1);
if (var ==2)
alert(v2);
if (var ==3)
alert(v3);
}

Categories

Resources