/    Sign up×
Community /Pin to ProfileBookmark

Execute dynamic HTML/JavaScript

Hi,

I’d like to create a textarea and a division so that whatever embed code you put in the textarea it gets executed on the division in real-time.

Your kind help is greatly appreciated!
JavaScript newbie

to post a comment
JavaScript

32 Comments(s)

Copy linkTweet thisAlerts:
@KorMay 13.2011 — [I]division[/I]? What do you min my "division"?
Copy linkTweet thisAlerts:
@White_horseauthorMay 13.2011 — [I]division[/I]? What do you min my "division"?[/QUOTE]

A <div> tag.
Copy linkTweet thisAlerts:
@KorMay 13.2011 — And by embedded code do you mean exactly a [I]programming code[/I] Or a string? If code, what code? HTML? JavaScript? CSS?
Copy linkTweet thisAlerts:
@White_horseauthorMay 13.2011 — HTML? JavaScript? CSS?[/QUOTE]
Yes! Any embed code including HTML, JavaScript or CSS.
Copy linkTweet thisAlerts:
@KorMay 13.2011 — In that case you need two documents, one which holds the textarea, the other one should be loaded in an iframe within the first document. You need to submit data from the first document to the second where a server-side language code (in PHP, ASP, Java, Pearl, whichever) will generate the submitted content of the textarea.
Copy linkTweet thisAlerts:
@White_horseauthorMay 13.2011 — In that case you need two documents, one which holds the textarea, the other one should be loaded in an iframe within the first document. You need to submit data from the first document to the second where a server-side language code (in PHP, ASP, Java, Pearl, whichever) will generate the submitted content of the textarea.[/QUOTE]

Seems clever, but I don't know how to do it. Would me mind helping me with its coding?
Copy linkTweet thisAlerts:
@KorMay 13.2011 — It is not an easy task. You must know that server-side language. PHP is the most common.

If you don't, learn it or hire a professional.
Copy linkTweet thisAlerts:
@svidgenMay 13.2011 — I'm confused. When did server-side language get involved? At first it just sounded to me like to want to allow the user to insert some JavaScript in a textbox and use be able to "print" results to <some node> on your page. Is that not the case?
Copy linkTweet thisAlerts:
@KorMay 13.2011 — I'm confused. When did server-side language get involved? At first it just sounded to me like to want to allow the user to insert some JavaScript in a textbox and use be able to "print" results to <some node> on your page. Is that not the case?[/QUOTE]
Yes. same as:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_variables

They did as I said: 2 documents on in the iframe of another, and they use ASP to generate something on the iframed document, based on the submitted values .
Copy linkTweet thisAlerts:
@svidgenMay 13.2011 — Yes. same as:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_variables

They did as I said: 2 documents on in the iframe of another, and they use ASP to generate something on the iframed document, based on the submitted values .[/QUOTE]


Interesting ... I would advise against doing it that way. It's one thing to allow your visitors to run arbitrary JavaScript against your site (which they can do anyway). It's another to provide a means wherein users could potentially direct other visitors to THEIR code running on YOUR site.

Just use eval() or some equivalent. A simplified example:

[code=html]<textarea id='script_input'>// put your code here</textarea>
<input type='button' value='Execute!' onclick='execute_user_script();' />
<div id='output'>Return value will show up here</div>

<script type='text/javascript'>
function execute_user_script() {
document.getElementById('output').innerHTML = eval(document.getElementById('script_input').value);
} // execute_user_script()
</script>[/code]


Don't be afraid of exec(), so long as you're not exec()ing code written by user A in user B's session, like the W3Schools code seems to open the possibility for.
Copy linkTweet thisAlerts:
@White_horseauthorMay 13.2011 — Just use eval() or some equivalent. A simplified example...[/QUOTE]

Thanks for the answer, but I tried the code and it didn't work.
Copy linkTweet thisAlerts:
@svidgenMay 13.2011 — Yeah -- you'll have to play with it to get it to behave the way you want. As I've written it, Chrome will throw an exception if you place a [I]return[/I] statement in the textbox. However, the "return value" last line in the textbox is returned and should be returned.

So, using the code I provided, if you put the following in the textbox, it ought to write 3 in the output div:
[code=html]var x = 1;
var y = 2;
x + y;[/code]


Admittedly not tested in anything but Chrome at this point. But, if you're struggling to get it working, you can look at two other examples that do similar things:

http://www.svidgen.com/javascript_benchmark

http://www.svidgen.com/javascript_rewrite_function_demo

The 2nd example is probably closer to what you need. And you can easily alter it to avoid forcing the user to enter the function() {} wrapper.
Copy linkTweet thisAlerts:
@White_horseauthorMay 13.2011 — After hours searching and trying different approaches I came up to the following simple code:

[CODE]<script type="text/javascript">
var X = " HTML or JavaScript "
window.onload=function()
{
document.getElementById("result").innerHTML = document.getElementById("input").value;
}
</script>

<textarea id="input" cols="35" rows="7"> X </textarea>

<div id="result"></div>[/CODE]


All I need is using eval function to get the whole code (HTML or JavaScript) as one variable. I wonder if you could help me with this as I'm badly stuck!
Copy linkTweet thisAlerts:
@KorMay 13.2011 — 
I would advise against doing it that way. It's one thing to allow your visitors to run arbitrary JavaScript against your site (which they can do anyway)
[/quote]

The naked truth is exactly the opposite. But for that you should learn a little bit how to use a server-side language.

eval() can be [I]evil[/I] sometimes. If you don't know when and how to handle it, it could bring you harm. This can be the gate for a malicious JavaScript injection intrusion. ?
Copy linkTweet thisAlerts:
@White_horseauthorMay 13.2011 — eval() can be [I]evil[/I] sometimes. If you don't know when and how to handle it, it could bring you harm. This can be the gate for a malicious JavaScript injection intrusion. ?[/QUOTE]

However, I'd like to use it.

Please help me with a problem that takes you seconds and takes me probably weeks to get the answer to.

Thanks!
Copy linkTweet thisAlerts:
@svidgenMay 13.2011 — The naked truth is exactly the opposite. But for that you should learn a little bit how to use a server-side language.

eval() can be [I]evil[/I] sometimes. If you don't know when and how to handle it, it could bring you harm. This can be the gate for a malicious JavaScript injection intrusion. ?[/QUOTE]


Let me reiterate: [I][B]Anyone[/B][/I] can run arbitrary JavaScript against your site [I]at any time[/I] [B]with or without eval()s[/B] by leveraging bookmarklets, the JavaScript console (such as the one in Chrome), [I]the address bar[/I], etc. So long as you ensure that your eval()'s are not eval()ing code written by user A in user B's session, you're not reducing site security in the slightest. You may compromise the integrity of the site if you're an idiot about it, or your site may be inherently insecure, but it's never a result of the [I]mere presence[/I] of eval().

This topic has nothing to do with server side language, nor does it need to. Introducing a server-side component here is of no advantage; it would serve only to add latency. In fact, it is ONLY when you introduce a server-side component that you open up the possibility for user A to inject JavaScript into user B's session. And so, in [I]avoiding[/I] server-side interaction, you ensure security.

[B]@White horse[/B]

It's becoming unclear what you really want to do. So, all I can say is, look at my examples again and try to understand the concepts. If you understand what the code is doing, your particularly solution will present itself.
Copy linkTweet thisAlerts:
@White_horseauthorMay 13.2011 — It's becoming unclear what you really want to do. So, all I can say is, look at my examples again and try to understand the concepts. If you understand what the code is doing, your particularly solution will present itself.[/QUOTE]

Thanks for coming back to me and sorry about confusion I caused! Please ignore my first post, be patient with me, and let me put my question again:

As you can see in my last code when the page loads (window.onload) the viewer should see a textarea with a default value inside -- which is a code -- and under that a division that displays the result/executed form of that code:

[CODE]<script type="text/javascript">
var X = " code either HTML or JavaScript "
window.onload=function()
{
document.getElementById("result").innerHTML = document.getElementById("input").value;
}
</script>

<textarea id="input" cols="35" rows="7"> X </textarea>

<div id="result"></div>[/CODE]


Now the question is how I can set the whole code (var X) as a variable? I'd like to use eval for that purpose, but I don't know how to do it. I tried my best to make it clear, but please let me know if I need to explain more.
Copy linkTweet thisAlerts:
@KorMay 13.2011 — Let me reiterate: [I][B]Anyone[/B][/I] can run arbitrary JavaScript against your site [I]at any time[/I] [B]with or without eval()s[/B] by leveraging bookmarklets, [/quote]
No.

the JavaScript console (such as the one in Chrome), [I]the address bar[/I], etc. So long as you ensure that your eval()'s are not eval()ing code written by user A in user B's session, you're not reducing site security in the slightest. You may compromise the integrity of the site if you're an idiot about it, or your site may be inherently insecure, but it's never a result of the [I]mere presence[/I] of eval().
[/quote]

When you use [I]your[/I] console to inject something, you might, eventually, do harm to [I]yourself[/I]. :rolleyes: You must have forgotten that JavaScript is a client-side language.

This topic has nothing to do with server side language, nor does it need to. Introducing a server-side component here is of no advantage; it would serve only to add latency. In fact, it is ONLY when you introduce a server-side component that you open up the possibility for user A to inject JavaScript into user B's session. And so, in [I]avoiding[/I] server-side interaction, you ensure security.
[/quote]

Nonsense. There is no Data Base to be injected. It is just a query to a file which does not handle a DB. And JavaScript can not inject a server-side session. Forget it.
Copy linkTweet thisAlerts:
@svidgenMay 13.2011 — No.

When you use [I]your[/I] console to inject something, you might, eventually, do harm to [I]yourself[/I]. :rolleyes: You must have forgotten that JavaScript is a client-side language.

Nonsense. There is no Data Base to be injected. It is just a query to a file which does not handle a DB. And JavaScript can not inject a server-side session. Forget it.[/QUOTE]


Are you serious?

... Is he serious?
Copy linkTweet thisAlerts:
@svidgenMay 13.2011 — Thanks for coming back to me and sorry about confusion I caused! Please ignore my first post, be patient with me, and let me put my question again:

As you can see in my last code when the page loads (window.onload) the viewer should see a textarea with a default value inside -- which is a code -- and under that a division that displays the result/executed form of that code:

[CODE]<script type="text/javascript">
var X = " code either HTML or JavaScript "
window.onload=function()
{
document.getElementById("result").innerHTML = document.getElementById("input").value;
}
</script>

<textarea id="input" cols="35" rows="7"> X </textarea>

<div id="result"></div>[/CODE]


Now the question is how I can set the whole code (var X) as a variable? I'd like to use eval for that purpose, but I don't know how to do it. I tried my best to make it clear, but please let me know if I need to explain more.[/QUOTE]


So, you want this?

[code=html]<script type="text/javascript">
var X = " code either HTML or JavaScript "

function setX() {
X = document.getElementById('input').value;
}

function evalX() {
document.getElementById('result').innerHTML = eval(X);
}

</script>

<textarea id="input" cols="35" rows="7"> X </textarea>
<input type='button' onclick='setX();' value='Set X' />
<input type='button' onclick='evalX();' value='Eval X' />

<div id="result"></div>[/code]
Copy linkTweet thisAlerts:
@Jeff_MottMay 13.2011 — Are you serious?

... Is he serious?[/QUOTE]


It's hard to believe, but yes, I think he's serious.
Copy linkTweet thisAlerts:
@svidgenMay 13.2011 — @Kor

To be clear, I'm not suggesting that folks should use eval() carelessly. However, the ONLY time script can be transported by design from client X to client Y is via a server. Without that server interaction, you're not imposing a [B]security[/B] risk by using eval(). A [B]stability[/B] risk -- yes, of course. If the user is encouraged to inject code, they'll likely screw things up.

However, I'm VERY concerned that you seem to be unaware that users can inject JavaScript (in their session) onto your page. This is the very purpose of bookmarklets -- to inject javascript onto whatever page you happen to be viewing. Furthermore, all modern browsers allow users to run arbitrary script in the context of the current page from a console and/or address bar. HENCE, giving a user an open textbox to run commands from is doing NO MORE HARM than reminding the user that they can enter their script into the address bar.

You, of all folks here, shouldn't be fighting this. You're an expert, a frequent poster, and a moderator.
Copy linkTweet thisAlerts:
@svidgenMay 13.2011 — It's hard to believe, but yes, I think he's serious.[/QUOTE]

I pray to God this is a language barrier issue ...
Copy linkTweet thisAlerts:
@KorMay 13.2011 — [B]svidgen[/B], there are well known methods to inject, and there are also well known methods to prevent the injection. It is like the perpetual duel between the shell and the armour. But it is not the case for this problem.
Copy linkTweet thisAlerts:
@svidgenMay 13.2011 — [B]svidgen[/B], there are well known methods to inject, and there are also well known methods to prevent the injection. It is like the perpetual duel between the shell and the armour. But it is not the case for this problem.[/QUOTE]

I'll be honest, I have no idea what your point is. My point from the beginning is that eval() is OK to use in this scenario because it does NOT introduce any injection opportunities that are not already present. And this appears to be what you're saying now ... Though, you seemed to be arguing against that very point when I posted it ...

Please explain.
Copy linkTweet thisAlerts:
@KorMay 13.2011 — That could be a long quarrel, yet for saving the the time I will start by quoting [aprocrifo ?] Crockford:

"This kind of statement [[I]eval()[/I]] tends to generate irrational neurosis. Don't buy it. Don't sell it. Don't use it" ?
Copy linkTweet thisAlerts:
@svidgenMay 13.2011 — I think there's a communication boundary here.

To be clear, I don't normally condone the use of eval() either -- it's usually totally unwarranted. And as I stated earlier, it decreases the stability of your application, because what goes into eval() is variable. Instability, however, does not necessarily an insecurity make. And again, as I've already stated, a user doesn't need you to use eval() to run arbitrary scripts against your page.

However, in a case where the intention is to explicitly hand the end-user the keys in the easiest possible way, eval() is the best way to let the user play ...

But again again, I think there's definitely a communication issue between you and me, good sir. And I really can't fathom we really disagree here -- it's fairly black-and-white stuff. More likely is that I'm totally misunderstanding what you're trying to say, and vice versa.
Copy linkTweet thisAlerts:
@KorMay 13.2011 — [B]svidgen[/B], do you think that handling an expression via [B]eval()[/B] is better than submit it and executed it on another page, via a server-side language? It is the same thing, if it is raw. Except that on the server side you have some tools to validate and process the data, while the JavaScript eval() will turn out everything in a single breath.
Copy linkTweet thisAlerts:
@svidgenMay 13.2011 — [B]svidgen[/B], do you think that handling an expression via [B]eval()[/B] is better than submit it and executed it on another page, via a server-side language? It is the same thing, if it is raw. Except that on the server side you have some tools to validate and process the data, while the JavaScript eval() will turn out everything in a single breath.[/QUOTE]

I disagree. They're very distinct, in fact. Executing the script in eval() [I]instead of submitting it[/I] to be executed on another page explicitly prevents XSS attacks. Google agrees: Chrome gives the following message if a script POSTed to a URL is also present in its output:

"Refused to execute a JavaScript script. Source code of script found within request."

See:

http://staging.thepointless.com/xsstest

Chrome recognizes the danger and refuses to redirect the user. FF isn't so kind and promptly brings executes the script, bringing you to a page that now has your W3Schools cookie data.

Luckily, W3Schools doesn't appear to provide accounts or use any sort of authentication. If they did ... stealing someone's authenticated session would be pretty trivial.

On the other hand, if "malicious code" the end-user writes can ONLY be executed within the present pageload via eval(), they can do no one any harm but themselves.
Copy linkTweet thisAlerts:
@White_horseauthorMay 14.2011 — I'm afraid nothing happens when I press 'Eval X' button. ?
Copy linkTweet thisAlerts:
@svidgenMay 14.2011 — I'm afraid nothing happens when I press 'Eval X' button. ?[/QUOTE]

Even though the example I posted says JavaScript [B]or[/B] HTML, it will really only work with JavaScript that "silently" returns a variable.
×

Success!

Help @White_horse spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...