Style section in email - problem with email code

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • the-web
    Junior Member
    • Feb 2024
    • 3
    #1

    Style section in email - problem with email code

    When I insert an email template code containing a <style> section that includes information about the responsiveness of the message, the editor removes the <style> tag, causing it not to function properly

    Code before insert to email editor (summernote - section source enabled)
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--<![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="x-apple-disable-message-reformatting">
    <title>Weronika</title>
    <style type="text/css">                
            html{width:100%}
            body{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;margin:0;padding:0;font-family:'Open Sans',Arial,Sans-serif!important}
            table{border-spacing:0;table-layout:auto;margin:0 auto}
            img{display:block!important;overflow:hidden!important}
            a{text-decoration: none;color:unset}
            .ReadMsgBody{width:100%;background-color:#fff}
            .ExternalClass{width:100%;background-color:#fff}
            .ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%}
            .yshortcuts a{border-bottom:none!important}
            .full{width:100%}
            .pad{width:92%}
            @media only screen and (max-width: 650px) {
            body{width:600px;}
            .res-pad{width:92%;max-width:92%}
            .res-full{width:100%;max-width:100%}
            .res-left{text-align:left!important}
            .res-right{text-align:right!important}
            .res-center{text-align:center!important}
            }@media only screen and (max-width: 750px) {
            .margin-full{width:100%;max-width:100%}
            .margin-pad{width:92%;max-width:92%;max-width:600px}
            }
    </style>
</head>
<body>​
    The same code after click disabled section source

    HTML Code:
    

    
    <!--[if !mso]><!--><!--<![endif]-->
    
    
    Weronika
                    
            html{width:100%}
            body{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;margin:0;padding:0;font-family:'Open Sans',Arial,Sans-serif!important}
            table{border-spacing:0;table-layout:auto;margin:0 auto}
            img{display:block!important;overflow:hidden!important}
            a{text-decoration: none;color:unset}
            .ReadMsgBody{width:100%;background-color:#fff}
            .ExternalClass{width:100%;background-color:#fff}
            .ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:100%}
            .yshortcuts a{border-bottom:none!important}
            .full{width:100%}
            .pad{width:92%}
            @media only screen and (max-width: 650px) {
            body{width:600px;}
            .res-pad{width:92%;max-width:92%}
            .res-full{width:100%;max-width:100%}
            .res-left{text-align:left!important}
            .res-right{text-align:right!important}
            .res-center{text-align:center!important}
            }@media only screen and (max-width: 750px) {
            .margin-full{width:100%;max-width:100%}
            .margin-pad{width:92%;max-width:92%;max-width:600px}
            }
    

​

    Where can I disable the removal of style sections and other header elements? I know it opens up vulnerability to XSS attacks, but I need to enable this section so that emails are responsive.
    Tags: None
    • shalmaxb
      Senior Member
      • Mar 2015
      • 1763
      #2
      as far as I know, you cannot disable stripping of style. You may try as a workaround to convert your HTML and CSS to inline style. There are converters online available, which can do that for you.

        Comment

        • the-web
          #2.1
          the-web commented
          02-29-2024, 12:44 PM
          Editing a comment
          I tried to bypass it by converting, but responsiveness is not available in the inline option.
        • yuri
          EspoCRM product developer
          • Mar 2014
          • 9485
          #3
          Use inline style for email templates. Style tags are often stripped by email clients.
          If you find EspoCRM good, we would greatly appreciate if you could give the project a star on GitHub. We believe our work truly deserves more recognition. Thanks.

            Comment

            • the-web
              Junior Member
              • Feb 2024
              • 3
              #4
              inline editor doesn't work - I need disable option remove text "<style> " - only this

                Comment

                • shalmaxb
                  #4.1
                  shalmaxb commented
                  02-29-2024, 10:54 PM
                  Editing a comment
                  I create newsletter templates with the editor and they are responsive. All constructed with inline style.
                • the-web
                  Junior Member
                  • Feb 2024
                  • 3
                  #5
                  up ?? Anybody ??

                    Comment

                    Previous template Next
                    Working...