YouCan'tNotKnow作者：LarryLu译者：前端小智。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。随着网络上的Web应用越来越多，为了提高安全性，与安全相关的HTTP头太多了，需要记住。由于HTTPheaders太多，功能各不相同，这里我想介绍几个比较简单易设置的安全header。只要加了这些headers，网站就突然安全了~ContentSecurityPolicy(CSP)首先是老生常谈的CSP。此标头用于限制浏览器只能从中加载资源的位置。比如我设置Content-Security-Policy:default-srclarry.com，就代表我限制浏览器从域名larry.com加载图片、CSS、字体等资源。当然，我想设置很多域名也是可以的，只要一直往下连就行了。下图中开发者工具的内容是我去Github主页时在响应头中的CSP设置。就是加了uploads.github.com、api.github.com等很多域名，虽然看起来很冗长，但至少有一个白名单，其他域名的东西就不会莫名加载了。如果想对不同类型的资源有不同的策略（虽然比较麻烦，但会更安全），也可以写Content-Security-Policy：img-srca.com；font-srcb.com，浏览器就会知道你只想加载a.com的图片，加载b.com的字体。如果想看可以设置哪些属性，可以参考MDN上的Directives中限制域名有什么用？如果有一天黑客在我的网站上发现了一个XSS漏洞，允许他在首页的HTML中添加一段，那么每一个访问我网站的用户浏览器会加载恶意的evil.js，让黑客做一些坏事，比如重定向，窃取账号密码等。但是如果CSP设置为Content-Security-Policy:default-srclarry.com，浏览器会拒绝加载evil.js（如下），因为该脚本来自hacker.com。所以，CSP虽然不能完全阻止XSS，但是可以减少XSS的影响，因为攻击者如果不能从外部加载恶意资源，能做的事情就比较少了。StrictTransportSecurity(HSTS)HSTS的全称是HTTPStrictTransportSecurity，可能听说过这个header的人比较少。它用于强制浏览器仅使用安全的HTTPS协议而不是HTTP连接到网站。例如，许多网站实际上同时使用HTTP和HTTPS。是可以连接的，但是考虑到安全，当然希望所有用户都使用HTTPS。这时候只要加上Strict-Transport-Security:max-age=31536000；includeSubDomains在header中，那么在接下来的31536000秒内（其实是一年XD），只要用户浏览器看到这个域名或者它的子域名，就会全部改用HTTPS进行连接。脸书和脸书都能看到HSTS的痕迹，只是每个人设置的max-age略有不同。比较常见的大概是31536000（一年），15552000（180天）等数字X-Content-Type-Options听说过这个header的人可能就更少了。在说这个header之前，先说说什么是contentsniffing：一般来说，浏览器会通过Content-Type来判断请求的资源是什么类型？通过获取到的Content-Type一般是text/javascript，所以浏览器看到了就会执行，但是有些网站（尤其是十几、十几年前的老网站）确实开发时没有设置好Content-Type，导致部分JS文件的Content-Type为text/plain，即纯文本文件。为了让这些网站顺利运行，浏览器不仅会参考Content-Type，还会做内容嗅探，从文件内容中分析出类型。如果解析为JS，则执行，这样老网站就不会坏了。但是嗅闻这个动作看似亲昵，其实也是软肋。比如某些网站允许用户上传资源，攻击者可以恶意上传一些带有JS特征的JPG文件（这些图片会被浏览器判断为脚本）。然后想办法把这个图片加载到前端，导致里面的恶意脚本被执行，造成XSS攻击。为了防止浏览器猜测资源的Content-Type是什么（麻烦的是各个浏览器猜测的方式还是不一样），我们需要在X-Content-Type-Options:nosniff中添加headers告诉浏览器直接使用header中提供的Content-Type，不要在那里猜测，这样就不会出现纯文本和图片被判断为脚本的情况，但是因为nosniff的加入，需要注意各种资源的Content-Type是否设置好，因为浏览器不会帮你猜，如果你真的把JS和CSS的Content-Type设置错了，浏览器是不会运行的，而且该网站看起来很奇怪。X-Frame-Options通常在写网页的时候，如果想把其他网页的内容拿过来用（下），可以用嵌入他;相反，如果别人想把我做的网站嵌入到他的网站中，也有可能会有什么安全隐患？万一有什么不好的网站，他就通过iframe嵌入气象局的网页，用CSS把iframe做成透明的，然后在透明的iframe后面放一些按钮（如下图）。当用户在不良网站点击我很帅或者我很帅的时候，会不小心点到气象局的网站。这种攻击称为点击劫持。如果只点气象局的网站，什么也不会发生。不管怎样，就是这样。但是如果嵌入了某家银行的网站呢？用户可能会被精心设计的按钮所欺骗，无意识地按下iframe中的转账、提现等按钮。为了避免此类问题，最好的办法是加上X-Frame-Options:deny这个header，意思是告诉浏览器我的网站不想被嵌入（为了安全，大部分银行都会加上这个header），所以当我想在我的网站上嵌入玉山银行的页面时，浏览器会报错“ebank.esunbank.com.twisnotallowedtobeembeddedinotherwebsites”。因为玉山银行的页面根本不允许嵌入，所以避免了基于iframe的点击劫持攻击。小结今天介绍了CSP、HSTS、X-Content-Type-Options和X-Frame-Options，一共四个安全相关的HTTPheaders，这些headers不仅简单易用，而且用起来不到十个分钟添加，并且可以大大提高安全性，所以它们已经是网站开发不可或缺的HTTP标头。除了这四个，其实还有X-XSS-Protection,Expect-CT,Public-Key-Pins,Feature-Policy等很多header，但是因为有的作用不是很大，有的已经被宣告弃用了，所以这里暂且不提。有兴趣的可以自己去看看OwaspSecureHeaders~代码部署后可能出现的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具，Fundebug。https://medium.com/starbugs/m...交流有梦想，有干货，微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。
