Hey there.

I'm currently testing out the features of CouchCMS and am by no means an expert with this CMS. But what it comes down to, is that I've got a website with cms editable regions specified as following:

Code: Select all

<cms:editable name='email_adres' type='richtext' no_xss_check='1'>
        <div class="control-group">
                <div class="controls">
                    <input class="span12" type="email" name="email" id="email" placeholder="* Uw e-mail..." />
                    <div class="error left-align" id="err-email">Vult u alstublieft een geldig email-adres in.</div>
                </div>
        </div>
</cms:editable>

However, when I edit the text in this region with CouchCMS, the XSS sanitization kicks in (I presume) and changes the originally intended display of the code on the website. The output looks like this: http://imgur.com/UlZm7OE&8G6jZPv

The first image shows how it looks when the webpage is loaded and the second image shows what it looks like when viewing the source of the website.


I know that there is a 'bypass' for my problem, since changing 'richtext' to 'textarea' will prevent this from happening, but I'm really looking to keep working with 'richtext' as my cms editable region. What can I do to ensure that?

I'd love to hear from y'all knowledgeable folks!

[KK]

Hi Skittlez

Unfortunately, 'textarea' is the only region that allows bypassing the XSS sanitization.

That said, I'd like to draw your attention to one problem in the approach you are trying to take.
When you allow your client to edit code through richtext editor, the client does not see any 'classes' or 'ids' present in the original code (unless she switches to the code-view - but then that is the same as using 'textarea' in the first place).

So, when the client edits whatever is visible you run a real risk of losing those unseen elements quite easily without the client even realizing it.

This will, of course, break your front-end presentation.

Couch's way to handle such conditions is to generate the markup in the template code and allow the client to edit only the text part.

For example, if you wish to generate a form using user input, a relatively fail-proof method is discussed in the following thread - viewtopic.php?f=8&t=7998

Hope it helps.

Hey KK,

Thanks for the reply and I definitely know what you mean. I've been fiddling around with CouchCMS for some time but never really fully 'understood' it.

But do you mean that there is a way to let the client see only the text and not the HTML mark-up?

Otherwise I'll have to see if there's a workaround in the form of 'textarea' for example.

[KK]

But do you mean that there is a way to let the client see only the text and not the HTML mark-up?

Well, that is totally up to you - if you choose to make only the text editable, that is what the client can ever change.

For example, consider the following -

Code: Select all

<div class="control-group">
    <div class="controls">
        <input class="span12" type="email" name="email" id="email" placeholder="* Uw e-mail..." />
        <div class="error left-align" id="err-email"><cms:editable type='text' name='error_message' >Vult u alstublieft een geldig email-adres in.</cms:editable></div>
    </div>
</div>

In the code above, I've made only the 'error message' editable. So the client can change only that and rest of the markup remains immutable.

Of course, that was a contrived example.

Could you please let me know what exactly do you wish the client to be able to edit?
From the looks of it, it seems you want them to create a form (atleast its elements) dynamically. Therefore I pointed out to you the post where you'll see several methods of doing so in a bullet-proof manner - viewtopic.php?f=8&t=7998

Please let me know. Thanks.

This seems what I'm looking for. The sample of code I provided was just an example of what I have on the webpage. For example, I have a lot of headers and text areas that of course contain text. And that is what I'd like the client to be able to edit. For example:

Code: Select all

<header>
        <div id="home">               
                <div class="container">
                        <div class="header-wrapper">
                    <h2>CAPS HEADER</h2>
                     <p>Sub-header text</p>                                           
                         </div>
                </div>  
                 
        </div>
    </header>

In this example the only thing that needs to be changeable is the text within the <h2> and <p> tags. If that is only to be made editable, 90% of what I'm wanting to do is solved haha!

[KK]

Right. In the example you provided, I'd suggest you define the editable region as follows -

Code: Select all

<header>
    <div id="home">               
        <div class="container">
            <div class="header-wrapper">
                <cms:editable type='richtext' name='my_content' >
                <h2>CAPS HEADER</h2>
                <p>Sub-header text</p>     
                </cms:editable>    
            </div>
        </div> 
    </div>
</header>

I've used only one editable region as the enclosed elements do not contain any invisible 'classes' etc. Also the client can be (usually ) trusted to manage marking up the header text themselves (if not, you can easily go with two separate regions keeping out the HTML tags.).

Hope it helps.