Avoiding bad HTML to distort page - html

I am working on a web application where I read emails of an e-mail address (using pop) and store the html content of e-mail body in MS SQL Server 2012 varchar(max) field.
A functionality of website require me to display these stored emails inside a tag held for that purpose.
The problem I am facing is that if an e-mail body contains bad HTML, it end up distorting the whole page. For e.g. if the e-mail body contains an additional </div>, it closes my main <div> tag (the one which is supposed to hold entire e-mail body) and the remaining HTML of e-mail body flows out of the holding area, becoming part of main page.
This application is coded in VB.NET and running on IIS 7.5.
PS: I tried searching for similar questions but couldn't find one. Please link me if this has been asked before.

You should load external code in an iframe to limit its effect only to its context - not your application page.

Display the actual body of the email inside a separate iframe. Use the new HTML5 attributes like sandbox to harden security.

Related

Embedding a playable video in gmail without using iframes [duplicate]

I use codeigniter to send email... After activating the user account it sends another email to insert tag but when the user receives the message, no tag appeared but when I tried using other elements like or it renders the style but how come doesn't?
$message = 'Congratulations! Use the script below to add your widget.<br>';
$message .= "<iframe frameborder=\"0\" src=\"<?=base_url() ?>business/widget/{$id}\" height=\"320px;\" width=\"480px\" style=\"border: 1px solid #ccc;\"></iframe>";
$this->email->message($message);
if($this->email->send())
{
other code....
}
Gmail and many other email clients are very strict about what HTML you can use in your HTML emails.
<iframe> is strictly off limits, because it could expose the user to a website which they were not expecting, and the website at the other end could record info about the user (such as their IP address). Images are blocked for similar reasons.
If I were you, I'd stick to using super basic HTML and CSS. Focus on getting the message to the user and hope their client makes the message look pretty. Always offer a link to view the full message elsewhere.
<iframe>s cannot be used in most email clients – whether in an application or as a website. They are either stripped for one of several reasons:
The mail/web client could have trouble rendering it, so it is excluded.
An <iframe> could be used for phishing/malicious attacks, putting malicious code in what was otherwise vetted and safe (the browser/client can't see or scan what gets loaded into an iframe, it just loads it into the DOM).
An alternative, (what YouTube do), is instead of embedding something in an iframe (in their case, a video), they have an <a> wrapped around an <img> or thumbnail, which gives the impression that you are playing a video. All it does when you click on it, is it take you to that video's URL.
If you were trying to put extensive code into the email, you could manually write it in. This however has other effects, as some other tags are limited/styling can be a big hassle for emails. AFAIK some HTML5 elements are also stripped from emails.
As Orangepill said, Campaign Monitor have done the legwork and provided a chart showing where iframes can be used. They also suggest to stay away from iframes.
A solution not mentioned would be to have an image, with a link at the bottom that says View this message in a webpage which will take the user to a page with the <iframe> working.

disable w3c validation in specific divs

is there a way to run a webpage through https://validator.w3.org/ while also ensuring that a particular div's contents will not be checked?
On a certain page, I print an email that was scraped from gmail and display it exactly how it was obtained from gmail. I would like to be able to validate all the html code around that email itself.
No it's not possible to validate partial content in the page.
With regards to your specific case you may have two solutions.
Just validate the template with a dummy content in pre-production stage.
insert the email in a programmatic way through an iframe

Programatically modifying a HTML page from ASP.NET

I have an ASP.NET web app with a standard default.aspx, from within which I need to load a html page from another site (all internal intranet) and pre-populate form input controls on that loaded html page using ASP variables. Specifically, username / pwd on a login form based user details loaded by the aspx from a db. The html page also contains a considerable amount of js (shouldn't directly impact this question though).
Not sure of the best route to approach this. I have considered:
1. Loading the html page in a frame, then somehow manipulating it's DOM from another frame loaded from the aspx.
2. Loading the html during aspx page load or render, then replacing the relevant sections of the html with the new values.
I have had a stab at both approaches and ran into issues. With (2) the resulting HTML isn't recognized as HTML by the browser at all (despite the written response being just the original html relayed from the original site). I can see the HTML source in the browser, but the page itself appears blank.
Answers warmly anticipated. Thank-you.
1.if you want to go wityh iframe
You can easily modify values from communicate between parent window and iframe
from parent to iframe function
document.querySelector('iframe').contentWindow.ChildFunction(33);
from chhild to parentfunction
parent.parentfunction("4rom child")
make a function in iframe that accept an object (from parent) and populate it in.
make a function in parent that accept an object (from child) .
2.how are you "Loading the html during aspx page load or render,"
- ajax or something else?
-making a user controll
both should work fine .
( could you tell how are you loading html ?)(as it should have worked)

How to display CKEditor content in HTML page?

In my application I have used CKEditor text editor to store large data.
That data may come from another html page by copying content from any web page.
When doing above scenario,
if client missed any to copy properly ended html tags from that web page, they copied incomplete html content. When client paste it inside CKEditor, it showing good.
But If I display whole content without CKEditor,
Its leading to following issues,
Page collapse , because if client copied partical (in completed content from other web page)
CSS class override
Please give solution for that.

Creating a scrollable block without using div overflow:auto or JS

I'm trying to create an element inside my html page that will contain a table but I want it to have a fixed height and a scrollbar. Since I will be sending this via email and some email clients don't support text-overflow, I want to be able to do it without using any overflows or javascript. Is this possible? Thanks.
No. Email HTML has to be EXTREMELY old school. Think HTML4.01. Outlook uses MS Word 2007 as it's HTML parser. 99% of your fancy CSS won't work and zero JS will work. Let the content fill the email body and let the user scroll the client window.
One option that is common is to have "leader text", like the first 120 or so characters of whatever article you want the user to read, accompanied by a "read more" link that takes the user to the full article on the website. The purpose of your email should be to get the user to your website asap so you can utilize a browser and sell your content or service.