2

The Background

  • I run an ASP.NET site using Graffiti CMS for a local charitable/service organization.
  • The leaders of the organization want to start integrating a third-party back-end management system that exposes content as full HTML pages.
  • One of the pages, the officer list, uses inline script to load pictures or placeholders (depending on whether or not there is a picture for the given officer).
  • I've created a server-side proxy that enables loading the content from these pages using jQuery's .load() AJAX function.
  • I can display this content fine using an iframe, but that feels really kludgy, and if the size of the content changes, I may need to alter the size of the iframe to ensure it all displays (blech!).

The Problem

If I create a <div> in a Graffiti post, and use $("#divid").load(url) to load the content, the HTML content loads fine, but the inline script is stripped out, so neither the officer images nor the placeholders are displayed.

The Question

Understanding that the reason for the problem is that jQuery is almost certainly trying to protect against potentially bad stuff by removing the inline script before I load it into my DOM, is there a way using jQuery to grab this HTML and load it into my DOM that will preserve the script, but not open major security holes? I do trust the system from which I'm loading the content, if that makes a difference.

Suggestions? I'm looking to keep this as simple as possible...anything too complex, and I'm just as well off to stick with the iframe.

Thanks in advance!

@devhammer

Improve this question
7
  • Is the page you're trying to load from on the same domain name? Commented Nov 2, 2009 at 2:46
  • by inline script to you mean script tags or onclick=someScript? Commented Nov 2, 2009 at 2:47
  • No, the page is in a different domain, but I set up a server-side proxy on my domain to pull the content over. Commented Nov 2, 2009 at 2:54
  • Inline like so: <script> if ('' == '') { document.write('<img src="/path/member-small.jpg">'); } else { document.write('<img src="/otherpath/" width=80>'); } </script> Commented Nov 2, 2009 at 2:56
  • The scripts appear right in the middle of the markup. Commented Nov 2, 2009 at 2:57

3 Answers 3

Reset to default
3

There is an issue when you use document.write. If you have the ability to modify the source pages you can modify them to use the innerHtml technique instead.

To do so you would change something like this:

<div id="testDiv">
  <script type="text/javascript">
    document.write("<img src='image1.jpg' alt='' />");
  </script>
</div>

To this:

<div id="testDiv">
<div>
<script type="text/javascript">
  document.getElementByid('testDiv').innerHTML = "<img src='image1.jpg' alt='' />";
</script>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I can ask the guy who runs the system where these pages reside if he can modify the page, but given that there are a number of other folks using the same system, I would be surprised if he'd be open to that. Prime example of some of the perils of reusing a system that wasn't designed for reuse.
0

Doesn't work for me...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title></title>
    </head>
    <body>
        <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var dynamic = 'begin <script type="text/javascript">alert("hello");<\/script> end';
                $('#test').html(dynamic);
            });
        </script>
        <div id="test"></div>
    </body>
</html>

The alert box is showing.. but if you replace it with a document.write, nothing in the document.write appears... you have "begin end"

Hope this helps!

Improve this answer

2 Comments

Right...makes sense. The scripts are there, but document.write won't work because it's too late to call that.
Yes "The document.write command must be carried out during the loading of the page." -java-programming.suite101.com/article.cfm/… You can mark your post as answered :)
0

Try setting the HTML manually, like this:

$.get(url, function(htmlText) { $('#divid').html(htmlText); });

I'm pretty sure this will execute the scripts.

Improve this answer

5 Comments

Be careful, there are things a page-load-time script may expect to be able to do that you can't do once the page has loaded. Primarily: anything that calls document.write to add content to the page as it loads will completely destroy your existing page.
Funny you should mention document.write since that's precisely what these scripts are doing. I did try $.get, and could get the content (and scripts) to load, but the scripts would not execute.
when the HTML is loaded in this way, how do you use the jQuery to grab the part of HTML you want? the .load removes [html][body] etc. but now this would need to be done manually... any ideas?
@BerggreenDK: $('someSelector', htmlText).html().
@SLaks: Ehm, yes - I could have been more specific. But I was refering to the question of how we get the inline scripts and then execute the scripts within the HTML?

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.