Django模板过滤器转义

Question

I've got a custom filter that takes a string and makes it into the appropriate attributes for the tooltip library I'm using. It worked with OpenTip, but I'm converting to using the tooltip library that's in Bootstrap.

Here's my filter:

from django import template
from django.utils.html import conditional_escape
from django.utils.safestring import mark_safe

register = template.Library()


@register.filter(needs_autoescape=False, is_safe=True)
def tooltip(value, autoescape=False):
    """
        Filter to turn some text into the tag that the tooltip library uses -
        Written as a filter so we can switch from one tooltip library to
        another
    """
    if autoescape:
        esc = conditional_escape
    else:
        esc = lambda x: x
    if value is not None and len(value) > 0:
        retval = 'data-toggle="tooltip" data-html="true" ' +\
            'rel="tooltip" title="%s"' % esc(value)
        return mark_safe(retval)
    else:
        return ''

And here's where I'm using it in a template:

<form id="filter" name="filter" method="post"
class="form-inline">
{% csrf_token %}
    <label for="filterText">Filter Query:</label>
    <input type="text" id="current_filter" name="current_filter" value="{{current_filter}}" placeholder="Filter" class="span8"/>
    <i class="icon-question-sign"
    {{"Filters -<br>requester: [[first] [last]]|[windows_id]<br>client: [[first] [last]]|[windows_id]<br>approver:  [[first] [last]]|[windows_id]<br>worker: [[first] [last]]|[windows_id]<br>ticket: [id]<br>status: [open]|[closed]|[hold]<br>type: [termination]|[extension]|[access]|[password]|baskets]<br>item: [name for category/item/attribute inventory]<br>since: [mm/dd/yyyy]|[yyyy-mm-dd]<br>before: [mm/dd/yyyy]|[yyyy-mm-dd]<br>All searchs are AND with comma delimiting"|tooltip}}></i>
    <input type="submit" name="btnSubmit" class="btn" value="Filter"/>
    <input id="filter_reset" type="button" name="filter_reset" class="btn" value="Clear existing filters"/>
</form>
{% endif %}

But the tooltip isn't processing the html, and when I go into Firebug and cut and paste the html, it looks like something is escaping it in spite of the fact that I marked it with mark_safe:

<form class="form-inline" method="post" name="filter" id="filter">
<input type="hidden" value="dpuAc9GNUQtvGG5wYzrWsG2Vpu5i7PWJ" name="csrfmiddlewaretoken">
    <label for="filterText">Filter Query:</label>
    <input type="text" class="span8" placeholder="Filter" value="" name="current_filter" id="current_filter">
    <i title="Filters -&lt;br&gt;requester: [[first] [last]]|[windows_id]&lt;br&gt;client: [[first] [last]]|[windows_id]&lt;br&gt;approver:  [[first] [last]]|[windows_id]&lt;br&gt;worker: [[first] [last]]|[windows_id]&lt;br&gt;ticket: [id]&lt;br&gt;status: [open]|[closed]|[hold]&lt;br&gt;type: [termination]|[extension]|[access]|[password]|baskets]&lt;br&gt;item: [name for category/item/attribute inventory]&lt;br&gt;since: [mm/dd/yyyy]|[yyyy-mm-dd]&lt;br&gt;before: [mm/dd/yyyy]|[yyyy-mm-dd]&lt;br&gt;All searchs are AND with comma delimiting" rel="tooltip" data-html="true" data-toggle="tooltip" class="icon-question-sign">
    </i>
    <input type="submit" value="Filter" class="btn" name="btnSubmit">
    <input type="button" value="Clear existing filters" class="btn" name="filter_reset" id="filter_reset">
</form>

How do I get the html in that filter text into the page without the being escaped?

Answer 1

Try using safe :

{{"Filters -<br>requester: [[first] [last]]|[windows_id]<br>client: [[first] [last]]|[windows_id]<br>approver:  [[first] [last]]|[windows_id]<br>worker: [[first] [last]]|[windows_id]<br>ticket: [id]<br>status: [open]|[closed]|[hold]<br>type: [termination]|[extension]|[access]|[password]|baskets]<br>item: [name for category/item/attribute inventory]<br>since: [mm/dd/yyyy]|[yyyy-mm-dd]<br>before: [mm/dd/yyyy]|[yyyy-mm-dd]<br>All searchs are AND with comma delimiting"|safe|tooltip}}

Or you can try removing esc from your tooltip tag.

Edit:

I just realized what you are trying to do. You cannot put html inside a tooltip in bootstrap, it's a plaintext feature only . data-html="true" allows it to contain html content. You can also use popover . Above safe filter should still be used in order to disable html escaping.

Answer 2

原来这个问题比我想象的要愚蠢得多-我的<script>标签顺序错误，因此我得到的是jQuery-UI工具提示而不是Bootstrap工具提示，并且jQuery-UI工具提示不支持html。