MathJax string input/output - javascript

I've just learned about math MathJax. I've read some documentation, and it looks nice but If I understood it right it scans html page for equations and automatically replace them with HTML/SVG or whatever.
My concern is that I'm generating my page from raw text (simply strings) in JS and I would like to just simply pass certain parts of it to MathJax and get html string in return. I looked at the API but unless I'm missing something, there is no such option and I can only do things like MathJax.Hub.Process().
So it would look like
I'm creating and adding HTML elements to document based on my text.
I'm telling MathJax to search for the content I've just created.
MathJax is searching for text to parse and removing the content I've just added, striping out text, parsing....
MathJax is creating it's own elements add it to document.
Is there a way (without modifying the source code) to do something like this:
I'm passing text to MathJax, telling it what is the format.
MathJax is returning HTML text string.
I'm creating HTML element besed on that text and inserting it at desired place.
I hope I overlooked something.

Related

How does a browser render this inline JavaScript within an encoded tag?

I was trying to perform a Reflective XSS attack on a tutorial website. The webpage basically consists of a form with an input field and a submit button. On submitting the form, the content of the input field are displayed on the same webpage.
I figured out that the website is blacklisting script tag and some of the JavaScript methods in order to prevent an XSS attack. So, I decided to encode my input and then tried submitting the form. I tried 2 different inputs and one of them worked and the other one didn't.
When I tried:
<body onload="&#97lert('Hi')"></body>
It worked and an alert box was displayed. However, I when encoded some characters in the HTML tag, something like:
&#60body onload="&#97lert('Hi')"&#62&#60/body&#62
It didn't work! It simply printed <body onload="alert('Hi')"></body> as it is on the webpage!
I know that the browsers execute inline JavaScript as they parse an HTML document (please correct me if I'm wrong). But, I'm not able to understand why did the browser show different behavior for the different inputs that I've mentioned.
-------------------------------------------------------------Edit---------------------------------------------------------
I tired the same with a more basic XSS tutorial with no XSS protection. Again:
<script>alert("Hi")</script> -> Worked!
&#60s&#99ript&#62&#97lert("Hi")&#60/s&#99ript&#62 -> Didn't work! (Got printed as string on the Web Page)
So basically, if I encode anything in JavaScript, it works. But if I'm encoding anything that is HTML, it's not executing the JavaScript within that HTML!
I can't come up with words to describe the properly, so i'll just give you an example. Lets say we have this string:
<div>Hello World! <span id="foo">Foobar</span></div>
When this gets parsed, you end up with a div element that contains the text:
Hello World! <span id="foo">Foobar</span>
Note, while there is something that looks like html inside the text, it is still just text, not html. For that text to become html, it would have to be parsed again.
Attributes work a little bit differently, html entities in attributes do get parsed the first time.
tl;dr:
if the service you are using is stripping out tags, there's nothing you can do about it unless the script is poorly written in a way that results in the string getting parsed twice.
Demo: http://jsfiddle.net/W6UhU/ note how after setting the div's inner html equal to it's inner text, the span becomes an html element rather than a string.
When an HTML page says &#60body It treats it the same as if it said <body
That is, it just displays the encoded characters, doesn't parse them as HTML. So you're not creating a new tag with onload attributes http://jsfiddle.net/SSfNw/1/
alert(document.body.innerHTML);
// When an HTML page says <body It treats it the same as if it said <body
So in your case, you're never creating a body tag, just content that ends up getting moved into the body tag http://jsfiddle.net/SSfNw/2/
alert(document.body.innerHTML)
// <body onload="alert('Hi')"></body>
In the case <body onload="&#97lert('Hi')"></body>, the parser is able to create the body tag, once within the body tag, it's also able to create the onload attribute. Once within the attribute, everything gets parsed as a string.

How to 'unrender' MathJax equations?

We all know that MathJax renders elements on window onload by default (and can be refreshed using MathJax.Hub.Queue(["Typeset",MathJax.Hub]); Reference Link), but is there a way to 'unrender' the elements? So for example, after the page just loaded, I can click a button, and all the elements will turn back into their TeX code. Is that possible?
Well, the original TeX code is stored by MathJax, so you can use some javascript to put it back. There is an example of how to do this on the MathJax users forum that I think may be what you are looking for.
It seems that MathJax hides the original LaTeX code in an element called MathJax-Element-x, which contains the original code. So what I did was simply hide all elements with the class MathJax_Display, in which the formatted version appeared, and showed all elements starting with MathJax-Element-. Seemed to work fine.
EDIT: Instead of selecting MathJax_Display elements, I had to select all the elements inside MathJax_Display, like MathJax_Display *. I also had to change the type of element the LaTeX code was put in, as it was in a script.

how to pass as parameter to JS function from HTML large chunk of HTML code?

I want to pass as argument a large (maybe 2-3 paragraphs of html formatted code) chunk of HTML code to a Javascript function call from HTML. The problem is, the formatted HTML keeps appearing in the page itself, which shouldnt be the case ! I am assuming theres some problem with single/double quotes !
And, I am working on Facebook tab page.
Can anyone please help me ?
Thanks.
-
ahsan
One way is to have a hidden div (something with display:none), and populate that with your 2-3 paragraphs of html formatted code. Then, you can just pass the innerHTML of the div into your function. Quotes (of any kind) won't cause a problem in this method.
Some libraries like icanhaz.js also do something like this:
<script type="text/html" id="someHTMLTemplate">
<div>You can put whatever html you want here</div>
<p>And the browser just ignores it</p>
</script>
I use the same technique with mustache.js and then grab the template from the innerHTML of the script tag after grabbing it by the dom id. This has the advantage that the browser doesn't have to parse your extra html while loading it is just parsed when you need to display it in another node on the page.
Another way is to encode the HTML and then decode it in the JS. Here's an example using the JS escape info:
console.log(escape("<hello></hello>")); // %3Chello%3E%3C/hello%3E
console.log(unescape("%3Chello%3E%3C/hello%3E")); // <hello></hello>
Mind you, if you have an issue with your string quotations to begin with, then there will still be a problem encoding.

embeded google translate with pre tag problem

The google translate that you actually embed on your page...
http://translate.google.com/translate_tools
If you have a page with a <pre></pre> tag it combines everything in the pre into one line.
Does anyone know a fix for this?
I looked at the source code but that is still showing the original page. The actual translated stuff is only showing on the screen (like it was appeneded later or something?).
Can I do something with javascript or css? Like change the type of font used in the pre tag?
Sample page:
http://www.gootab.com/b/beatles/dear_prudence.tab.php?translate
go there then change dropdown to russian.
I'd suggest avoiding the <pre> tag.
You are using <pre> tags to format your page (basically setting a font and turning CR/LF into a line break in the client browser). This is considered bad practice.
Since your code is in PHP, you should be able to use a simple statement like nl2br (http://php.net/manual/en/function.nl2br.php) to convert your ASCII text into clean HTML with line breaks. Output it in <code> tag (or <div> or even <pre>, or something else entirely) and use CSS to style it.

Possible to create custom "DOMs" by loading HTML from string in Javascript?

I'm trying to parse HTML in the browser. The browser receives 2 HTML files as strings, eg. HTML1 and HTML2.
I now need to parse these "documents" just as one would parse the current document. This is why I was wondering if it is possible to create custom documents based on these HTML strings (these strings are provided by the server or user).
So that for example the following would be valid:
$(html1Document).$("#someDivID")...
If anything is unclear, please ask me to clarify more.
Thanks.
var $docFragment = $(htmlString);
$docFragment.find("a"); // all anchors in the HMTL string
Note that this ignores any document structure tags (<html>, <head> and <body>), but any contained tags will be available.
With jQuery you can do this:
$(your_document_string).someParsingMethod().another();
You can always append your html to some hidden div (though innerHTML or jQuery .html(..)). It won't be treated exactly as a new document, but still will be able to search its contents.
It has a few side-effects, though. For example, if your html defines any script tags, they'll be loaded. Also, browser may (and probably will) remove html, body and similar tags.
edit
If you specifically need title and similar tags, you may try iframe loading content from your server.

Categories