I have a JavaScript variable that holds an image tag surrounded by an anchor tag. Pretty normal stuff.
myvar="<a href='foo'><img src='bar'></a>";
What happens in Firefox, is that even though I'm not choosing to document.write the contents of that myvar variable, I nevertheless see that the image referenced by the IMG tag does actually get loaded. You'd never know it's happening without having a HTTP proxy tool running. I see in Fiddler that image being loaded. I don't see the image in the page of course, because I didn't choose to document.write the tag into the page.
Is Firefox trying to be too clever and not-so-intelligently parsing through the HTML page, even through the embedded JavaScript in the page, and seeing an IMG tag and pre-loading it? It's the only explanation I have.
I'd have tried breaking up the img tag if I could recreate it in a simple test page, but I can't. If anyone here tells me yes Firefox 4+ definitely does that, then I'll change it to something like
myvar="<"+"a href='foo'><i"+"mg src='bar'></"+"a>";.
It'll be sad to have to do that (or one of the many other alternatives) but it'll work.
Is the JavaScript loaded from an external .js file or inlined in a script tag ? If inlined, you should make sure that it is not parsed as HTML content, instead declaring it as CDATA:
<script type="text/javascript">//<![CDATA[
// JS Stuff
//]]></script>
Related
I've read that images that come from the user should be sanitized. In order to understand how to prevent an exploit, I need to understand how the danger is manifested. Would the browser allow code to execute in an img element if it's loaded with code instead of an image? Or is there some other scenario to protect against? Thanks.
Yes, code inside an image will be executed by the browser:
http://lcamtuf.coredump.cx/squirrel/
If we view the source of this file, we see that there is valid html embedded in the valid binary code of the image. The browser will see this and say "Hey! I know what to do with that!" and just render it. It's not hard to imagine putting js inside <script> tags inside an image that will do all sorts of nasty things to your users.
I am new to coding and trying to make a chrome app which basically displays a bunch of fake error messages. I called to the image with a button, but the image is not showing up. Could someone please help and tell me what I am doing wrong?? Here is the code;
I was having some trouble with the putting the code in, so...
http://pastebin.com/iTtmLVE5
There's nothing wrong with ur code, but with its implementation. First open console (F12) and check if js file has been loaded properly. Also You should really consider where to put ur external javascript files. Usually they are placed in html head tag or just before closing body tag .
The difference between both of them is that, if u place js file in header, its loading priority is high, so it loads before DOM (Document Object Model, so just a HTML structure) and when u place it before body closing tags, DOM will load first, so user can see inetrface faster (Since js is loading after browser renders it).
After copy & paste of ur code and making a little cleaning it works. What i've done was deleting all unneccessary HTML code, changing js file name to something more expressive (in my case script.js) and everything worked well.
I've been searching for a while now, but I can't figure out how to load an entire page via AJAX and still execute all javascript and css.
Mostly I just end up with the plain text without any CSS.
Is there a way to do this? I tried jQuery.get, jQuery.load and jQuery.ajax, but none really work like that.
I have a different solution. You may try it with an iframe. Use jQuery to append an iframe script including all relevant codes into some part of your page (like some div). This may do it for you including CSS, like;
$('<iframe src="your_page.html"/>').appendTo('#your_div');
Or you may try something like;
$('<iframe src="your_page.html"/>').load(function(){
alert('the iframe is done loading');
}).appendTo('#your_div');
I have solved similar problem as following.
Download the webpage over ajax
Iterate it over and find any <script> and </script> tags
Get content from within these tags as text
Create new <script> element and insert there the code
Append the tag to your webpage
Another thing is you will need to somehow call the script..
I have done it this way:
I set standardized function names like initAddedScript callback which I am calling after appending the script to the page. Same as I have deinitScript called when I do not need the code (and its variables,..) anymore.
I must say this is awful solution, which likely means you have bad application architecture so as I have had:)
With css is it the same, but you do not need any handlers. Just append the style tag to your documents head.
If the page you load doesn't have any style data, then the external stylesheets must have relative paths that are not correct relative to the invoking document. Remember, this isn't an iFrame - you aren't framing an external document in your document, you're combining one document into another.
Another problem is that loading your complete page will also load the doctype, html, head, and body tags - which modern browsers will cope with most of the time, but the results are undefined because it's not valid HTML to jam one document into another wholesale. And this brings me to the third reason why it won't work: CSS links outside of the head section aren't valid, and the misplaced head section caused by your haphazard document-in-document collage.
What I'd do for compliance (and correct rendering) is this, which would be implemented in the Success callback:
Copy all link elements to a new jQuery element.
Copy the contents of all script in the head section
Copy the .html() contents from the loaded document's body tag
Append the link elements (copied out in step 1) to your host document's head
Create a new script tag with your copied script contents and stick it in the head too
Done!
Complicated? Kind of, I guess, but if you really want to load an entire page using AJAX it's your only option. It's also going to cause problems with the page's JavaScript no matter what you do, particularly code that's supposed to run during the initial load. There's nothing you can do about this. If it's a problem, you need to either rewrite the source page to be more load-friendly or you could figure out how to make an iFrame suit your needs.
It's also worth considering whether it'd work to just load your external CSS in the host document in the first place.
I suppose you are looking for something like this:
your page div --> load --> www.some-site.com
After a quik search the closest solution seems to be the one by "And": Load website into DIV
You have to run a web server and create a proxy.php page with this content:
Then your JQuery load() function should be like this:
$("#your_div_id").load("proxy.php?url=http://some-site.com");
NB. I have tested this solution and it should not load all the CSS from the target page, probably you'll have to recreate them. For example the image files stored on the remote server will not loaded, I suppose due to authentication policy.
You will be also able to view only the target page without the possibility to browse the target site.
Anyway I hope this could be a step forward to your solution.
Get your entire webpage as text using ajax
document.open();
document.write(this.responseText);
document.close();
OR
document.documentElement.outerHTML = this.responseText;
But you need to change the path of css and js pages in original webpage if the resulting webpage is in another directory.
So I've got an XHTML page with a script - not inline
> <script type="text/javascript"
> src="../global/js/scripts.js"></script>
and an embedded (I tried embed and object, same behavior) SVG document with a onload="CheckIfLoaded(evt)" attribute.
The problem is firefox doesn't call the CheckIfLoaded() function in scripts.js. Firebug gives me "CheckIfLoaded() is not defined" with no reference to any line numbers. I can't find any information regarding the scope of javascript functions with respect to embedded content. Curiously, it works fine in IE.
I could of course add a reference to the script into the SVG file as well but I believe that will result in the client downloading the scripts file twice and in addition I have 1000+ svg files and I'd really rather not add one line to all of them, although I suppose I could write a batch file or whatever if I have to.
Any one know more about this?
Do you have the onload on the svg element or on the object/embed tag?
Sounds like you want to call functions in the referencing ("parent") document, see examples here.
Are you sure that the script is getting loaded? Are there errors in the error console? If you put an alert() in the script, do you see it? (Before or after an alert() that you put in the onload handler?)
i see that that template has some code to see if the client has the required version, and it does stuff if it has or it doesn't
and there is a <object> tag inside <noscript>
question: if the stuff is gonna work with the <object> tag anyway why would you need all that stuff above with the control of version if it has or not ?
What is inside the noscript tag is only run in the case that the user has turned off javascript in their browser. This is required for the Flex page to still work in that case.
The other code is inside of a script tag, and handles the creation of the flash object smoother than the brute force method in the object tag. It would prefer to use this method, but in the case that scripting is disabled, it will use the object method instead in an effort to still give the user what they want on the page.
That is why it seems that it appears twice in the page. For any given browser only one section should actually run.