【网络安全技术】教你审查元素玩出你的范

  0x00  360搜索的解释

  Google Chrome提供了审查元素功能,只需右键点击"审查元素"(名字),即可打开Chrome Inspector,获得网页各种元素的加载时间、Javascript函数、Object等信息。本章文章主要以360的审查元素进行讲解。

  0x01  360审查元素各部分的分析

  借用分析网页百度:www.baidu.com

  右键审查元素

  Elements就是html源代码跟你按个F12的差不多吧

  

  Sources是文件的各个目录

  

  Resources你懂的 cookie啥的都会在这显示

  

  在Elements中 以我们面对电脑的右侧会发现一个小栏目

  

  这是每个html部位的js和css的一个小概况,这也让我们对于修改、学习js或css有了很大的帮助,利于像我们这些刚进入的小白利用一下,可谓是天然的学习工具和学习地方。

  然而我们也可以利用审查元素在这个页面修改html、js或css

  但是他不会保存,是的不会保存。

  修改html我们可以双击那段代码,如下图:

  

  如果你想一大段一大段改的话可以右键

  

  点击Edit as HTML

  效果如下图:

  

  也就因为这个各种骗子利用审查元素来欺骗买家,比如什么我渗透下某某站收个徒弟,那我还渗透下百度了!

  

  在此我也警告一下骗子们,别出来瞎玩好好修炼去吧。

  

  0x02 利用审查元素修改不明物体

  我们再来熟悉一下css和js修改方法:

  我们拿我的小组微安安全组的官网当作师范 网址:www.sgzsec.com  表示这套源码网上有,但是整个HTML我们有过大改,就连css也改了,这修改过程也就拿来当作一次教学。

  

  我们以这个联系方式为例子,顺便展示一下成员列表,Yes都是帅哥,我懂你们的心。别夸我们,我们会变更帅的。

  照样右键审查元素。

  

  还是这个熟悉的小栏目。

  想对他进行修改那我们得熟悉他。

  你懂的百度啥的走起来,翻译记得也带上,360浏览器也有自带翻译。

  我们先认识几个对于修改比较重要的词:

  font-size —— 字体大小

  Background —— 背景

  Color —— 颜色

  Height —— 高度

  Width —— 宽度

  line-height —— 行高

  ……

  量词的单位,字体一般以pt为主,高度、宽度、行高一般以em为主,还有一些放大缩小是以%为主,这个一般有读过小学数学书的都知道,或者度娘也可以。

  一般字体颜色、背景颜色反正接触到颜色的都会显示一个小小的正方形+所对颜色

  

  你单击一下就会出现一个调色盘

  

  然后你可以随意的调色,但要记住调色完之后不能立刻关闭

  

  要记住他的颜色代码

  然后我们复制一下,假设我就搞个#FFFFFF 也就是纯白

  效果如下:

  

  发现这个相对位置颜色不一样了本来是黑色的。

  原来如下图:

  

  是不是interesting!

  就是这么简单,你别怂,这只是审查元素,他不会保存,你要放心的大胆的去改,尝试总可以带动你!

  表示这篇文章的灵感就是这么来的!

  

  0x03 利用审查元素嗨

  这块区域我的涉及范围比较小,因为对于十六进制、什么编码的认识比较窄小,所以我借用米斯特安全团队一篇文章

  网址:www.hi-ourlife.com

  借用文章地址:http://www.hi-ourlife.com/index.php/post/154.html

  文章题目:i春秋安全勇士30强诞生赛题解

  我们先来看看文章的基础题那个部分

  第一道题目:

  

[AppleScript] 纯文本查看 复制代码

  ?

  1alert("flag{a2714506-b3e2-417d-bac9-e8d078ed4d96}")

  

  答案在一个弹窗程序里

  但是这么明显的可能现在比较少了,因为程序猿不傻。

  第二道题目:

  

[AppleScript] 纯文本查看 复制代码

  ?

  1

  

  也是在源代码里。

  我再在这思路上提供一下,其实可以通过修改css或者html的背景然后让那段答案浮现,但比这个直接找麻烦了一些。

  第三道题目:

  

  我先给春秋程序猿的编故事能力打个满分,语句尽量要变得优美。

  

[AppleScript] 纯文本查看 复制代码

  ?

  1function aaa (){eval("32:64:39:30:61:39:30:38:31:63:62:38:64:61:63:38:61:64:65:65:61:34:63:33:61:66:30:33:34:39:32:61")}

  

  然后去掉“:”会发现这是一个十六进制数组

  然后工具上。

  这道题目可以用上修改js和css的方法+Sources 寻找目录中有用的东西

  第四道题目:

  

[AppleScript] 纯文本查看 复制代码

 ?

    还是审查元素,然而发现的这段是一串Unicode 编码 然而这个我有点不懂了,但是我知道肯定要用转换器,所以我们需要学习更多的编码代码之类的。

  0x04 总结

  这些题目都是围绕着审查元素来解答的,某些后台程序可能就存在此类疏忽,这个故事告诉我们要细心的去挖掘。

?

  0x05 温馨提示

  可能此文章在一些人眼中是一个比较弱的,但我发这帖子是供一些学习html、js、css的小伙伴们学习,来帮助一下他们,希望能帮助到他们,欢迎各位来捧场。

      本文来源:http://bbs.ichunqiu.com/thread-9104-1-1.html?from=bky

时间: 2024-07-31 07:57:06

【网络安全技术】教你审查元素玩出你的范的相关文章

【新书推荐】“十三五”国家重点出版规划项目《网络安全技术及应用》第3版出版发行

[新书推荐]"十三五"国家重点出版规划项目<网络安全技术及应用>第3版出版发行     新书特色:"十三五"国家重点出版规划项目暨上海市高校精品课程特色教材(立体化.新型态.双色印刷-扫描二维码可看视频等),上海市高校优秀教材奖,核心产品立体化配套建设工程,高等教育网络空间安全规划教材,<网络安全技术及应用>第3版出版发行. 注重"教.学.练.做.用一体化",吸收了国内外大量的新知识.新技术.新方法和国际通用准则. 增加了

chrome审查元素功能,web开发强大帮手

怎样打开Chrome的开发者工具? 你可以直接在页面上点击右键,然后选择审查元素: 或者在Chrome的工具中找到: 或者,你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12. 打开的开发者工具就长下面的样子: 不过我一般习惯与点左下角的那个按钮,将开发者工具弹出作为一个独立的窗口: 审查元素功能窗口(Developer Tools)里又分为六个子功能,分别为Elements.Resources.Scripts.TimeLine.

想成为网络安全技术爱好者(可能是黑客)的话,需要看什么书?

(从刚刚从知乎上看到了的问题,看到排名第一的答案依旧是调侃和嘲讽,心生凉意,大概知乎也到如此地步了) 与其说是成为一名hacker倒不如说是 成为一名网络安全技术爱好者更符合你们的审美标准,我们一般是不会说自己是某某客,一来是这个词已经被世俗歪曲,以及各种帽(red hat or black hat)我们提只会让不懂的人误解,二来不是什么人都配叫这两个字的,我在很多场合提过这两个字是有内涵,坚信它的人是有 自由 平等 随意 突破的信条的. 既然题主问想要成为一名hacker需要阅读什么样的书.

python爬虫3——获取审查元素(板野友美吧图片下载)

测试环境:python2.7 + beautifulsoup4.4.1 + selenium2.48.0 测试网址:http://tieba.baidu.com/p/2827883128 目的是下载该网页下所有图片,共160+张.可以分为以下几步: 1.获取网页源代码. 发现直接通过urllib2或者request获取到的源代码和实际图片对应不起来,通过chrome审查元素功能可以查询到对应的图片,猜测是该页面的图片加载是通过ajax异步传输的.因此使用工具selenium + chromedr

防F12审查元素扒代码:按下F12关闭当前页面

有的时候我看别人的网站的某个部分做的比较好我都会通过按F12审查元素来查看别人的代码,那么如果不然别人查看自己网站的代码呢.一段JavaScript代码即可实现上述功能,插入到footer.php或者header.php的中即可: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <script>function fuckyou(){       window.close(); //关闭当前窗口(防抽

关于在审查元素中看到的::before与::after

审查元素中看到的这两个标签,表示内容并不在元素中,而是在css中,可以查看style看到具体内容. 一般来说这样做是为了清除浮动(clearfix)的代码,防止后边的容器因为浮动出现布局的混乱. 添加在选择到的元素内部之前和之后. 如下写法: div:before { content: "\0020"; display: block; height: 0; overflow: hidden; font-size: 0; line-height: 0; visibility: hidde

网络安全技术基础

<网络安全与病毒防范>第3章 网络安全技术基础 概要: 数据加密技术 身份认证技术 包过滤技术 资源授权技术 内容安全(防病毒)技术 1.计算机网络基础知识 OSI七层各功能: 应用层:与用户应用的接口 表示层:数据格式的转换 会话层:会话管理与数据同步 传输层:端到端的可靠传输 网络层:分组传送.路由选择.流量控制 数据链路层:相邻节点间无差错地传送帧 物理层:在物理媒体上透明传送位流 TCP/IP协议栈:应用层.传输层.互联层.网络接口层. TCP/IP协议簇:TCP.IP.UDP.ICM

【网络安全工程师进阶-上海精品课程“网络安全技术”51CTO更新】

[网络安全工程师进阶-上海精品课程"网络安全技术"51CTO更新] 尊敬的各位同仁:大家好: 2014年7月28日是个吉祥日子,暑假冒着酷在原有上海市精品课程资源的基础上,暑忙了12天,多次录制(及重录).处理.剪辑.合成.转换.上传(60个需要近3天时间),完成整个课程的简介.课件等,本课程提供动画模拟演练视频等配套资源:http://jiatj.sdju.edu.cn/webanq/VideoList.aspx?info_lb=461&flag=401,担心众口难调,挨累不

解决IE11审查元素面板空白问题

嗯.没错,又要考虑ie兼容问题了.ie8不支持,好吧,先换到其他ie版本看看效果.咦~为什么ie11无法审查元素呢?版本切换也没有反应.页面一片空白,像是没加css的页面.就是这样! ...此处省略一万字我查找的过程,直接来解决方法! 解决办法:安装windows7补丁:KB3008923下载地址:http://www.microsoft.com/en-us/download/details.aspx?id=45134   (32位) http://www.microsoft.com/zh-cn