Force image rendering and download on Outlook sent from MailChimp? - templates

Currently, all emails being sent from Outlook do not download and display images in Outlook. There are many possible reasons for this ranging from:
Outlooks own built-in Security
Outlook's rendering engine
Most Outlook versions on Windows don’t have good support for the CSS box model or things like flexbox, CSS Grid, and floats.
I was just wondering if there is anyone out there who knows a code solution that would allow an image to render and show on Outlook without Outlook prompting the User to download the image?

Outlook desktop may show images embedded via the CID method, but you can't do this via MailChimp, and this method does not work for non-Outlook users.
Therefore, you'd need to use Outlook-only code for the CID part, and the normal method for others.
You first attach the image to the email (which you can't do in MailChimp).
Then add a MIME header to set its CID (Content-ID).
The actual code for that is programming specific; e.g. Using Content-ID and cid for embedded email images in Thunderbird
Then reference it in the message body by setting its CID (Content-ID) - not image name - and using a standard HTML tag:
<!--[if mso]>
<img src="cid:some-image-cid" alt="img" />
<![endif]-->
<!--[if !mso]>-->
<img src="imagename.jpg" alt="img" />
<!--<![endif]-->
As you can see, this is not straightforward, so few (if any) do it this way. Please keep in mind the whole purpose of image blocking is to help prevent spam, and to stop adult pictures showing. So it's probably not likely to work, or work for long (until you get blacklisted).

Please do not try and get around rendering safety nets, which providers have implemented on purpose!
There are ways for subscribers to turn off the automatic image blocking, but it's there for a reason, do not try and circumvent user security for your own benefit.
More details here on how users can turn off image blocking but also the reason it has been implemented in the first place:
https://www.howtogeek.com/398897/how-to-force-outlook-to-download-images-if-youre-sure-its-a-good-idea/

Related

Markdown for NVDA or similar screen readers

I'm working on web application and our team wants to make it more accessible. In particular, we want to do a better support for people who can't see (using screen readers).
One of the popular solutions is NVDA. After reading their doc here, it's not clear - do they support a custom markdown?
Can I use some attributes/tags/metadata so that NVDA read stuff differently? For example:
Google will be read as 'Google'. Can I decorate it in some way, so that it will be read as 'Link to Google'?
Thank you.
There is no such thing as a custom mark-up for screen readers. Well, there is something like that, I'll tell you about it below.
Basically, when you try to make your web site more accessible (a very good thing to do, btw!), you should minimize your impact on screen reader users. By "impact" I mean that your goal should be that your blind user would see just the same thing as a sighted user, but as the web site developer, you give him/her this ability to see, navigate, open, click and so on, and so forth.
There is a way to customize the layout, though. It is called WAI-ARIA. You can do lots of crazy (and smart) stuff with it, it is great and mighty, but the first rule of the fight club, I mean, WAI-ARIA practices is:
If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property
to make it accessible, then do so.
— from here.
I.e.: If you can not to use ARIA, don't use it.
Let's take your example with the link to Google: you want your blind user to see the "Google" text and to understand that it is a link, right? Well, I'll tell you what you should do to achieve this. And you need to do... drum roll... nothing! NVDA, or JAWS (which you definitely should test with, it's a major player!), or TalkBack on Android, or VoiceOver on Apple devices, will say: "Link Google", or "Google link" (depends on the screen reader and on particular user's settings). that's all.
Of course you might have done this (but don't do it in any way!):
<span aria-hidden="true">Google</span>
See how crazy (and mighty!) it is? Thus you're telling the screen reader that you need your custom text to be read and hide your main link text (just in case; I've just tested with JAWS, everything works even without the aria-hidden attribute, so it's merely for an example).
However, if your link is a span with some fancy styling, ARIA is your everything: you just say <span role="link">, and your users will get a pleasant experience instead of trying to find which word to click.
And a last example: in Bootstrap there are lots of decorations like
<i class="fas fa-arrow-up"></i>
If they are on a link (and mostly they are), some screen readers such as JAWS would report two links, one with text, and one empty, just "link". In those cases it is really good to hide this stuff from screen readers:
<i class="fas fa-arrow-up" aria-hidden="true"></i>
NVDA, like JAWS, VoiceOver, Talkback, and several others, is a screen reader. A screen reader is software that a low-vision or no-vision user will use to access their computer. If you write semantically correct html, then your app will automatically work with a screen reader.
To create semantically correct html, the W3C has created a set of guidelines, call the Web Content Accessibility Guidelines (WCAG) that outlines things you can do to improve your web application to make it available for the greatest number of people.
It includes things like having alternate text for images, having labels for form elements, using well-worded text for links, and using the proper html tags for semantic elements, such as <h1> for headings, <ul> for lists, <table> for tables of data, etc.
When native html semantic elements can't be used, for whatever reason, then there are ARIA attributes and roles that can be applied to give screen reading software a clue as to what type of object you are trying to convey.
So, there is no markdown for NVDA or any other screen reader. You just have to be smart in your use of html.

Should I remove all CSS while sending HTML emails in Django?

I have a Django-powered WebApp that occasionally needs to send pretty HTML emails to my users.
I'm learning how to send HTML emails using Django. Here are the instructions I'm following. They are quite simple and good: http://www.djangofoo.com/250/sending-html-email
By following these instructions I'm able to send HTML emails. However, the emails I want to send should share the styles and look-and-feel of my webApp of course. Each Django template on my website includes a bunch of CSS at the top that ensures a consistent look. However, when I simply send that template as and HTML emails, the styles do not kick in in the email. Does CSS not work while sending HTML emails through Django?? Do I need to manually and explicitly set the fonts, colors, bold, italics, of each element in the HTML template I would like to use for the email? How do other people do this?
CSS is very difficult to get right with html emails... The general rule is to use inline styles and try to stay as basic as possible.
This SO question has some good resources in it for guidance on designing html emails.
Instead of manually setting all styles in the email, I tend to use the same CSS styles as the site if I want emails that should be pretty. However, emails need the styles inlined, and for that I use the inlinestyler module, which will take the HTML and the CSS files and set the relevant styles inline before sending the email.
There are still some things to think about, if you are careless you get gigantic emails because you use big style settings everywhere, and many email clients will not do positioning correctly etc. so you may have to make custom CSS styles for your emails anyway. But even if you do, inlinestyler is useful, as you get much more maintainable emails with the CSS and the HTML separate.
CSS is supported by some email clients, and not supported by others. Some clients support inline styles and others do not. You can see a fairly verbose list here. Most of what can be done with HTML/CSS can be done with inline styles and (gasp) table layouts, but some of it is simply impossible. Tools like the one #Lennart mentioned are invaluable, but "just inline everything" doesn't accommodate for a number of issues. (Pseudo classes comes to mind as a major point (a:hover is supported by Outlook, while .classname:hover is not), as does background image (there is a hack to make that work though)).
I guess that my basic point is that you can try to shortcut the process by using inlinestyler or similar, but you are going to need to keep a separate set of files, and you'll definitely be doing a series of manual tweaks.
I think you will find that email clients will not retrieve the css.
Instead, in your email, put the contents of your CSS files directly into the email, with <style> and </style> around it.

Importing HTML into TinyMCE using ColdFusion

Hey everyone, I would appreciate a pointing in the right direction with the problem I'm having. In short, I'm working on an application that will create PDFs using TinyMCE and ColdFusion 8. I have the ability to create a PDF by just entering in text, pictures, etc. However, I want to be able to import an html template and insert it into the TinyMCE .
Basically, I have a file directory code snippet that lets me browse through my 'HTMLTemplates' folder, and am able to select an HTML document. Now, I want to be able to take all the code from that selected HTML document and insert it into my TinyMCE box. Any tips on how I might do this, maybe?
Thanks!
If I understood you correctly, you already have a TinyMCE plugin which pops up a window and allows you to browse the certain directory using existing cfm page which you render within the popup window. Right?
If not, you should start with this. Not sure how easy it is done in current version, but in the older TinyMCE I've created the custom upload plugin (needed to track the site security permissions for current user) pretty quickly.
Next, I can see two quick ways to pass the server file contents to the client-side:
Make it available via HTTP so you can make the GET request and read contents into the variable.
Output it on the page using CF (say, on form submit when file selected) and grab using JavaScript.
I'd personally tried the second option. After you grab the text into the variable you can put it into the TinyMCE using it's API.
It can be as simple as output escaped text into the hidden div with known ID and read it using DOM operations (assuming that there is cfoutput around):
<div id="myTemplate">#HTMLEditFormat(myFileContents)#</div>
Also you can output the text directly into the JavaScript variable (of cource, with accurate escaping), maybe like this.
<script type="text/javascript">
var text = '#HTMLEditFormat(myFileContents)#';
</script>
Most advanced and possibly better for performance (and definitely "cooler") way is to use the concept of script tags as data containers, like this:
<script type="text/plain">
#HTMLEditFormat(myFileContents)#
</script>
Last time I've seen this in Nadel's blog, I think. Read it, pretty interesting.
Hope this helps.

Is it possible to tell if a user has viewed a portion of the page?

As the title says on a website is it possible to tell if a user has viewed a portion of the page?
Will moving that portion to a separate iframe work? then if they scroll to the bottom, issue a get request for a small image file..forgot the name of the technique..
Update: It is called Web Bug..A Web bug is an object that is embedded in a web page or e-mail and is usually invisible to the user but allows checking that a user has viewed the page or e-mail. One common use is in e-mail tracking. Alternative names are Web beacon, tracking bug, tracking pixel, pixel tag, 1×1 gif, and clear gif.
If you are talking about to check if the user has actually viewed some part of the page you would need to install a web camera and track his eye-movement.
If you are talking about detecting how far the user has scrolled down the page, you can use Javascript to detect this in the OnScroll event. You can then fire some ajax to the server if you need to record this.
I'm not sure this would be ethical - but technically if you use javascript, you could detect the mouseover event of each paragraph tag in the document, and then AJAX that information back to the server. As the user scrolls down the page, they're likely to mouse over the paragraphs, and then you know at least approximately where they've read to.
Not reliably, no.
Simple example: I middle-click on a link, which opens it in a new background tab. I then decide against it, and close the tab without ever looking at it. Any JavaScript trick is going to report that I viewed everything above the fold.
More complicated example: A newbie user doesn't have the browser window maximised, and a portion of the browser window is off-screen. Any JavaScript trick is going to report as if the entire viewport is being viewed, so even restricting your query to only the cases where scrolling occurs will not help.
Unless you require a user action of some kind, all you will be able to tell is that they downloaded some portion, not that they actually looked at it.
Sure. Put that content inside a div, then in your html, with some javascript, capture the onmouseover event and do your work there. If they've put their mouse over something, it's a pretty safe bet that they've seen it, I'd say...
Hope this helps.

How do use fckEditor safely, without risk of cross site scripting?

This link describes an exploit into my app using fckEditor:
http://knitinr.blogspot.com/2008/07/script-exploit-via-fckeditor.html
How do I make my app secure while still using fckEditor? Is it an fckEditor configuration? Is it some processing I'm supposed to do server-side after I grab the text from fckEditor?
It's a puzzle because fckEditor USES html tags for its formatting, so I can't just HTML encode when I display back the text.
Sanitize html server-side, no other choice. For PHP it would be HTML Purifier, for .NET I don't know. It's tricky to sanitize HTML - it's not sufficient to strip script tags, you also have to watch out for on* event handlers and even more, thanks to stupidities of IE for example.
Also with custom html and css it's easy to hijack look and layout of your site - using overlay (absolutely positioned) which covers all screen etc. Be prepared for that.
The bug is not actually FCKeditors fault. As long as you let users edit HTML that will be displayed on your web site they will always have to possibility to do harm unless you check the data before you output it.
Some people use HTMLencoding to do this, but that will destroy all the formatting done by FCKeditor, not what you want.
Maybe you can use the Microsoft Anti-Cross Site Scripting Library. Samples on MSDN
Is it some processing I'm supposed to do server-side after I grab the text from fckEditor?
Precisely. StackOverflow had some early issues related to this as well. The easiest way to solve it is to use an HTML library to parse user's input, and then escape any tags you don't want in the output. Do this as a post-processing step when printing to the page -- the data in the database should be the exact same as what the user typed in.
For example, if the user enters <b><script>evil here</script></b>, your code would translate it to <b><script>evil here</script></b> before rendering the page.
And do not use regular expressions for solving this, that's just an invitation for somebody clever to break it again.
FCKEditor can be configured to use only a few tags. You will need to encode everything except for those few tags.
Those tags are: <strong> <em> <u> <ol> <ul> <li> <p> <blockquote> <font> <span>.
The font tag only should have face and size attributes.
The span tag should only have a class attribute.
No other attributes should be allowed for these tags.
I understand the DONTS. I'm lacking a DO.
Is use of FCKEditor a requirement, or can you use a different editor/markup language? I advise using Markdown and WMD Editor, the same language used by StackOverflow. The Markdown library for .NET should have an option to escape all HTML tags -- be sure to turn it on.
XSS is a tricky thing. I suggest some reading:
Is HTML a Humane Markup Language?
Safe HTML and XSS
Anyway, my summary is when it comes down to it, you have to only allow in strictly accepted items; you can't reject known exploit vectors because or you'll always be behind the eternal struggle.
I think the issue raised by some is not that Fckeditor only encodes a few tags. This is a naive assumption that an evil user will use the Fckeditor to write his malice. The tools that allow manual changing of input are legion.
I treat all user data as tainted; and use Markdown to convert text to HTML. It sanitizes any HTML found in the text, which reduces malice.