I am supposed to make a DOM based XSS attack what means that I insert a HTML element with javascript code. (for example an <iframe>)
I have this search box in the html file:
<span id="searchValue" [innerHTML]="searchValue"></span>
What is the [innerHTML]="searchValue" property does? How can I use this search input to place an element in the HTML code?
I know in javascript you can change the value between the element opening and closing tag with innerHTML, but here I have no idea what it does.
Thanks in advance.
I want to add the manifest attribute during run-time, so the I can control when the Appcache will be downloaded.
Ex: When a user is logged into the application properly,
<html>
// page content
</html>
changes into:
<html manifest="myapp.manifest">
// page content
</html>
Is there anyway I can achieve this using javascript, jquery or anything? What I want to is to control when the Appcache will be downloaded conditionally.(I have already read about having another html inside an iFrame.)
According to the specification, changing the manifest attribute after the document loaded has no effect.
You can still access the html element and change the attribute value, via document.documentElement:
document.documentElement.setAttribute('manifest', 'myapp.manifest');
It just won't do anything.
You can use .attr():
Get the value of an attribute for the first element in the set of
matched elements or set one or more attributes for every matched
element.
$('html').attr('manifest','myapp.manifest');
Normal ways to add an attribute to an element can be used, e.g.
document.documentElement.setAttribute('manifest', 'foo.appcache');
(As #FelixKing points out in a comment, assigning to document.documentElement.manifest does not work, by the specs, since manifest is not defined in the DOM. I was first misled by Chrome’s behavior in this issue.)
However, this has no effect. HTML5 CR says: “The manifest attribute only has an effect during the early stages of document load. Changing the attribute dynamically thus has no effect (and thus, no DOM API is provided for this attribute).”
(Well, it has the effect of being there, so you could use the attribute in styling, retrieve the attribute value, etc. But nothing that would cause application cache operations.)
Try this:
document.documentElement.setAttribute('manifest', 'myapp.manifest');
From the docs:
document.documentElement
Returns the Element that is the root element of the document (for
example, the element for HTML documents).
Try this by jQuery.
$('html').attr('manifest', 'myapp.manifest');
It may not be possible to effectively add the manifest attribute, but it might be possible to remove it and by that you may achieve the same result.
To disable appcache, I use this:
window.console.warn('removing appcache');
window.document.documentElement.removeAttribute('manifest');
Please be carefull, this may not always work!
The following code pulls HTML from a table and injects the contents into HTML email.
var content = $j('#product_comparison').html();
The problem with this approach is that the HTML email loses its styling because the original table references an external stylesheet and my understanding of HTML email is that all styles should be inline and not referenced externally or within a <style> tag.
Are there any Javascript / jQuery methods that can create the HTML with inline styles included so the result would appear correctly in a HTML email message?
Well, if you want a crude but quick way of achieving this, you can do as follows to set the style attribute of one specific element to all its computed style:
$('#my-div').css(window.getComputedStyle(document.getElementById('my-div')));
Although this will give you all style properties for that item.
Of course, you cannot simply use the .html() method for this, you'll need to clone each element individually.
http://jsfiddle.net/QfN6N/1/
Once you've got the HTML out, paste into the tool linked to below, preceded by a <link> to the CSS file and it will inline all the relevant CSS automatically.
MailChimp CSS Inliner
Hope this helps.
I have two jsFiddles:
http://jsfiddle.net/kRyhw/3/
http://jsfiddle.net/kBMSa/1/
The first jsFiddle shows code which takes HTML and appends it to my ul element. Note that the svg's 'X' icon appears.
I tried to rewrite this code using jQuery's element creation technique, but the path never shows up. If I replace the appending iconPath code with .text("Hello") I see Hello appear. I do not see any CSS differences between the two versions, though.
Could someone shed some light on what is going on?
it's parsed as HTML using the browser's innerHTML property. innerHTML can't parse SVG or other non-HTML content...
I guess this article will put some shadow on your questions. It has an example you are looking for.
jquery's append not working with svg element?
I have element that are being dynamically updated and I want to generate a css file which contains the rendered styles for that element. Is there anything that does this? Thanks.
There is nothing I know of in jQuery or JavaScript that does this intrinsically. However, if you just want it for yourself and not for dynamically creating stylesheets, then I recommend Firefox and the Firebug plugin. This will show you the CSS live and you can modify and export it, as well.
getComputedStyle gives you the computed style of an element:
window.getComputedStyle($("#my_element").get(0))