HTML转义

  • 模板对上下文传递的字符串进行输出时，会对以下字符自动转义
小于号< 转换为&lt;

大于号> 转换为&gt;

单引号' 转换为'

双引号" 转换为 &quot;

与符号& 转换为 &amp;

示例

  • 打开booktest/views.py文件，创建视图zhuanyi
def zhuanyi(request):

    context={'content':'<h1>hello world</h1>'}

    return render(request,'booktest/zhuanyi.html',context)

　　

  • 打开booktest/urls.py文件，配置url
url(r'^zhuanyi/$', views.zhuanyi),

　　

  • 在templates/booktest/目录下创建zhuanyi.html
<html>

<head>

    <title>转义</title>

</head>

<body>

自动转义：{{content}}

</body>

</html>

　　

  • 运行服务器，在浏览器中输入如下网址
http://127.0.0.1:8000/zhuanyi/
  • 转义后标记代码不会被直接解释执行，而是被直接呈现，防止客户端通过嵌入js代码攻击网站
  • 浏览效果如下图

关闭转义

  • 过滤器escape可以实现对变量的html转义，默认模板就会转义，一般省略
{{t1|escape}}

　　

  • 过滤器safe：禁用转义，告诉模板这个变量是安全的，可以解释执行
{{data|safe}}

　　

  • 修改templates/booktest/zhuanyi.html代码如下
<html>

<head>

    <title>转义</title>

</head>

<body>

自动转义：{{content}}

<hr>

过滤器safe关闭转义：{{content|safe}}

</body>

</html>

　　

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

  • 标签autoescape：设置一段代码都禁用转义，接受on、off参数
{%autoescape off%}

...

{%endautoescape%}

　　

  • 修改templates/booktest/zhuanyi.html代码如下
<html>

<head>

    <title>转义</title>

</head>

<body>

自动转义：{{content}}

<hr>

过滤器safe关闭转义：{{content|safe}}

<hr>

标签autoescape关闭转义：

{%autoescape off%}

{{content}}

{%endautoescape%}

</body>

</html>

　　

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

字符串字面值

  • 对于在模板中硬编码的html字符串，不会转义
  • 修改templates/booktest/zhuanyi.html代码如下
<html>

<head>

    <title>转义</title>

</head>

<body>

自动转义：{{content}}

<hr>

过滤器safe关闭转义：{{content|safe}}

<hr>

标签autoescape关闭转义：

{%autoescape off%}

{{content}}

{%endautoescape%}

<hr>

模板硬编码不转义：{{data|default:'<b>hello</b>'}}

</body>

</html>

　　

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

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

  • 修改templates/booktest/zhuanyi.html代码如下

<html>

<head>

    <title>转义</title>

</head>

<body>

自动转义：{{content}}

<hr>

过滤器safe关闭转义：{{content|safe}}

<hr>

标签autoescape关闭转义：

{%autoescape off%}

{{content}}

{%endautoescape%}

<hr>

模板硬编码不转义：{{data|default:'<b>hello</b>'}}

<hr>

模板硬编码手动转义：{{data|default:"<b>123</b>"}}

</body>

</html>

　　

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

HTML转义的更多相关文章

  1. .NET 基础 一步步 一幕幕[运算符、占位符、转义符]

      运算符.占位符.转义符 好吧,在五局全胜之后,终于升到了三个钻,距离一个星星还有一大段距离,忽然想起来今天的博客还没写,果断坑队友,来写博客了....感觉以后还是每天更新一篇比较好.要不晚上就该熬 ...

  2. Unicode转义(\uXXXX)的编码和解码

    在涉及Web前端开发时, 有时会遇到\uXXXX格式表示的字符, 其中XXXX是16进制数字的字符串表示形式, 在js中这个叫Unicode转义字符, 和\n \r同属于转义字符. 在其他语言中也有类 ...

  3. java转换 HTML字符实体，java特殊字符转义字符串

    为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希 ...

  4. SharePoint文档库文件夹特殊字符转义

    当我们在SharePoint网站文档库中新建文件夹时包含了~ " # % & * : < > ? / \ { | }字符时(一共15个), 或者以.开头或者结束,或者包含 ...

  5. 利用StringEscapeUtils对字符串进行各种转义与反转义（Java）

    apache工具包common-lang中有一个很有用的处理字符串的工具类,其中之一就是StringEscapeUtils,这个工具类是在2.3版本以上加上的去的,利用它能很方便的进行html,xml ...

  6. 阿里云提示：对输入参数id未进行正确类型转义，导致整型注入的发生

    类似以下提示: XXX.php中,对输入参数id未进行正确类型转义,导致整型注入的发生 解决办法: 找到对应文件:$id = $_GET['id']; 增加以下标红过滤: $id = $_GET['i ...

  7. Mysql字符转义

    在字符串中,某些序列具有特殊含义.这些序列均用反斜线('\')开始,即所谓的转义字符.MySQL识别下面的转义序列: \0 ASCII 0(NUL)字符. \' 单引号('''). \" 双 ...

  8. angularJS绑定数据时自动转义html标签

    angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...

  9. java后台对前端输入的特殊字符进行转义

    转自:http://www.cnblogs.com/yangzhilong/p/5667165.html java后台对前端输入的特殊字符进行转义 HTML: 常见的帮助类有2个:一个是spring的 ...

  10. Linux Shell 通配符、元字符、转义符【转帖】

    作者:程默 说到shell通配符(wildcard),大家在使用时候会经常用到.下面是一个实例: 1   1 2 3 4 [chengmo@localhost ~/shell]$ ls a.txt  ...

随机推荐

  1. JZ2440 裸机驱动 第12章 I2C接口

    本章目标: 了解I2C总线协议: 掌握S3C2410/S3C2440中I2C接口的使用方法: 12.1 I2C总线协议及硬件介绍 12.1.1 I2C总线协议 1 I2C总线的概念 2 I2C总线的信 ...

  2. 【ActiveMQ入门-11】ActiveMQ学习-compositeDestination

    概要: 前一章讲解了消费者如何通过通配符来匹配目的地,以实现一个消费者同时接收多个目的地的消息. 对于生产者来讲,可能存在下面的需求: 1. 同一条message可能要发送到多个Queue: 2. 同 ...

  3. Bootstrap table的一些简单使用总结

    在GitHub上Bootstrap-table的源码地址是:https://github.com/wenzhixin/bootstrap-table Bootstrap-table的文档地址:http ...

  4. Win CE 5.0 增加电池电量显示

    摘自 http://blog.csdn.net/li0531/article/details/8818243 同时只在右上角显示一个 Label 控件,因此代码量精简了很多. [DllImport(& ...

  5. 关于ESXI5.0版本+ Broadcom BCM5720的BUG

    主要发生在网卡 Broadcom Corporation NetXtreme BCM5720 Gigabit Ethernet 和ESX 5.0之前的版本. 虚拟机的网络突然不通,必须删除网卡重新创建 ...

  6. 阿里云启用IPV6

    ping过别人的IPv6网址之后,可以确定,局域网是不支持IPv6的.所以要使用隧道技术建立两台机器之间的IPv6连接 1.发现测试用服务器上没有IPv6地址.所以测试服务器的内核应该是没有IPv6模 ...

  7. Ubuntu-14.04.1 desktop安装时及安装后遇到的小问题

    ubuntu安装时,进入桌面就黑屏:ctrl+alt+F1进入终端1,输入:startx,此时桌面会重新出现,快速修改桌面的分辨率即可.没有及时修改可以重复上面操作. su root认证失败:sudo ...

  8. Process Pool实现Python的并行执行

    参考:Python3.6.2文档 Source code: Lib/concurrent/futures/thread.py and Lib/concurrent/futures/process.py ...

  9. ElasticSearch 索引模块——全文检索

    curl -XPOST http://master:9200/djt/user/3/_update -d '{"doc":{"name":"我们是中国 ...

  10. 小朋友学Python（2）

    本节学习python的第一个程序:输出“Hello World!”.咱们用两种方法实现 方法(一) 进入python环境,直接使用print方法   hello world.png 方法(二) 先编程 ...