We are implementing an email support application. As in any other support application, the customer can send multiple emails in a thread or chain. This chain can also include replies from the agent, who is working on resolving the case. The HTML display, in this case, is structured as below,
<html>
<head>
</head>
<body>
<div>
EMAIL 1 - This has it's entire HTML content. Including Body css etc etc.
</div>
<div>
EMAIL 2 - This has it's entire HTML content. Including Body css etc etc.
</div>
<div>
</div>
</body>
</html>
The problem we are facing is these emails come with their own HTML content. This is causing in many cases conflict with our HTML structure or CSS or both. Resulting in the page to break in structure or for the CSS to get miss represented.
We tried putting these individual mails in an iframe, but that's causing the page-load to become very slow or unresponsive when there are multiple emails in a thread.
<iframe id="html_content" style="overflow:hidden;" scrolling="no" frameborder="0" width="100%" onload="this.height=this.contentWindow.document.body.offsetHeight+20 + 'px';" srcdoc="<div>{{htmlContent}}</div>"></iframe>
Any suggestions on how this could be handled best and reduce conflict with our page css or html structure would help.
You need to do what Gmail etc. do and modify the code before it's inserted into the page.
You can reverse-engineer their emails by looking at the output code from within a robust email client. (See https://webapps.stackexchange.com/questions/33926/can-i-view-the-html-source-of-an-email-sent-to-my-gmail-address for Gmail source code.)
To avoid CSS clashes, you will essentially need to prefix all incoming CSS classes.
To avoid HTML clashes, you'll need to disallow certain properties (or only allow some). For example, you won't want fixed positioning. Absolute positioning may require your wrapping div to be positioned relatively.
You need to change the <body> tags to a <div>.
You need to remove the <html> tag, and <meta> tags, after you've interpreted them. I.e. some <meta> tags contain instructions like "this email accepts dark mode", or, "this email only accepts light mode" - and you'll need to interpret accordingly, if you think you need to do anything with them. You might be able to safely ignore them (remove them) for a first version.
You may want to insert lazy loading functioning so that only certain content gets loaded at a time - particularly images and other assets (although typically it is expected that external stylesheets get stripped, since you can't ensure they won't interfere).
For security and non-interference, you need to remove <script> tags.
For mobiles, I've noticed that there is some sort of detection for responsiveness, and if the email is not responsive, the email software will add something like a transform: scale (0.xx) to the outer wrapper(s) so that it fits. Deal with that how you like.
Related
I have built a browser-based HTML/Markdown code editor, that seems to be working great for the most part. I have live rendering previews as the user updates code, etc. I already sanitize any <script> tags, but other elements such as <div> or <style> are allowed.
The problem is if the user saves the document with invalid HTML (i.e., unclosed <style> tags, etc.), upon reloading the document, the whole site will be inoperable due to my HTML elements being "eaten" by the unclosed tag in the user code.
Question: Is there a solid strategy to render user code in an isolated container such that errors inside that container do not bleed out into the rest of the page?
I am using Javascript with React. This seems like a use case for iFrames, but I have had it beaten into me that iFrames are never a good idea, and there is always a better way to do what you want to do.
Iframes are the perfect solution for problems like this. Over using them can be a problem on a page, but in this case it is the right tool for the job.
Also not sure why that was beaten into you, the frame tag is always bad, but iframes used sparingly are useful.
I'm writting a website that allows users to paste in html for their blogs.
The html they paste in will then get saved to a file and this is what will be read and changed when the user makes changes. The file will almost be like a complete web page so it will have all your normal tags; head, body, div's, etc. etc.
This means it should allow almost all html and css tags apart from anything that could cause a security breach. So it essentially needs to strip php tags, certain style tags, and html/javascript script tags.
I looked into the strip_tags function but I'd rather not use that because:
a) it removes html comments which I'd rather keep and
b) it would be a lot of working specifying all the tags that it needs to ignore, considering I want it to ignore vastly more tags than I want it to strip.
My guess is that this is something regex-esc using preg_replace?
I'd like to add; I'm newly aware of XSS attacks through CSS too so any ideas/thoughts on how I could block certain css style tags out would be wonderful :)
Any ideas on what I could do?
What I want is to be able to work on context-free HTML elements surrounding 'entry points' (like <script> tags or events) using JavaScript. I have some tight restrictions on what I can do.
Summary
I have multiple user-generated blocks of HTML which need to be processed on their own, as they load.
The content of these blocks can contain similar blocks, with similar behaviour.
The content will also need to be duplicated once, possibly restarting execution of the scripts mentioned in 2.
These blocks are generated from static templates and cannot (initially) contain unique identifying data, like IDs or random attribute values.
These blocks can also be generated through AJAX, which is out of my control. They will need to take care of themselves as they appear, without relying on any order of execution.
Background
This is for a forum software, where certain BBCode tags, say [tag]content[/tag] are replaced with fixed HTML. I have no access to any server-side scripting, so the replacements are context-independent, i.e. always the same.
For example, [tag]{content}[/tag] would turn into something like:
<span ...>
...
{content}
...
<!-- script entry point -->
</span>
I need to do some client-side processing around the time when the data is loaded.
I cannot change the requirements of the problem. The end product is code for generating tabs, like:
[tabspace]
[tab]content 1[/tab]
[tab]
content 2, and
nested tabs:
[tabspace]...[/tabspace]
[/tab]
[/tabspace]
The content that is output by the script consists in the "tab buttons" themselves, which would link to their respective content.
Restrictions
I cannot use IDs. Everything must be or start as a context-free replacement of the template.
[tag]s can be nested.
The script needs to duplicate some of the content, parts of which can be similar scripts and so on. This messes up scripts which are already running on the outer pairs of tags. I have a bottom-up solution to solve this, but it relies on starting scripts at any depth without worrying about similar surroundings. (another way to phrase it)
These tags can be loaded dynamically in any post on the page, at any time, using AJAX.
There can be scripts at any point in the template, to make the problem easier.
What I tried
Using JS to dynamically output a <span id='something random'></span> as it loads, search for the given ID and use its location to find the surrounding elements. It doesn't work when I load pages dynamically and when tags are nested.
Give a class to the surrounding element and find the last element of its kind. This doesn't work because we may have updates in the middle of the page, after it's loaded.
Solutions which I'd rather avoid
Using <img src='bogus' onerror='script entry point'/>, I can run a script and access surrounding tags using this. But I'd rather not use broken links and errors to solve a simple and pertinent problem.
I want to know if there is some way to create an independent HTML block .
For more explanation :
My problem is that I have a webpage in which I allow some users can add content (may contain HTML & CSS )
I allow them to add their content inside a certain block , but sometimes their content may not be clean code , and may contain some DIVS with no end , Or even some DIV end with no starting DIV
This sometimes distort my page completely
Is there any way to make their content displayed independently from my parent div , so that my div is first displayed well , and then the content inside it is displayed ?
I'm sorry for long message .
Thanks for any trial to help
sometimes their content may not be clean code , and may contain some
DIVS with no end , Or even some DIV end with no starting DIV This
sometimes distort my page completely
The easiest solution for you is going to be to add the submitted content to your page inside an <iframe>. That way, it doesn't matter if the submitted HTML is invalid.
If you have to worry about users possibly submitting malicious content (such as JavaScript), the problem becomes much harder: you need to sanitize the HTML. I can't tell you how to do this without knowing what server-side language you're using.
My problem is that I have a webpage in which I allow some users can add content (may contain HTML & CSS ) I allow them to add their content inside a certain block , but sometimes their content may not be clean code , and may contain some DIVS with no end , Or even some DIV end with no starting DIV This sometimes distort my page completely
If that is the problem you are trying to solve, then having some markup to say a chunk of code was independent wouldn't help: They might include the "End of independent section" code in the HTML.
If you want to put the code in a page, you need to parse it, sanitise it (using a whitelist) to remove anything potentially harmful and then generate clean markup from the DOM.
you could use Static iframes.
check this out http://www.samisite.com/test-csb2nf/id43.htm
The safest way is to restrict the tags they can submit, and validate/sanitize those that they do, similar to the way we can use markup on here.
Having unchecked HTML injected into your page is asking for trouble.
Failing that, good old iframe will do the trick.
Okay, i belive there is something you can do, but it can require some time. You can use a parser to go through the users html, and get the tags and their content, and recreate the html making it clean.
But, as there are a lot of tags that can be used, or even invented tags, than you can limit the tags that the user are able to use in their html. You put a legend with the acceptable tags.
There are some pretty good html parsers for php, but they may break for some very bad html code, so this is why i suggest you just recreate it based on the parsing with a limited subset of acceptable tags.
I know it's a difficult/time consuming solution, but this is what i have in mind
I have got some detail content pages on my site where I don't have the complete control over the html content that is displayed in a certain div. Now when the content of the external resource contains invalid html, like having no ending my navigation in the right-bar is also italic. I don't want to use iframes, like ebay, and there is probably other ways to fix this. Hope on an answer.
<html>
<body>
<div id="page">
<div id="content">[content of external resource]</div>
<div id="right-bar">[My navigation]</div>
</div>
</body>
</html>
A simplified structure of my page is above.
I hate to tell people to use Tables when they aren't necessary, but in this case, I feel that it could solve your problem.
The issue that you are facing is one of the browsers well-formed html check, so, you could have some browsers that work as you hope, and others that work the way that bothers you, as each rendering engine is going to perform it's own well-formed html check flavor.
If you wrap it inside a td, then I don't think that it will be able to bleed styling the way that you are seeing. Just a thought. The reason that a td container is going to help more than the div container that you are currently using is the following: Since you are wrapping their stuff in a div, and they are most likely wrapping their own stuff in divs, the browser doesn't know where the mistake is at. It doesn't know where the missing div tag should be inserted. So essentially, div in div in div creates problems for the well-formed html check, as it is not sure which of the tag you forgot. However, div in div in td, that is more distinct. If the td open and closes, then it knows that the missing tags belong to a smaller group of possible elements. In other words, you are making it easier on the well-formed check to do it's job by wrapping it inside different tag types.
This makes sense to me. I hope that I have explained it ok.
I think that there is no other way than using iframes. If you don't use an iframe to host the external content means that the external content will be included in the DOM structure of your page, so unless you parse all the external content code to check all the possible things that should affect your page (and this could be a madness), you will never be sure that your page will be safe from collateral effects coming from the external code.
And even using iframes, you should parse anyway the external content to look for script tags, to prevent any undesired javascript code been executing inside your page.