I wonder if triple curly brackets sanitize user input within templates to be XSS safe. <script> tags won't render out, but how about other creepy XSS hacks?
Thanks in advance!
Its not safe, because you can still run malicious code, like this:
Template.xx.helpers({
'bad':function() {
return "CLICK ME PLZ!";
}
});
The template
<template name="xx"> {{{bad}}} </template>
This means the user needs to click the button, but you could make it more of a sure thing by use other events such as onmouseover:
A floating div can take up all the space & use mouseovers to assure the code is run. This can be used as the return value in this example:
<div style="width:100%; height:100%; position: fixed;" onmouseover="console.log('haha');"></div>
You can also have other exploits such as changing page content via CSS (using content: or higher z-index floating divs to change the page's content.
Related
i have one little issue that cant resolve myself. I want to remove second box (at bottom) in this page but when inspect CSS found that both elements are defined as :
<pre></pre>
so dont know how to handle that box, and remove it. Form in that page are generated by "User registration & user profile – Profile Builder plugin".
in your css:
:css selector {
display:none;
}
you also can declare in html:
<pre style="display:none;"> </pre>
Try this in your javascript file, or add it in <script></script> in your <head>.
document.getElementsByTagName('pre')[1].remove()
You also have jquery on the site without the traditional $ alias, so you can also do:
jquery('pre').eq(1).remove();
http://jsfiddle.net/fJkBU/1/
That's my code. Basically, I have an iFrame whose source may change. I need the containing DIV to expand vertically to accomodate whatever is inside the iFrame.
I can't get it to work. Any ideas?
MY CODE
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails: Welcome aboard</title>
</head>
<body>
<div id="page">
<div id="content">
<div id='commentLoader' style="width: 500px;">
<iframe id="commentIframe" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
</div>
</div>
</div>
</body>
</html>
All the other methods will not work, because...
...Mozilla (and all other major browsers, as pointed out in paislee's comment) has this thing called the "Same Origin Policy" which states:
The same origin policy prevents a document or script loaded from one
origin from getting or setting properties of a document from another
origin.
Essentially, Mozilla makes sure you cannot access another webpage's properties thru JavaScript because that would be a security hazard (for cookie hijacking and such I believe).
For example, here was a similar question when discussing an iframe for a page of the same origin; here is the answer as applied to your problem. As you can see in Firefox's error console, your "permission denied to access property document"...
Ok, so you have a couple of options now that you know you can't access the iframe's height thru JavaScript (because it is hosted on another domain):
Change it so you do control the contents of the iframe (then either put it under the same domain or use the solution posted in the similar question).
Assuming 1 is not possible you have to use your server to access the webpage. The first option here would be to screen scrape the contents of the iFrame and then display it
If you aren't up for writing a screen scraper you could use a proxy script and then display an iframe of your proxy (hosted on the same server); this would permit you to access the site as if it we're your own and the user would notice no difference (Note: I'm pretty sure this is against all terms of service/possibly illegal as the user could try to interact with the website (unaware it is loaded thru a proxy) in the iframe (i.e. login)... and you would effectively be phishing)
I am assuming that what is loaded in the iframe is a set of comments (IDs kind of gave it away), and I will also take the liberty of assuming each comment has a fixed height or maximum height. In which case you could write a php script that loads the page, counts the amount of comments (regex) and then multiplies number that by comment height to determine the appropriate height of the iframe
Good luck,
At the very most you'll get an iFrame to be the size of the window, not the contents' height. And, as you seem to want it to expand, why not just make the iFrame 100% height of the window from the start?
If the iFrame's loaded from the same domain you can try the Iframe SSI script II. I used this script way back for a class project but you can give it a shot.
I'm not sure I get your answer 100%, but if you want a container that expands vertically due to the content you can use jquery ajax. when you load content inside a it will generate a new height. give this div some style, and you have yourself a dynamic generated div height. basically, you will take this other page and put it on yours.
Do a search for cross-domain ajax. I've used it in the past and it wasn't pretty but worked!
Call the below Javascript function in Iframe onload event.
function autoResize(id)
{
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
}
document.getElementById(id).height= (newheight) + "px";
}
e.g:
<iframe id="commentIframe" onload="autoResize('commentIframe')" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
You've got single quotes around your CSS id. Replace them with double quotes like the rest of your code.
Change:
id='commentLoader'
to:
id="commentLoader"
Hiya,
I have run into this problem many times now using drupal or wordpress where my tinymce config files are a bit too cleverly abstracted.
The problem is that tinymce auto-wraps my <img> tags in <p> tags. If there is a way around this in either Wordpress or Drupal, that would be awesome.
My problem exists when I want to do something like this
<style>
img {
float: left;
}
p {
float: right;
margin-right: 20px;
width: 400px;
}
</style>
and I want my code to look like this
<img src="some_png.png" />
<p> Imagine a lot of lipsum text.</p>
but tinymce does this
<p><img src="crap_im_wrapped_in_a_paragraph.png" /></p>
<p> Imagine a lot of lipsum text.</p>
I'm trying to float an image to the left of a paragraph with a set width, without having width restraints on the image itself.
in this case the image's parent then gets a width and a float right. That is not what I want.
It is very possible that there is an easy clever fix for this but I still have not found one. I would prefer not hacking my config files if I don't have to.
1 caveat...
The only reason this problem exists is because I want clients to be able to easily do their own editing so I won't just have them wrap the image in a <div> instead of a <p>. That seems to me unintuitive for my clients who are the actual users of the wysiwyg
Previous Solution
I have been using a regex to remove the paragraph tags but it is always somehow problematic. I end up adding more images somewhere else then i have to keep tuning my regex to ignore them. 502 errors abound!
my question(s) is(are)
What can I to in my CSS to make the image wrapped in the paragraph do what I want it to do?
and if i can't
What drupal or wordpress specific can I do to make that paragraph disappear?
-- Edit --
the solution needs to be compatible with IE7+ and modern browsers. :P
Thanks!
aaron
You call tinyMCE with tinyMCE.init function, don't you?
So add this string to it:
forced_root_block : false,
Also you can change tiny_mce_src.js. Find
forced_root_block : 'p',
and change it to
forced_root_block : false,
P.S. Don't forger to clear the cache.
If you don't want it to wrap image tags, look in the Tinymce source for a function called "isBlock". There is a regular expression white list test that determines whether or not an element is a block element. If you need image tags to be treated as block elements then add "IMG" to the list of node names it looks for. I just had to do this myself, am still looking for negative side effects right now but it does solve the immediate problem at hand.
EDIT:
That was more or less a temporary solution, if you just need to stop the root level block wrapping of image tags, there's a function called "forceRoots" where you'll actually want to perform your image tag check. I did it by modifying this line of code:
if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8)) {
to look like this:
if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8) && nx.nodeName.toLowerCase() != "img") {
This solves the problem quite well for me.
If we're talking about a WordPress site, there's an annoying filter that will automatically wrap some elements within the content with a <p> tag called wpautop. It's actually handled by wordpress at runtime and not by TinyMCE.
Add this to the top of your template or functions.php file:
<?php remove_filter('the_content', 'wpautop'); ?>
source:
http://wordpress.org/support/topic/stop-wordpress-from-adding-p-tags-and-removing-line-break
In Drupal, one sort of "klugey" way of doing this would be to use hook_nodeapi() or the d7 equivalent(s) for displaying nodes, and using a regular expression to replace p-wrapped images occurring at the beginning of the field. You would have to inform your client that they wouldn't look right when editing, but that on display, they would appear properly.
If you're looking for a css option:
In css2 you have the :first-child selector, and in css3 there is also the :only-child selector. p:first-child img could be used with negative margins to offset margins you've declared for p elements. A downside would be that this would also impose the same negative margins on any images the client might put in a first paragraph. css3 might not be supported in all the browsers you aim to cover, but if you can use it - you could use the :only-child selector for images which are the sole children of p elements, offsetting the parent p's margins with negative margins.
If Javascript is an option, then you can use jQuery to reparent the img to be a sibling of the p. Something like this (untested)
$("p > img").each(function () {
var $this = $(this);
var $p= $this.parent();
$p.before($this);
});
Add logic to only the paragraphs/images you really need.
Ugly, yes, but a viable solution as a last resort.
Add this line:
theme_advanced_blockformats : "p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp"
When you want to insert a img select div:
<div>
<img src="my_img.jpg>
</div>
No need to modify anything with css.
TinyMCE 4 wraps everything in block elements. The default wrapper is P. Click on the image and choose another wrapping element like DIV. To add DIV to the menu add this to functions.php:
function make_mce_awesome( $init ) {
$init['block_formats'] = "Paragraph=p; Heading 1=h1; Heading 3=h3; Heading 2=h2; Preformatted=pre; Media=div";
return $init;
}
add_filter('tiny_mce_before_init', __NAMESPACE__ . "\\make_mce_awesome");
There is option "valid_children" https://www.tiny.cloud/docs/configure/content-filtering/#valid_children. It controls which elements you disallow (-) or allow (+) img tag to be wrapped in.
This example is for
- not letting img tag to be child of p and h1-4
- letting img tag to be child of div and span
tinymce.init({
valid_children : '-p[img],h1[img],h2[img],h3[img],h4[img],+div[img],span[img]'
});
I fear this is not possible due to the fact that img is an inline element. Tinymce wraps everything a user enters into block elements (divs or p-tags), but img is not a block element.
I have a messaging tool within the website I am currently working on. The idea is to have a header div and a details div (display="none") for each message.
Ideally, if javascript enabled, I have just the header showing and when the user clicks on it, the details div slide open.
This is fine but how should I work it if javascript is disabled? I was thinking of expanding all messages if disabled, but I don't want a flicker briefly when the page loads of all images open and, if javascript enabled, they collapse.
I'm using ASP.NET and was thinking of checking javascript status of the browser server side but i found out that it can't be done cleanly.
Any suggestions on how to achieve this?
One option is to place this in your head (after the defined styles):
<noscript>
<style type="text/css">
#mydivid {display: block;}
</style>
</noscript>
EDIT: Ive actually posted a better answer, which works off a correct default state.
Actually, the most semantically correct way that you could do this is to append another stylesheet to the head via javascript containing styles that will be implemented if javascript is enabled.
In your example, you will retain the default display for the elements in question.
Then you will create an additional stylesheet (js-enabled-styles.css for example), and place your display:none within that.
Then, in a script tag in your head you will append an additional stylesheet. Using jquery this would be:
$('head').append('<link rel="stylesheet" href="js-enabled-styles.css" type="text/css" />');
You are right the server can only tell you if the browser has JavaScript, it has no clue if it is enabled or not.
Things you can try is do not use onready or onload, just put the lines at the bottom of your JavaScript to hide the content. You might even want to place it directly after the elements on the page.
<div id="foo">
asdf
</div>
<script type="text/javascript">
jQuery("#foo").css("display","none");
</script>
One side note, sounds like you should be using a definition list instead of two divs. Would make probably more sense to a person using a screen reader.
I believe you're looking for the <noscript> tag.
You could achieve the result you describe in one of several ways, but here's a fairly straightforward one. Define your default style for the divs to be the following:
<style type="text/css">
div.details
{
display: none;
}
</style>
And after this style tag, use a noscript block to override the default (JavaScript enabled) style, as such:
<noscript>
<style type="text/css">
div.details
{
display: block;
}
</style>
</noscript>
Want to edit things like DIV size, color, positioning (absolute), height/width etc.
You can just output the CSS like any other with Response.Write or the <%= someValue %> methods.
Here are some of the other methods:
http://cfouquet.blogspot.com/2006/06/making-dynamic-css-content-with-aspnet.html
If by "on the fly" you mean while the user is interacting with the page then you're going to need to use some javascript. I suggest learning jQuery as it provides an easy and effective way interact with the DOM.
Ryan, you may want to look into Themes if you want to change the appearance of your site based on user preferences (Learning about Skins can help as well but master themes first). This is really the right approach in the ASP.NET model unless you are looking just to adapt some specific output to certain data conditions.
I'm not sure of what you're trying to do with the information given, but to add css on the fly you can use jQuery to add the class to an element with those certain specifications.. you can have jquery wait in the background for something to happen on the client and just add the class with that certain style
Example:
<style>
p { margin: 8px; font-size:16px; }
.color { color:blue; }
</style>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("p:last").addClass("color");
});
</script>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>