55272

Loading HTML content containing inline script via jQuery

The Background

    <li>I run an ASP.NET site using Graffiti CMS for a local charitable/service organization.</li> <li>The leaders of the organization want to start integrating a third-party back-end management system that exposes content as full HTML pages.</li> <li>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).</li> <li>I've created a server-side proxy that enables loading the content from these pages using jQuery's .load() AJAX function.</li> <li>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!).</li> </ul>

    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

    Answer1:

    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!

    Answer2:

    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>

    Answer3:

    Try setting the HTML manually, like this:

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

    I'm pretty sure this will execute the scripts.

Recommend

  • ActiveMQ embedded broker topic-to-queue bridge with XML config
  • Problems while displaying nvd3 pieChart in a pop up window?
  • How to change toggle text on show hide using javascript
  • Laravel Token Signature could not be verified
  • Issue while avoiding forEach loop [duplicate]
  • Gem::LoadError: Specified 'postgresql' for database adapter, but the gem is not loaded
  • protecting sql server database file
  • How to create a dollar amount input field in an HTML form?
  • What is the difference between tfpt scorch and tfpt treeclean
  • Why does this code crash on the distributed app but work in the debugger?
  • C# helper classes to implement NTLM authorization
  • Column Nullability/Optionality: NULL vs NOT NULL
  • How can i compile & run a c program (with OpenMP) in gem5 Full System?
  • ThreadPool behaviour: not growing from minimum size
  • How to return a number as a binary string with a set number of bits in python
  • Microsoft Excel Pivot miscalculation in Sum for positive and negative numbers
  • How to display special characters in SQL server 2008?
  • CSS - Cannot get one spanned style to override another inherited style and align left
  • Activation Function choice for Neural network
  • Android Studio Can't Find tools.jar
  • UWP/C# - Issue with AQS and USB Devices
  • Suppressing passwd when calling sqlplus from shell script
  • Ensure fsync did its job
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why is the size of this struct 32?
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Comma separated Values
  • Error creating VM instance in Google Compute Engine
  • Hits per day in Google Big Query
  • how does django model after text[] in postgresql [duplicate]
  • Memory offsets in inline assembly
  • Turn off referential integrity in Derby? is it possible?
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize