前言随着互联网的高速发展信息安全问题已经成为行业最为关注的焦点之一。总的来说安全是很复杂的一个领域在移动互联网时代前端人员除了传统的 XSS、CSRF 等安全问题之外还时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。这篇文章会介绍一些常见的安全问题及如何防范的内容在当下其实安全问题越来越重要已经逐渐成为前端开发必备的技能了。前端安全问题跨站脚本攻击XSSCross-Site Scripting跨站脚本攻击简称 XSS是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本使之在用户的浏览器上运行。利用这些恶意脚本攻击者可获取用户的敏感信息如 Cookie、SessionID 等进而危害数据安全。为了和 CSS 区分这里把攻击的第一个字母改成了 X于是叫做 XSS。一般可以通过三种方式来注入恶意脚本反射型XSS攻击顾名思义恶意JavaScript脚本属于用户发送给网站请求中的一部分随后网站又将这部分返回给用户恶意脚本在页面中被执行。一般发生在前后端一体的应用中服务端逻辑会改变最终的网页代码。反射型 XSS 的攻击步骤攻击者构造出特殊的 URL其中包含恶意代码。用户打开带有恶意代码的 URL 时网站服务端将恶意代码从 URL 中取出拼接在 HTML 中返回给浏览器。用户浏览器接收到响应后解析执行混在其中的恶意代码也被执行。恶意代码窃取用户数据并发送到攻击者的网站或者冒充用户的行为调用目标网站接口执行攻击者指定的操作。基于DOM的XSS攻击目前更流行前后端分离的项目反射型 XSS 无用武之地。 但这种攻击不需要经过服务器我们知道网页本身的JavaScript也是可以改变HTML的黑客正是利用这一点来实现插入恶意脚本。基于DOM 的 XSS 攻击步骤攻击者构造出特殊的 URL其中包含恶意代码。用户打开带有恶意代码的 URL。用户浏览器接收到响应后解析执行前端 JavaScript 取出 URL 中的恶意代码并执行。恶意代码窃取用户数据并发送到攻击者的网站或者冒充用户的行为调用目标网站接口执行攻击者指定的操作。存储型XSS攻击又叫持久型 XSS顾名思义黑客将恶意JavaScript脚本长期保存在服务端数据库中用户一旦访问相关页面数据恶意脚本就会被执行。常见于搜索、微博、社区贴吧评论等。存储型 XSS 的攻击步骤攻击者将恶意代码提交到目标网站的数据库中。用户打开目标网站时网站服务端将恶意代码从数据库取出拼接在 HTML 中返回给浏览器。用户浏览器接收到响应后解析执行混在其中的恶意代码也被执行。恶意代码窃取用户数据并发送到攻击者的网站或者冒充用户的行为调用目标网站接口执行攻击者指定的操作。这几种XSS攻击类型的区别反射型的 XSS的恶意脚本存在URL里存储型 XSS的恶意代码存在数据库里。反射型 XSS攻击常见于通过 URL 传递参数的功能如网站搜索、跳转等。存储型XSS攻击常见于带有用户保存数据的网站功能如论坛发帖、商品评论、用户私信等。而基于DOM的XSS攻击中取出和执行恶意代码由浏览器端完成属于前端JavaScript自身的安全漏洞其他两种XSS都属于服务端的安全漏洞。XSS防范措施由上面对XSS攻击的介绍我们知道XSS攻击主要有两大步骤攻击者提交恶意代码浏览器执行恶意代码所以我们可以针对这两点来制定防范措施输入过滤在用户提交时由前端过滤输入然后提交到后端这种方法不可行因为攻击者可能绕过前端过滤直接构造请求提交恶意代码。一般在写入数据库前后端对输入数据进行过滤。虽然输入侧过滤能够在某些情况下解决特定的 XSS 问题但会引入很大的不确定性和乱码问题。在防范 XSS 攻击时应避免此类方法。预防存储型和反射型 XSS 攻击改成纯前端渲染把代码和数据分隔开。对 HTML 做充分转义。预防 DOM 型 XSS 攻击DOM 型 XSS 攻击实际上就是网站前端 JavaScript 代码本身不够严谨把不可信的数据当作代码执行了。在使用.innerHTML、.outerHTML、document.write()时要特别小心不要把不可信的数据作为 HTML 插到页面上而应尽量使用.textContent、.setAttribute()等。如果用 Vue/React 技术栈并且不使用v-html/dangerouslySetInnerHTML功能就在前端 render 阶段避免innerHTML、outerHTML的 XSS 隐患。DOM 中的内联事件监听器如location、onclick、onerror、onload、onmouseover等a标签的href属性JavaScript 的eval()、setTimeout()、setInterval()等都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API很容易产生安全隐患请务必避免。!-- 内联事件监听器中包含恶意代码 -- img onclickUNTRUSTED onerrorUNTRUSTED srcdata:image/png, !-- 链接内包含恶意代码 -- a hrefUNTRUSTED1/a script // setTimeout()/setInterval() 中调用恶意代码 setTimeout(UNTRUSTED) setInterval(UNTRUSTED) // location 调用恶意代码 location.href UNTRUSTED // eval() 中调用恶意代码 eval(UNTRUSTED) /scriptContent Security Policy严格的 CSP 在 XSS 的防范中可以起到以下的作用禁止加载外域代码防止复杂的攻击逻辑。禁止外域提交网站被攻击后用户的数据不会泄露到外域。禁止内联脚本执行规则较严格目前发现 GitHub 使用。禁止未授权的脚本执行新特性Google Map 移动版在使用。合理使用上报可以及时发现 XSS利于尽快修复问题。使用 W3C 提出的CSP (Content Security Policy内容安全策略)定义域名白名单其他措施设置Cookie 的 HttpOnly属性禁止JavaScript读取cookie验证码防止脚本冒充用户提交危险操作。XSS攻击案例2005年年仅19岁的 Samy Kamkar 发起了对MySpace.com的XSS Worm攻击。 Samy Kamkar 的蠕虫在短短几小时内就感染了100万用户——它在每个用户的自我简介后边加了一句话“but most of all, Samy is my hero.”Samy是我的偶像。这是 Web 安全史上第一个重量级的XSS Worm具有里程碑意义。2007年12月百度空间收到蠕虫攻击用户之间开始转发垃圾短消息。QQ 邮箱m.exmail.qq.com域名被发现反射型 XSS 漏洞2011年新浪微博曾被黑客 XSS 攻击黑客诱导用户点击一个带有诱惑性的链接便会自动发送一条带有同样诱惑性链接微博。攻击范围层层扩大也是一种蠕虫攻击。跨站请求伪造CSRFCSRFCross-site request forgery跨站请求伪造攻击者诱导受害者进入第三方网站在第三方网站中向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证绕过后台的用户验证达到冒充用户对被攻击的网站执行某项操作的目的。CSRF是怎么攻击的典型的CSRF攻击是这样的受害者登录A网站并且保留了登录凭证Cookie攻击者引诱受害者访问B网站B网站向A网站发送了一个请求这个就是下面将介绍的几种伪造请求的方式浏览器请求头中会默认携带 A 网站的 CookieA网站服务器收到请求后经过验证发现用户是登录了的所以会处理请求常见的CSRF攻击类型GET类型的CSRFGET类型的CSRF利用非常简单只需要一个HTTP请求一般会这样利用img srchttp://bank.example/withdraw?amount10000forhacker 在受害者访问含有这个img的页面后浏览器会自动向http://bank.example/withdraw?accountxiaomingamount10000forhacker发出一次HTTP请求。bank.example就会收到包含受害者登录信息的一次跨域请求。POST类型的CSRF这种类型的CSRF利用起来通常使用的是一个自动提交的表单如form actionhttp://bank.example/withdraw methodPOST input typehidden nameaccount valuexiaoming / input typehidden nameamount value10000 / input typehidden namefor valuehacker / /form script document.forms[0].submit(); /script访问该页面后表单会自动提交相当于模拟用户完成了一次POST操作。POST类型的攻击通常比GET要求更加严格一点但仍并不复杂。任何个人网站、博客被黑客上传页面的网站都有可能是发起攻击的来源后端接口不能将安全寄托在仅允许POST上面。链接类型的CSRF链接类型的CSRF并不常见比起其他两种用户打开页面就中招的情况这种需要用户点击链接才会触发。这种类型通常是在论坛中发布的图片中嵌入恶意链接或者以广告的形式诱导用户中招攻击者通常会以比较夸张的词语诱骗用户点击a hrefhttp://test.com/csrf/withdraw.php?amount1000forhacker taget_blank 重磅消息 a/CSRF的特点攻击一般发起在第三方网站而不是被攻击的网站。被攻击的网站无法防止攻击发生。攻击利用受害者在被攻击网站的登录凭证冒充受害者提交操作而不是直接窃取数据。整个过程攻击者并不能获取到受害者的登录凭证仅仅是“冒用”。跨站请求可以用各种方式图片URL、超链接、CORS、Form提交等等。部分请求方式可以直接嵌入在第三方论坛、文章中难以进行追踪。CSRF防范措施由上面对CSRF的介绍我们知道了CSRF通常发生在第三方域名并且CSRF攻击者不能获取到受害者的cookie等信息只是借用他们的登录状态来伪造请求。所以我们可以针对这两点来制定防范措施同源检测既然CSRF大多来自第三方网站那么我们就直接禁止第三方域名或者不受信任的域名对我们发起请求。在HTTP协议中每一个异步请求都会携带两个Header用于标记来源域名Origin HeaderReferer Header这两个Header在浏览器发起请求时大多数情况会自动带上并且不能由前端自定义内容。 服务器可以通过解析这两个Header中的域名确定请求的来源域。同时服务器应该优先检测 Origin。为了安全考虑相比于 RefererOrigin 只包含了域名而不带路径。CSRF Token在浏览器向服务器发起请求时服务器生成一个CSRF Token。CSRF Token其实就是服务器生成的随机字符串然后将该字符串植入到返回的页面中通常是放到表单的隐藏输入框中这样能够很好的保护CSRF Token不被泄漏当浏览器再次发送请求的时候就需要携带这个CSRF Token值一起提交服务器验证CSRF Token是否一致从第三方网站发出的请求是无法获取用户页面中的CSRF Token值的。给 Cookie 设置合适的 SameSite当从 A 网站登录后会从响应头中返回服务器设置的 Cookie 信息而如果 Cookie 携带了 SameSitestrict 则表示完全禁用第三方站点请求头携带 Cookie比如当从 B 网站请求 A 网站接口的时候浏览器的请求头将不会携带该 Cookie。SamesiteStrict这种称为严格模式表明这个 Cookie 在任何情况下都不可能作为第三方 CookieSamesiteLax这种称为宽松模式比 Strict 放宽了点限制假如这个请求是这种请求改变了当前页面或者打开了新页面且同时是个GET请求则这个Cookie可以作为第三方Cookie。默认None 任何情况下都会携带点击劫持ClickJacking点击劫持Clickjacking是一种通过视觉欺骗的手段来达到攻击目的手段。往往是攻击者将目标网站通过 iframe 嵌入到自己的网页中通过 opacity 等手段设置 iframe 为透明的使得肉眼不可见这样一来当用户在攻击者的网站中操作的时候比如点击某个按钮这个按钮的顶层其实是 iframe从而实现目标网站被点击劫持。点击劫持防范措施在HTTP投中加入X-FRAME-OPTIONS属性此属性控制页面是否可被嵌入 iframe 中DENY不能被所有网站嵌套或加载SAMEORIGIN只能被同域网站嵌套或加载ALLOW-FROM URL可以被指定网站嵌套或加载。判断当前网页是否被 iframe 嵌套HTTP严格传输安全HSTSHTTP严格传输安全(HSTS)是一种安全功能web服务器通过它来告诉浏览器仅用HTTPS来与之通讯而不是使用HTTP。HSTS代表HTTP严格传输安全性由IETF在2012年的RFC 6797中指定。创建它是为了在站点通过HTTPS运行时强制浏览器使用安全连接。它是您添加到Web服务器的安全标头并在响应标头中反映为Strict-Transport-Security。HSTS很重要因为它解决了以下问题访问者尝试使用您网站页面的不安全版本 (HTTP://) 的任何尝试都将自动转发到安全版本 (HTTPS://)。旧的HTTP书签和输入您网站的HTTP版本的人会让您面临中间人攻击。在这些攻击中攻击者改变各方之间的通信并诱使他们认为他们仍在相互通信。不允许覆盖无效的证书消息这反过来又保护了访问者。Cookie劫持当有人通过不安全的连接窃取会话cookie时就会发生这种情况。Cookie可以包含各种有价值的信息例如信用卡信息、姓名、地址等。注意如果之前没有使用HTTPS协议访问过该站点那么HSTS是不奏效的只有浏览器曾经与服务器创建过一次安全连接并且网站通过HTTPS协议告诉浏览器它支持HSTS那么之后浏览器才会强制使用HTTPS即使链接被换成了HTTP。虽然我们的系统默认更喜欢HTTPS版本但您也可以通过将您的HTTP站点重定向到您的HTTPS版本并在您的服务器上实施HSTS标头使其他搜索引擎更清楚这一点。 —— 谷歌安全团队开启HSTS在Apache中启用HSTS将以下代码添加到您的虚拟主机文件中。Header always set Strict-Transport-Security max-age31536000在NGINX中启用 HSTS将以下代码添加到您的NGINX配置中。add_header Strict-Transport-Security max-age31536000事实上添加HSTS标头有性能优势。如果有人试图通过HTTP访问您的站点而不是发出HTTP请求它只是重定向到HTTPS版本。CDN劫持CDN原理它的名字就叫做CDN——Content Delivery Network内容分发网络。具体来说CDN就是采用更多的缓存服务器CDN边缘节点布放在用户访问相对集中的地区或网络中。当用户访问网站时利用全局负载技术将用户的访问指向距离最近的缓存服务器上由缓存服务器响应用户请求。有点像电商的本地仓吧CDN应用广泛支持多种行业、多种场景内容加速例如图片小文件、大文件下载、视音频点播、直播流媒体、全站加速、安全加速。什么是CDN劫持网络上有很多黑客为了让用户能够登录自己开发的钓鱼网站都会通过对CDN进行劫持的方法让用户自动转入自己开发的网站。而很多用户却往往无法察觉到自己已经被劫持。其实验证被劫持的方法就是输入任何网址看看所打开的网页是否和自己输入的网址一致CDN劫持防范措施使用SRI来解决CDN劫持SRI全称 Subresource Integrity - 子资源完整性是指浏览器通过验证资源的完整性通常从 CDN 获取来判断其是否被篡改的安全特性。通过给 link 标签或者 script 标签增加 integrity 属性即可开启 SRI 功能比如script typetext/javascript src//s.url.cn/xxxx/aaa.js integritysha256-xxx sha384-yyy crossoriginanonymous/scriptintegrity 值分成两个部分第一部分指定哈希值的生成算法sha256、sha384 及 sha512第二部分是经过 base64 编码的实际哈希值两者之间通过一个短横-分割。integrity 值可以包含多个由空格分隔的哈希值只要文件匹配其中任意一个哈希值就可以通过校验并加载该资源。开启 SRI 能有效保证页面引用资源的完整性避免恶意代码执行。浏览器如何处理 SRI当浏览器在 script 或者 link 标签中遇到 integrity 属性之后会在执行脚本或者应用样式表之前对比所加载文件的哈希值和期望的哈希值。当脚本或者样式表的哈希值和期望的不一致时浏览器必须拒绝执行脚本或者应用样式表并且必须返回一个网络错误说明获得脚本或样式表失败。内容安全策略CSP内容安全策略Content Security Policy简称 CSP通过它可以明确的告诉客户端浏览器当前页面的哪些外部资源可以被加载执行而哪些又是不可以的。CSP的意义防XSS等攻击的利器。CSP 的实质就是白名单制度开发者明确告诉客户端哪些外部资源可以加载和执行等同于提供白名单。它的实现和执行全部由浏览器完成开发者只需提供配置。CSP 大大增强了网页的安全性。攻击者即使发现了漏洞也没法注入脚本除非还控制了一台列入了白名单的可信主机。CSP的分类Content-Security-Policy配置好并启用后不符合 CSP 的外部资源就会被阻止加载。Content-Security-Policy-Report-Only表示不执行限制选项只是记录违反限制的行为。它必须与report-uri选项配合使用。CSP的使用通过 HTTP 头配置Content-Security-Policy以下配置说明该页面只允许当前源和https://apis.google.com这 2 个源的脚本加载和执行Content-Security-Policy: script-src self https://apis.google.com通过页面meta标签配置meta http-equivContent-Security-Policy contentscript-src self https://apis.google.com安全沙箱Sandbox多进程的浏览器架构将主要分为两块浏览器内核和渲染内核。而安全沙箱能限制了渲染进程对操作系统资源的访问和修改同时渲染进程内部也没有读写操作系统的能力而这些都是在浏览器内核中一一实现了包括持久存储、网络访问和用户交互等一系列直接与操作系统交互的功能。浏览器内核和渲染内核各自职责分明当他们需要进行数据传输的时候会通过 IPC 进行。而渲染进程的工作是进行 HTML、CSS 的解析JavaScript 的执行等而这部分内容是直接暴露给用户的所以也是最容易被黑客利用攻击的地方如果黑客攻击了这里就有可能获取到渲染进程的权限进而威胁到操作系统。所以需要一道墙用来把不可信任的代码运行在一定的环境中限制不可信代码访问隔离区之外的资源而这道墙就是浏览器的安全沙箱。安全沙箱的存在是为了保护客户端操作系统免受黑客攻击但是阻止不了 XSS 和 CSRF。安全沙箱是利用操作系统提供的安全技术这样渲染进程在运行中就无法获取或修改操作系统中的数据。安全沙箱最小隔离单位是进程所以无法保护单进程浏览器。Iframeiframe在给我们的页面带来更多丰富的内容和能力的同时也带来了不少的安全隐患。因为iframe中的内容是由第三方来提供的默认情况下他们不受我们的控制他们可以在iframe中运行JavaScirpt脚本、Flash插件、弹出对话框等等这可能会破坏前端用户体验。如何让自己的网站不被其他网站的iframe引用js的防御方案将下面这段代码放到网站页面的/body标签前这样别人在通过iframe框架引用你的网站网页时浏览器会自动跳转到你的网站所引用的页面上。script if (self top) { var theBody document.getElementsByTagName(body)[0]; theBody.style.display block; } else { top.location self.location; } /script使用X-Frame-Options防止网页被iframeX-FRAME-OPTIONS是微软提出的一个http头专门用来防御利用iframe嵌套的点击劫持攻击。DENY // 拒绝任何域加载 SAMEORIGIN // 允许同源域下加载 ALLOW-FROM // 可以定义允许frame加载的页面地址如何禁止被使用的 iframe 对当前网站某些操作sandbox是html5的新属性主要是提高iframe安全系数。iframe因安全问题而臭名昭著这主要是因为iframe常被用于嵌入到第三方中然后执行某些恶意操作。【这个与上面说到的安全沙箱Sandbox不同】 现在有一场景我的网站需要 iframe 引用某网站但是不想被该网站操作DOM、不想加载某些js广告、弹框等、当前窗口被强行跳转链接等我们可以设置 sandbox 属性:allow-same-origin允许被视为同源即可操作父级DOM或cookie等allow-top-navigation允许当前iframe的引用网页通过url跳转链接或加载allow-forms允许表单提交allow-scripts允许执行脚本文件allow-popups允许浏览器打开新窗口进行跳转“”设置为空时上面所有允许全部禁止学习资源为了帮助大家更好的塑造自己成功转型我给大家准备了一份网络安全入门/进阶学习资料里面的内容都是适合零基础小白的笔记和资料不懂编程也能听懂、看懂这些资料网络安全/黑客零基础入门【----帮助网安学习以下所有学习资料文末免费领取----】 ① 网安学习成长路径思维导图 ② 60网安经典常用工具包 ③ 100SRC漏洞分析报告 ④ 150网安攻防实战技术电子书 ⑤ 最权威CISSP 认证考试指南题库 ⑥ 超1800页CTF实战技巧手册 ⑦ 最新网安大厂面试题合集含答案 ⑧ APP客户端安全检测指南安卓IOS大纲首先要找一份详细的大纲。学习教程第一阶段零基础入门系列教程该阶段学完即可年薪15w第二阶段技术入门弱口令与口令爆破XSS漏洞CSRF漏洞SSRF漏洞XXE漏洞SQL注入任意文件操作漏洞业务逻辑漏洞该阶段学完年薪25w阶段三高阶提升反序列化漏洞RCE综合靶场实操项目内网渗透流量分析日志分析恶意代码分析应急响应实战训练该阶段学完即可年薪30w面试刷题最后我其实要给部分人泼冷水因为说实话上面讲到的资料包获取没有任何的门槛。但是我觉得很多人拿到了却并不会去学习。大部分人的问题看似是“如何行动”其实是“无法开始”。几乎任何一个领域都是这样所谓“万事开头难”绝大多数人都卡在第一步还没开始就自己把自己淘汰出局了。如果你真的确信自己喜欢网络安全/黑客技术马上行动起来比一切都重要。资料领取上述这份完整版的网络安全学习资料已经上传网盘朋友们如果需要可以微信扫描下方二维码 ↓↓↓或者点击以下链接都可以领取点击领取 《网络安全黑客入门进阶学习资源包》文章来自网上侵权请联系博主本文转自 https://blog.csdn.net/kalilinuxsafe/article/details/161021049?spm1001.2014.3001.5502如有侵权请联系删除。