disable w3c validation in specific divs - html

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

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.

Avoiding bad HTML to distort page

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.

HTML Form Input and Help Text

We have a many HTML forms in our application. Corresponding link to help documentation which is prepared by the content team for each page is given at the top of the page. But this does not make sense for blind people and even much for regular users as each time they need to go to the link which opens a separate page.
How can I display help text for the input boxes with content present in different page which is relevant to the current input ?
For visually challenged users I can use "aria-required" and "aria-describedby" flags if there is a way to link to that documentation.
The help text really should be on the same page as the form. You can always use an accordion or some other method to collapse or show/hide the docs.
If the content really does have to live at a separate URL, I suppose you could make an AJAX request to the corresponding HTML page to pull the content in upon user request for it, but make sure to use ARIA Live Regions so users of assistive technology will know that the new content has been loaded.
Also, this may be helpful: WCAG 2,G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input

How to disable foundation or bootstrap styling for a block of html code?

I am using mailgun (although this question has nothing to do with mailgun) to parse the incoming email and mailgun will http post the parsed email to my server.
When I received the post, I got the html code for the multi-part email.
I want to display the html email to my user, I am using rails, so it's something like
<div>
<%= raw(message.body_html) %>
</div>
However, it looks different than it does when I view the same email in yahoo or hotmail (I know different email client will display the html email differently, but mine looks drastically different).
Here is how it looks on my self-built client:
And this is how it looks in yahoo for the same email:
I use Zurb Foundation as my styling framework. However, I think the email html comes with its own in-line styling, I look at the code it does look like it does, then it should look similar enough with other clients.
So what is the best practice to display html email assuming you get a block of html code and want to display it as is without letting other frameworks overwriting its style?
Further more, is it possible to disable Foundation (or twitter bootstrap for that matter) styling for a block of code, for example, something like
<div>
<% disable_foundation_styling begin %>
<%= raw(message.body_html) %>
<% end %>
</div>
Of course "disable_foundation_styling" is only my imagination.
Thanks in advance!
!!!!!!!!! Update 1/1/2013 !!!!!!!!!!!!!!!
As #Alex L. suggested, I tried but it doesn't quiet work as expected.
The iframe renders everything in the view as before (see picture below), and that's understandable, since the iframe content is just the view of another controller, which in the case rails will include all the application layout templates as well. However, the toolbar is not my biggest concern, it's what's inside the iframe just looks exactly as before.
I suspect iframe may not be the way to do it. I look at the code of both gmail and yahoo, and they don't use iframe. Instead they use very deep nested to render the html email. The part of the html email have the same code for both yahoo and gmail, except that yahoo insert an id of its own for every single DOM element.
So now I suspect there is some foundation styling that affected how it looks.
I will update once I find out more.
To my knowledge it's not possible to instruct a browser to selectively ignore your page's CSS within a subset of the DOM. You have to explicitly override the page's existing style.
However, if you have an iframe element, the contents of that frame will be rendered independently of any styles applied to the containing page. So you could create a separate controller and view just for rendering the contents of your message, and use that as the source for the iframe.

How to embed a dynamic generated HTML document into HTML document?

I am writing a testing framework for my web app. The case is to test some AJAX methods. While there are some server side errors, the response of AJAX calling is a HTML document log. However, I would like to display the HTML document in the same testing page while the response received. I am afraid I cannot insert the HTML document into a div since it is not html snippet but a complete HTML document. Is there anyway to deal with the problem without server-side effort?
Besides, I have considered about iframe. However, it seems that it only could display a webpage by specifying the url.
Thanks in advance!
Edit
I tested Aaron's second solution. It surprised me that I could insert a complete HTML document into HTML document and keeps its styles.
You have two options:
Create an iframe and load the HTML document into it
Or locate the body element in the result and just add the content of that element to the div next to your test case.
The first one can cause problems with Cross Site Scripting (which you may or may not apply to your case). The second one means you have to merge the styles of the results into your test HTML document or it won't look as you want.