前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >30. Django 2.1.7 模板 - HTML转义

30. Django 2.1.7 模板 - HTML转义

作者头像
Devops海洋的渔夫
发布2022-01-17 09:50:51
1.2K0
发布2022-01-17 09:50:51
举报
文章被收录于专栏:Devops专栏

HTML转义

模板对上下文传递的字符串进行输出时,会对以下字符自动转义。

代码语言:javascript
复制
小于号< 转换为 &lt;

大于号> 转换为 &gt;

单引号' 转换为 &#39;

双引号" 转换为 &quot;

与符号& 转换为 &amp;

示例

1)打开assetinfo/views.py文件,创建视图html_escape。

代码语言:javascript
复制
def html_escape(request):
    context={'content':'<h1>hello world</h1>'}
    return render(request,'assetinfo/html_escape.html',context)

2)打开assetinfo/urls.py文件,配置url。

代码语言:javascript
复制
urlpatterns = [
    # ex:/assetinfo/html_escape
    path('html_escape', views.html_escape),
]

3)在templates/assetinfo/目录下创建html_escape.html。

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    自动转义:{{content}}
</body>
</html>

4)运行服务器,在浏览器中输入如下网址。http://127.0.0.1:8000/assetinfo/html_escape

可以从源码中看到 <> 都被转义为了 &lt; &gt;

关闭转义

过滤器escape可以实现对变量的html转义,默认模板就会转义,一般省略。

代码语言:javascript
复制
{{t1|escape}}

过滤器safe:禁用转义,告诉模板这个变量是安全的,可以解释执行。

代码语言:javascript
复制
{{data|safe}}

1)修改templates/assetinfo/html_escape.html代码如下。

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    自动转义:{{content}}
    <hr>
    过滤器safe关闭转义:{{content|safe}}
</body>
</html>

刷新浏览器后效果如下图:

可以看到,关闭了转义之后,正常显示了h1标题。一般为了避免js攻击,都是禁用的。

这里关闭转义是一句句通过safe过滤器来编写,能不能直接给一段html关闭转义呢?

标签autoescape:设置一段代码都禁用转义,接受on、off参数。

代码语言:javascript
复制
{%autoescape off%}
...
{%endautoescape%}

1)修改templates/assetinfo/html_escape.html代码如下。

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    自动转义:{{content}}
    <hr>
    过滤器safe关闭转义:{{content|safe}}
    <hr>
    标签autoescape关闭转义:
    {% autoescape off %}
    {{ content }}
    {{ content }}
    {{ content }}
    {% endautoescape %}
</body>
</html>

刷新浏览器后效果如下图:

字符串字面值

对于在模板中硬编码的html字符串,不会转义。

1)修改templates/assetinfo/html_escape.html代码如下:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    自动转义:{{content}}
    <hr>
    过滤器safe关闭转义:{{content|safe}}
    <hr>
    标签autoescape关闭转义:
    {% autoescape off %}
    {{ content }}
    {{ content }}
    {{ content }}
    {% endautoescape %}
    <hr>
    模板硬编码不转义:{{data|default:'<b>hello</b>'}}
</body>
</html>

2)刷新浏览器后效果如下图:

如果希望出现转义的效果,则需要手动编码转义。

1)修改templates/booktest/html_escape.html代码如下:

代码语言:javascript
复制
<hr>
    模板硬编码手动转义:{{data|default:"&lt;b&gt;123&lt;/b&gt;"}}

2)刷新浏览器后效果如下图:

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-02-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 海洋的渔夫 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • HTML转义
  • 示例
  • 关闭转义
    • 过滤器escape可以实现对变量的html转义,默认模板就会转义,一般省略。
      • 过滤器safe:禁用转义,告诉模板这个变量是安全的,可以解释执行。
        • 标签autoescape:设置一段代码都禁用转义,接受on、off参数。
          • 字符串字面值
          相关产品与服务
          云服务器
          云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档