题
在浏览器中浏览了网页之后,下一步就是查看其HTML源代码。尽管这种方法很简单,但仍然非常值得去做。查看源代码有两项作用;它可以帮助你发现最明显的安全问题,但最重要的是,它使你能够为将来的测试建立一个比较基准。对攻击失败之前和之后的源代码进行比较,你就能够调整你是输入,了解到哪些通过了,哪些没有通过,并再次尝试。
解决方案
我们推荐使用Firefox,你已经在2.1节中学会了它的安装。首先浏览应用中你所感兴趣的网页。
右击,并选择“查看源文件”或从菜单栏选择“查看”→ "源文件"。
我们推荐Firefox的主要原因是因为它的彩色显示。如图3-1所示,使用这种显示方式,HTML标签和属性都要容易理解得多。相比之下,Internet Explorer在记事本中打开网页。就会难读得多。
讨论
作为比较基准,访问HTML源代码会非常有帮助。最常见的Web漏洞涉及到向Web应用提供恶意输入以修改HTML源代码。在测试这些漏洞时,验证测试通过或失败的最简单的方法就是检查源代码是否被恶意更改。
当心一切未经更改就写进源代码中的输入。我们将在第8章讨论输入验证,然后许多应用根本就不对输入进行验证。在开始讨论更加复杂的内容之前,不妨在源代码中搜索你刚刚提供的输入。然后,使者将可能的危险值作为输入,比如HTML标签或JavaScript,并注意它是否未经修改就直接显示在源代码中。如果是这样的话,那么这就是个警示信号。
注意,你可以像搜索任何其他Firefox页面那样搜索HTML源代码(根据具体情况,使用Ctrl+F或(Windows徽标键)+F)。
在以后的秘诀和章节中,我们将使用工具来自动搜索、解析和比较源代码。记住基本要点;通常,可以通过重复地手动检查源代码以检查怎样做才能使它通过筛选程序或编码找出漏洞。
注意:你在这里看到的静态源代码不能反映JavaScript或AJAX功能所做的任何更改。
搜索微信公众号:TestingStudio霍格沃兹的干货都很硬核
天给大家带来一种标准化的椭圆形的搜索框,话不多说,直接放图。
我相信大家在很多网页上一定见过这种搜索框,那么这种搜索框到底是怎么做的呢?不要着急,听我慢慢给您讲来。
<form class="message"><input type="text" name="sousuo" class="input" placeholder="冬瓜搜索"/> </form> <a href="#" class="search">搜全网</a>
3. 下来就是用css来美化它了。这里我们会用到boder元素。
4. 话不多说直接放代码。
.message{position:absolute; left: 600px;top: 16px;} .input{width: 300px;height: 50px;font-size: 15px;padding-left: 20px;border: 1px solid #DCDCDC;border-top-left-radius: 25px;border-bottom-left-radius: 25px;background-color: #F5F5F5;}.input:focus{border-color: #FA8072;outline: none;color: #FA8072; }.search{position:absolute; left: 900px;top: 15.5px;width: 90px;height: 49.3px;border: 1px solid #DCDCDC;border-top-right-radius: 25px;border-bottom-right-radius: 25px;font-size: 16px;text-align: center;line-height: 48px;color: #FFFFFF;background-color: #FA8072;text-decoration: none;}.search:hover{background-color: #F08080;}
5. 在css代码中有一个关键的属性,那就是border-top-left-radius和border-bottom-right-radius以及其他的相反方向。
小伙伴们看明白了吗?快去动手试试吧。
Lunr.js是个用于浏览器的轻量级 JavaScript 全文搜索引擎。它为JSON文档建立索引,并提供一个简单的搜索界面来检索与文本查询最匹配的文档对于一些小型的博客、开发者文档或 Wiki 网站来说,完全可以通过它实现站内离线搜索:
对于已经将所有数据存储在客户端中的Web应用程序,也能够在客户端上搜索该数据也是很有意义的。这样可以节省在服务器上添加额外的压缩服务。本地搜索索引将更快,没有网络开销,并且即使没有网络连接也将保持可用。
目前Github上star数6.6k
https://github.com/olivernn/lunr.js
var idx = lunr(function () {
this.field('title')
this.field('body')
this.add({
"title": "Twelfth-Night",
"body": "If music be the food of love, play on: Give me excess of it…",
"author": "William Shakespeare",
"id": "1"
})
})
然后再像下面这样
idx.search("love")
这将返回一个匹配文档列表,其中包含与搜索查询的匹配程度以及与该匹配相关的任何关联元数据的分数:
[
{
"ref": "1",
"score": 0.3535533905932737,
"matchData": {
"metadata": {
"love": {
"body": {}
}
}
}
}
]
只需在要使用它的页面中包含lunr.js源文件。所有现代浏览器均支持Lunr.js。
npm install lunr
(翻译或不够准确)
在之前的文章中介绍过另一个全文搜索库FlexSearch.js,感兴趣的小伙伴也可以去看一看介绍,在这里也提前祝大家新年快乐,万事如意,身体健康!
*请认真填写需求信息,我们会在24小时内与您取得联系。