How to escape apostrophes in view.html

113 views
Skip to first unread message

Maurice Waka

unread,
Mar 22, 2018, 9:34:39 AM3/22/18
to web2py-users
Hi.
An unable to display strings such as ; don't, can't, in the view.html.
I've tried escaping in the  style body with content: \0027; as directed from this site in vain.
I have to refresh the page again for my content to appear.
I need your help.
Regards

Anthony

unread,
Mar 22, 2018, 11:06:29 AM3/22/18
to web2py-users
Please show your code. ', ', or just plain ' should work.

Anthony

Maurice Waka

unread,
Mar 22, 2018, 12:23:16 PM3/22/18
to web...@googlegroups.com
This is part of the code...

<html lang="en">

<style type="text/css">
    * {
        box-sizing: border-box;
        }
    body {
        background-color: #edeff2;
        font-family: 'Noto Serif', serif;
        font-size: 0.5em;
        font-weight: lighter;
        content: \0027;
    }
    .chat_window {
        position: fixed;
        width: calc(100% - 20px);
        max-width: 90%px;
        height: 440px;
        border-radius: 10px;
        background-color: #fff;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        background-color: #f8f8f8;
        overflow: hidden;
        bottom:0;
        }
    .messages {
        position: relative;
        list-style: none;
        padding: 20px 10px 0 10px;
        margin: 0;
        height: 400px;
        overflow: scroll;
        }
    .messages .message {
        clear: both;
        overflow: hidden;
        margin-bottom: 20px;
        transition: all 0.5s linear;
        opacity: 0;
        font-size: 0.5em;
        }

    .messages .message.left .text_wrapper {
        background-color: #E8EAF6;
        margin-left: 2px;
        }
    .messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
        right: 100%;
        border-right-color: #E8EAF6;
        }
    .messages .message.left .text {
        color: black;
        }
    /* resize images */
    .messages .message.right img {
        border-radius: 7px;
        max-height: 100px;
        max-width: 100%
        width:100%;
        object-fit: cover;
        }
    .messages .message.right .text_wrapper {
        background-color: #8C9EFF;
        margin-right: 2px;
        float: right;
        max-width: 85.5%;
        width: auto;
        position: relative;
        word-wrap: break-word;
        word-spacing: normal;
        text-align:justify;
        max-height: 150px;
        height:auto;
        display: inline-block;
        padding: 6px;
        border-radius: 7px;
        }
    .messages .message.right .text_wrapper::-webkit-scrollbar{
        display:none;
    }
    .messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
        left: 100%;
        border-left-color: #E8EAF6;
        }
    .messages .message.right .text {
        color: white;
        font-size: 1em;
        }
    .messages .message.appeared {
        opacity: 1;
        }


--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/o6loJy5SGWc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Anthony

unread,
Mar 22, 2018, 12:32:09 PM3/22/18
to web2py-users
What does this have to do with web2py? And why do you have "content: \0027" in the body selector? What are you really trying to do?

Anthony

Maurice Waka

unread,
Mar 22, 2018, 12:42:00 PM3/22/18
to web...@googlegroups.com
this is part of my view.html., a chat bot.
Am having a problem escaping the " ' " character.

Dave S

unread,
Mar 22, 2018, 6:54:17 PM3/22/18
to web...@googlegroups.com


On Thursday, March 22, 2018 at 9:42:00 AM UTC-7, Maurice Waka wrote:
this is part of my view.html., a chat bot.
Am having a problem escaping the " ' " character.

On Thu, Mar 22, 2018 at 7:32 PM, Anthony <abas...@gmail.com> wrote:
What does this have to do with web2py? And why do you have "content: \0027" in the body selector? What are you really trying to do?

Anthony



The body {content: ...} stuff works with .before and .after, no?  What does "\0027" do if you don't have an .after?

But in what way are you having trouble?  If you're putting text into the view/chat.html file, a literal "'", or &apos;, or &#x27; (as per Anthony's reply) work just fine.  It also works just fine to have a literal "'" in the data being displayed (returned by the controller function, and obtained in a DB query in my test case).

FWIW, I tried a
<style>div.after {content: \0027; }</style>
before and after the {{extend 'layout.html'}} line with no apparent effect, so there may be a conflict with other CSS.

{edit re \0027}

/dps




Anthony

unread,
Mar 22, 2018, 6:54:44 PM3/22/18
to web2py-users
On Thursday, March 22, 2018 at 12:42:00 PM UTC-4, Maurice Waka wrote:
this is part of my view.html., a chat bot.
Am having a problem escaping the " ' " character.

Got it, but you haven't shown any code where you are using that character. And what is the point of setting the CSS "content" attribute on the body selector?

Anthony

Maurice Waka

unread,
Mar 22, 2018, 9:32:09 PM3/22/18
to web...@googlegroups.com
Got the point. Let me redo the stuff. I'll let you know if I have any trouble.
Regards 

On 23 Mar 2018 1:54 AM, "Dave S" <snide...@gmail.com> wrote:


On Thursday, March 22, 2018 at 9:42:00 AM UTC-7, Maurice Waka wrote:
this is part of my view.html., a chat bot.
Am having a problem escaping the " ' " character.

On Thu, Mar 22, 2018 at 7:32 PM, Anthony <abas...@gmail.com> wrote:
What does this have to do with web2py? And why do you have "content: \0027" in the body selector? What are you really trying to do?

Anthony



The body {content: ...} stuff works with .before and .after, no?  What does "\0027" do?


But in what way are you having trouble?  If you're putting text into the view/chat.html file, a literal "'", or &apos;, or &#x27; (as per Anthony's reply) work just fine.  It also works just fine to have a literal "'" in the data being displayed (returned by the controller function, and obtained in a DB query in my test case).

/dps




Maurice Waka

unread,
Mar 24, 2018, 4:48:01 AM3/24/18
to web...@googlegroups.com
Hi Sorry I couldn't reply earlier, net work issues.

Am not very conversant with CSS, still in the learning stage as I work it out.

So, from the controller:
question = db(db.answers.author == auth.user.id).select(orderby=~db.answers.created_on,limitby=(2,0)).....user query statement
answer = db(db.answers.author == auth.user.id).select(orderby=~db.answers.created_on, limitby=(2,0)).......system reply statement
return dict(form=form, question=question, answer=answer, replies=replies)

whenever the user or system uses a string  containing an apostrophe such as "can't, USDA's Food Guide, etc " the string is not displayed during the reply and I have to refresh the page. This is the view.html code:
<div class="chat_window">
          <ul class="messages">
              {{for reply in replies:}}
              <li class="message left appeared">
                  <div>
                      {{=prettydate(reply.modified_on)}}
                  </div>
                  <div class="text_wrapper">
                      <div class="text">{{=XML(reply.quest.replace('\n','<br>'))}}</div>
                  </div>
              </li>

              <li class="message right appeared">
                  <div>
                      {{=prettydate(reply.modified_on)}}
                  </div>
                  <div class="text_wrapper">
                      <div class="text">{{=XML(reply.message.replace('\n','<br>'))}}</div>
                  </div>
              </li>
              {{pass}}
          </ul>


style:

<style type="text/css">
    * {
        box-sizing: border-box;
        }
    body {
        background-color: #edeff2;
        font-family: 'Noto Serif', serif;
        font-size: 0.5em;
        font-weight: lighter;
        }
    .messages .message .message_data_time  {
        margin-right:0;
        margin-top:0;
        position: relative;
        right:5px;
        display: inline-block;
        }
    .messages .message .text_wrapper {
        display: inline-block;
        max-height: 150px;
        border-radius: 6px;
        width:auto;
        overflow-y: auto;
        text-align:justify;
        position: relative;
        word-wrap: break-word;
        word-spacing: normal;
        padding:4px;
        line-height: 16px;
        }
    .messages .message .text_wrapper::-webkit-scrollbar{
        display:none;
    }
    .messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
        top: 18px;
        border: solid transparent;
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        }
    .messages .message .text_wrapper::after {
        border-width: 13px;
        margin-top: 0px;
        content: &apos;
        }
    .messages .message .text_wrapper::before {
        border-width: 15px;
        margin-top: 2px;
        content: &apos;
        }
    .messages .message .text_wrapper .text {
        font-size: 18px;
        font-weight: 300;
        }

N/B 
My biggest challenge is where to code the &#27, or the &apos; since this is the first time am encountering it

Regards.


--

Anthony

unread,
Mar 24, 2018, 8:57:03 AM3/24/18
to web...@googlegroups.com
First, do not use XML(...) with user-generated content, as that is a serious cross-site scripting vulnerability. At least use XML(..., sanitize=True).

Which browser are you using? Browsers should be able to display an unescaped apostrophe. Can you show the raw HTML generated by your app where an apostrophe is not displaying? Also, you said you have to refresh the page -- are you saying the apostrophe does display after you refresh?

Note, if it is OK to escape all the user content and the only processing required is to replace line feeds with HTML <br /> elements, you can do something like this:

def preserve_line_breaks(text):
   
return CAT(*[element for line in text.split('\n') for element in (line, BR())])

and in the view:

{{=preserve_line_breaks(reply.message)}}

In that case, web2py will safely escape all the text (including apostrophes) but will insert <br /> elements in place of any line feeds.

Anthony

Maurice Waka

unread,
Mar 24, 2018, 9:42:37 AM3/24/18
to web...@googlegroups.com
I must say am really greatfull for your response.
Amazingly, as soon as I used the '...sanitize=True'statement, the error (problem) is gone!
Am using chromium browser, in Ubuntu 16.04 LTS.
Let me be really sure tat its gone then will revert to you
Kind regards

On Sat, Mar 24, 2018 at 3:57 PM, Anthony <abas...@gmail.com> wrote:
First, do not use XML(...) with user-generated content, as that is a serious cross-site scripting vulnerability. At least use XML(..., sanitize=True).

Which browser are you using? Browsers should be able to display an unescaped apostrophe. Can you show the raw HTML generated by your app where an apostrophe is not displaying? Also, you said you have to refresh the page -- are you saying the apostrophe does display after you refresh?

Note, if it is OK to escape all the user content and the only processing required is to replace line feeds with HTML <br /> elements, you can do something like this:

def preserve_line_breaks(text):
   
return CAT(*[element for line in text.split('\n') for element in (line, BR())])

and in the view:

{{=preserve_line_breaks(reply.message)}}

In that case, web2py will escape all the text (including apostrophes) but will insert <br /> elements in place of any line feeds.
Reply all
Reply to author
Forward
0 new messages