iframe属性过时(iframe属性值有哪些) 收藏 0

前端开发中79条不可忽视的知识点汇总

过往一些不足的地方，通过博客，好好总结一下。

超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。 HTTP 的工作方式是客户机与服务器之间的请求-应答协议。 web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。

HEAD: 与 GET 相同，但只返回 HTTP 报头，不返回文档主体 PUT: 上传指定的 URI 表示 DELETE: 删除指定资源 OPTIONS: 返回服务器支持的 HTTP 方法 CONNECT: 把请求连接转换到透明的 TCP/IP 通道 POST: 向指定的资源提交要被处理的数据

GET: 从指定的资源请求数据

GET 请求可被缓存 GET 请求保留在浏览器历史记录中 GET 请求可被收藏为书签 GET 请求不应在处理敏感数据时使用 GET 请求有长度限制(2048字符),IE和Safari浏览器限制2k;Opera限制4k;Firefox，Chrome限制8k GET 请求只应当用于取回数据

POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 不能被收藏为书签 POST 请求对数据长度没有要求

nth-child(even/odd)

nth-of-type(odd)

渐变实现linear-gradient

CDN:CDN是将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。 好处： 1、多域名加载资源 一般情况下，浏览器都会对单个域名下的并发请求数（文件加载）进行限制，通常最多有4个，那么第5个加载项将会被阻塞，直到前面的某一个文件加载完毕。 因为CDN文件是存放在不同区域（不同IP）的，所以对浏览器来说是可以同时加载页面所需的所有文件（远不止4个），从而提高页面加载速度。

2、文件可能已经被加载过并保存有缓存 一些通用的js库或者是css样式库，如jQuery，在网络中的使用是非常普遍的。当一个用户在浏览你的某一个网页的时候，很有可能他已经通过你网站使用的CDN访问过了其他的某一个网站，恰巧这个网站同样也使用了jQuery，那么此时用户浏览器已经缓存有该jQuery文件（同IP的同名文件如果有缓存，浏览器会直接使用缓存文件，不会再进行加载），所以就不会再加载一次了，从而间接的提高了网站的访问速度

3、高效率 你的网站做的再NB也不会NB过百度NB过Google吧？一个好的CDNs会提供更高的效率，更低的网络延时和更小的丢包率。

4、分布式的数据中心 假如你的站点布置在北京，当一个香港或者更远的用户访问你的站点的时候，他的数据请求势必会很慢很慢。而CDNs则会让用户从离他最近的节点去加载所需的文件，所以加载速度提升就是理所当然的了。

5、使用情况分析 一般情况下CDNs提供商（如百度云加速）都会提供数据统计功能，可以了解更多关于用户访问自己网站的情况，可以根据统计数据对自己的站点适时适当的做出些许调整。

6、有效防止网站被攻击 一般情况下CDNs提供商也是会提供网站安全服务的

参考连接

1.js外联文件放到body底部，css外联文件放到head内 2.http静态资源尽量用多个子域名 3.服务器端提供html和http静态资源时最好开启gzip 4.在js,css,img等资源响应的http headers里设置expires,last-modified 5.尽量减少http requests的数量 6.js/css/html/img资源压缩 7.使用css spirtes，可以减少img请求次数 8.大图使用lazyload懒加载 9.避免404，减少外联js 10.减少cookie大小可以提高获得响应的时间 11.减少dom elements的数量 12.使用异步脚本，动态创建脚本

IE/360/搜狗浏览器: Trident Chrome/Safari/Opera: WebKit(KHTML的一个开源的分支) (虽然我们称WebKit为浏览器内核，但不太适合直接称渲染引擎，因为WebKit本身主要是由两个引擎构成的，一个正是渲染引擎“WebCore”，另一个则是javascript解释引擎“JSCore”，它们均是从KDE的渲染引擎KHTML及javascript解释引擎KJS衍生而来。) (在13年发布的Chrome 28.0.1469.0版本开始，Chrome放弃Chromium引擎转而使用最新的Blink引擎（基于WebKit2——苹果公司于2010年推出的新的WebKit引擎），Blink对比上一代的引擎精简了代码、改善了DOM框架，也提升了安全性。) (为了减少研发成本，Opera在2013年2月宣布放弃Presto，转而跟随Chrome使用WebKit分支的Chromium引擎作为自家浏览器核心引擎) Firefox/SeaMonkey: Gecko

1）解析： 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。 CSS，解析CSS会产生CSS规则树。 Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree. 2）渲染：浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意： Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。 CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。 然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。 3）绘制：最后通过调用操作系统Native GUI的API绘制。

减少reflow和repaint 1）不要一条一条地修改DOM的样式。还不如预先定义好css的class，然后修改DOM的className。

1. 把DOM离线后修改。如： 使用documentFragment 对象在内存里操作DOM 先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。 clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。 3）不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性 4）为动画的HTML元件使用fixed或absoulte的position，尽量使用transfoem，那么修改他们的CSS是不会reflow的 5）尽量少使用table布局。因为可能很小的一个小改动会造成整个table的重新布局

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS; （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题; (4)link支持使用js控制DOM去改变样式，而@import不支持;

用正确的标签做正确的事情。 html语义化让页面的内容结构化，便于对浏览器、搜索引擎解析; 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的; 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO; 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。 cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小： cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

*iframe会阻塞主页面的Onload事件； *搜索引擎的检索程序无法解读这种页面，不利于SEO; *iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript 动态给iframe添加src属性值，这样可以绕开以上两个问题。

（图片来自vue官网，更多vue学习推荐去官网查看详细文档）

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水； 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

（1）有两种， IE 盒子模型、W3C 盒子模型； （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)； （3）区 别： IE的content部分把 border 和 padding计算了进去;

absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。 fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。 relative 生成相对定位的元素，相对于其正常位置进行定位。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。 inherit 规定从父元素继承 position 属性的值。

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

• 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
• IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别) 渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用“\\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 css .bb{ background-color:red;/所有识别/ background-color:#00deff\\9; /IE6、7、8识别/ +background-color:#a200ff;/IE6、7识别/ _background-color:#1e0bd1;/IE6识别/ }
• IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性。 解决方法:统一通过getAttribute()获取自定义属性。
• IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
• 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）； 如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）； 提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性; 使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；

全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。 当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找， 直至全局函数，这种组织形式就是作用域链。

this总是指向函数的直接调用者（而非间接调用者）； 如果有new关键字，this指向new出来的那个对象； 在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；

它的功能是把对应的字符串解析成JS代码并运行； 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。 由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(\'(\’+ str +\’)\’);

window对象是指浏览器打开的窗口。 document对象是Documentd对象（HTML 文档对象）的一个只读引用，window对象的一个属性。

[\”1\”, \”2\”, \”3\”].map(parseInt) 答案也就是：[1, NaN, NaN]

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。 默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值; 全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用； 保证代码运行的安全,限制函数中的arguments修改; 提高编译器效率，增加运行速度；

1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(\”If-Modified-Since\”,\”0\”)。

2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(\”Cache-Control\”,\”no-cache\”)。 3、在URL后面加上一个随机数： \”fresh=\” + Math.random();。 4、在URL后面加上时间戳：\”nowtime=\” + new Date().getTime();。 5、如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

立即执行函数,不暴露私有成员

对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。 2. CMD 推崇依赖就近，AMD 推崇依赖前置。

参考链接

参考连接

（1）不要在同一行声明多个变量 （2）如果你不知道数组的长度，使用 push （3）请使用 ===/!== 来比较 true/false 或者数值 （4）对字符串使用单引号 \’\'(因为大多时候我们的字符串。特别html会出现\”) （5）使用对象字面量替代 new Array 这种形式 （6）绝对不要在一个非函数块里声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但是它们解析不同 （7）不要使用全局函数 （8）总是使用 var 来声明变量，如果不这么做将导致产生全局变量，我们要避免污染全局命名空间 （9）Switch 语句必须带有 default 分支 （10）使用 /**…*/ 进行多行注释，包括描述，指定类型以及参数值和返回值 （11）函数不应该有时候有返回值，有时候没有返回值 （12）语句结束一定要加分号 （13）for 循环必须使用大括号 （14）if 语句必须使用大括号 （15）for-in 循环中的变量应该使用 var 关键字明确限定作用域，从而避免作用域污染 （16）避免单个字符名，让你的变量名有描述意义 （17）当命名对象、函数和实例时使用驼峰命名规则 （18）给对象原型分配方法，而不是用一个新的对象覆盖原型，覆盖原型会使继承出现问题

1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 （2）添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefore() //在已有的子节点前插入一个新的子节点 （3）查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的) getElementById() //通过元素Id，唯一性

参考链接

jquery.extend 为jquery类添加类方法，可以理解为添加静态方法

• jquery.fn.extend: 源码中jquery.fn = jquery.prototype，所以对jquery.fn的扩展，就是为jquery类添加成员函数 使用： jquery.extend扩展，需要通过jquery类来调用，而jquery.fn.extend扩展，所有jquery实例都可以直接调用。

参考链接

之前推荐的方法（已过时）：之前解决这个问题的方法是把script标签放到body标签之后 ，这确保了解析到</body>之前都不会被script终端。这个方法是有问题的: 浏览器在整个文档解析完成之前都不能下载script文件，如果文档很大的话，解析完HTML，用户依然要等待script文件下载并执行完成之后，才能操作这个网站。

现在推荐的解决方案： 现在浏览器script标签支持 async 和 defer 属性. 应用这些属性当script被下载时，浏览器更安全而且可以并行下载（下载script并不阻断HTML解析）。 1.async标记的Script异步执行下载，并执行。这意味着script下载时并不阻塞HTML的解析，并且下载结束script马上执行。 2.defer标签的script顺序执行。这种方式也不会阻断浏览器解析HTML。 跟 async不同, defer scripts在整个文档里的script都被下载完才顺序执行。

参考链接

polyfill 是“在旧版浏览器上复制标准 API 的 JavaScript 补充”,可以动态地加载 JavaScript 代码或库，在不支持这些标准 API 的浏览器中模拟它们。 例如，geolocation（地理位置）polyfill 可以在 navigator 对象上添加全局的 geolocation 对象，还能添加 getCurrentPosition 函数以及“坐标”回调对象， 所有这些都是 W3C 地理位置 API 定义的对象和函数。因为 polyfill 模拟标准 API，所以能够以一种面向所有浏览器未来的方式针对这些 API 进行开发， 一旦对这些 API 的支持变成绝对大多数，则可以方便地去掉 polyfill，无需做任何额外工作。

html5shiv、Geolocation、Placeholder

按照W3C的标准，先发生捕获事件，后发生冒泡事件。所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件

Webpack编译期，为需要热更新的 entry 注入热更新代码(EventSource通信)

1. 页面首次打开后，服务端与客户端通过 EventSource 建立通信渠道，把下一次的 hash 返回前端
2. 客户端获取到hash，这个hash将作为下一次请求服务端 hot-update.js 和 hot-update.json的hash
3. 修改页面代码后，Webpack 监听到文件修改后，开始编译，编译完成后，发送 build 消息给客户端
4. 客户端获取到hash，成功后客户端构造hot-update.js script链接，然后插入主文档
5. hot-update.js 插入成功后，执行hotAPI 的 createRecord 和 reload方法，获取到 Vue 组件的 render方法，重新 render 组件， 继而实现 UI 无刷新更新。

参考链接

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。 也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。

对于传统的网站来说重构通常是：

表格(table)布局改为DIV+CSS 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的) 对于移动平台的优化 针对于SEO进行优化 深层次的网站重构应该考虑的方面

减少代码间的耦合 让代码保持弹性 严格按规范编写代码 设计可扩展的API 代替旧有的框架、语言(如VB) 增强用户体验 通常来说对于速度的优化也包含在重构中

压缩JS、CSS、image等前端资源(通常是由服务器来解决) 程序的性能优化(如数据读写) 采用CDN来加速资源加载 对于JS DOM的优化 HTTP服务器的文件缓存

事件不同之处：

*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求， 因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。 此外，与Node代理服务器交互的客户端代码是由javascript语言编写的， 因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变， 而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

1**(信息类)：表示接收到请求并且继续处理 100——客户必须继续发出请求 101——客户要求服务器根据请求转换HTTP协议版本

而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、 到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等；

js秘密花园 jquery原理解析 css3 js标准

参考链接

参考链接

参考链接

优点：1.保护函数内部变量的安全，加强了封装性 2.在内存中维持一个变量 3.设计私有方法和变量 4.可以读取函数内部的变量 缺点：1.导致内存泄漏，使用不当会造成额外的内存占用 2.可以改变父函数的变量，所以使用时要谨慎

1.从图像类别区分，Canvas是基于像素的位图，而SVG却是基于矢量图形。可以简单的把两者的区别看成photoshop与illustrator的区别。 2.从结构上说，Canvas没有图层的概念，所有的修改整个画布都要重新渲染，而SVG则可以对单独的标签进行修改。 3.从操作对象上说，Canvas是基于HTML canvas标签，通过宿主提供的Javascript API对整个画布进行操作的，而SVG则是基于XML元素的。 4.从功能上讲，SVG发布日期较早，所以功能相对Canvas比较完善。 5.关于动画，Canvas更适合做基于位图的动画，而SVG则适合图表的展示。 6.从搜索引擎角度分析，由于svg是有大量标签组成，所以可以通过给标签添加属性，便于爬虫搜索

文中如有一些不足，欢迎指正。笔者1天后将推出开源的CMS系统，技术架构：

• 后台Node+Koa+redis+JsonSchema
• 管理后台界面 vue-cli3 + vue + ts + vuex + antd-vue + axios
• 客户端前台 react + antd + react-hooks + axios

后面将推出该系统的设计思想，架构和实现过程，欢迎在公众号《趣谈前端》里查看更详细的介绍。

原链接：https://juejin.im/post/5d8989296fb9a06b1f147070

19个API安全最佳实践，助您实现安全

API 安全性是几乎所有应用程序都需要注意的最重要方面之一。

如今，API 是将应用程序与其他应用程序集成的最佳方式。 它们为您的应用程序提供了一个网关，因此，API 需要足够安全，这样您才不会遇到不速之客。

让我们来看看一些可能对您的应用程序构成威胁的 API 漏洞。

1. 跨站脚本攻击(XSS)

XSS 攻击在网络应用程序中很常见，但如果传入的用户数据没有经过适当消毒，也可能通过应用程序接口发生。 攻击者可以在服务器上运行恶意脚本，获取敏感数据。

1. 速率限制违规

违反 API 的速率限制功能会让攻击者有机会向您的服务器发出大量请求。 最终，服务器可能会崩溃，您的客户群可能难以与您取得联系。

1. 不恰当的认证

如果没有使用可靠的身份验证方法正确配置应用程序接口，任何第三方都可以通过应用程序接口访问您的系统。 授权也很重要，因为它定义了在指定时间内谁可以访问哪个 API 资源。

1. 不安全的数据传输

发送给 API 消费者的数据必须经过加密。 否则，数据就有可能被中间人攻击者泄露。 因此，建议使用 HTTPS 等安全协议传输数据。

1. 已废弃/过时的依赖项

应用程序接口有很多外部依赖项，用于执行复杂的任务和卸载一些复杂的逻辑。 如果这些依赖项存在漏洞，那么您的 API 也会间接受到攻击。 请务必更新依赖版本。

既然知道了 API 的漏洞，我们就来看看一些保护 API 安全的最佳实践。

定期监控和更新 API 的依赖关系至关重要，因为这些依赖关系可能包含重大漏洞。 您可以通过根据语义版本发布 API 的补丁版本来通知 API 用户。

保持 API 的更新是防止其被攻击者利用的最起码措施。

有很多方法可以对 API 用户进行身份验证。 最简单的方法是使用用户名/密码，但这太基本了，只能依靠密码的强度。

另一种方法是使用 API 密钥访问 API。 您可以为每个 API 用户提供他们可以使用的唯一密钥。

JWT 身份验证是一种将用户凭据转换为数字签名令牌并发送给用户的技术。 然后，用户在每次向服务器发送请求时都会发回相同的令牌，供服务器验证。 JWT 也有过期时间。

最有效的解决方案是 OAuth。 它允许第三方使用已有的登录凭证访问 API。 例如，如果您已经登录了 Google，应用程序就可以使用这些凭据登录您的账户，而无需密码。 你的 Google 账户就成了密码。

授权与验证是两码事。 当你授权用户时，他们已经通过了使用 API 的身份验证，只是他们可以访问哪些 API 资源而已。

例如，大学教授可以访问一批学生中的所有学生，但一个学生只能访问他们的数据。 在这种情况下，学生和教授都通过了同一系统的身份验证，但只有权执行某些操作。

确保应用程序接口授权运行良好，可以防止未经授权访问资源。

数据编辑是有选择地向用户披露信息并保护敏感信息的过程。 适当的授权可以更好地进行数据编辑。 GDPR 等数据隐私法规也以数据编辑为基础。 任何不受欢迎的第三方都应无法窥探个人或敏感数据。

您可以通过实施中间件或网关管理器来实现数据反应。

这已成为当今世界最重要的安全检查。 如果要处理任何类型的敏感信息，加密是必须的。 最简单的加密方式是使用 HTTPS 协议，该协议使用 TLS（传输层安全）握手和 SSL（安全套接字层）。

端到端加密是另一种严密保护传输中数据安全的方法。 存储在数据库中的数据也应加密，以防攻击者入侵数据库并访问数据。

有关应用程序基础架构的信息可能会通过详细的错误信息泄露给攻击者。 为避免这种情况，应保持错误信息的通用性并实施自定义错误处理。 确保错误详细信息中不会记录敏感的系统信息。

在处理应用程序接口时，输入验证是非常重要的，因为在用户发送输入之前，你是不知道输入内容的。

净化是从有效负载中删除任何不需要的可执行代码的过程。 攻击者可以输入 Javascript 脚本，如果在将其传递到 HTML 之前不对其进行消毒，它就会作为脚本执行并获取数据。

不正确的 sanitization 会导致跨站脚本 (XSS) 攻击。

入侵检测系统又称 IDS，有助于监控和检测进入 API 的网络流量。 如果它发现流量中有任何异常行为，就会记录下来并向有关部门发出警报。

一般来说，有两类系统：基于网络的系统和基于主机的系统。 在基于网络的系统中，系统分布在不同的检查点，以监控多个点的流量。 在基于主机的系统中，系统部署在单个主机上。

此类系统是一种很好的方法，可以在谁试图访问您的网络之前确定他们是否会妨碍您的数据。

IP 白名单是一种只允许选定 IP 地址访问 API 和网络的方法。 如果您有一个公共 API，这种技术可能不起作用，因为要列出每个 IP 太复杂了。

如果您知道只有部分系统应用程序会访问您的应用程序接口，那么这将是非常有益的。

JWT 通常用于向用户发送根据其凭据创建的数字签名令牌来验证用户身份。 这种方法之所以有效，是因为它隐藏了用户的实际凭据，而且无需在数据库或用户端存储凭据。

JWT 可分为三个部分：头部、有效载荷和签名。 有效载荷部分包含用户凭据，头部可包含所用算法等信息。 在每次后续请求中，服务器和客户端都会对签名部分进行数字签名。

JWT 通常有一个过期日期，过期后服务器会生成一个新的令牌，然后发送给用户。

监控应用程序接口的流量有助于事先检测和识别不受欢迎的访问者。 您可以监控每一个请求，但要确保日志不包含任何敏感信息。

如果应用程序接口没有实施速率限制，就很容易因意外涌入的网络流量而遭受 DDoS 攻击。 攻击者可以在短时间内向系统发出大量请求，最终导致服务器崩溃。

通过限制 API 流量，节流和限速 API 可避免拒绝服务攻击。

漏洞不仅出现在您的应用程序接口代码中，它们也可能是您在应用程序接口中使用的任何第三方依赖项的一部分。 因此，定期监控和扫描您的依赖项并检测其中可能存在的任何漏洞非常重要。

如果可以用修补漏洞的补丁版本更新依赖项，就可以执行计划任务，定期扫描和更新依赖项。 此外，还要选择更安全并提供频繁安全更新的依赖项。

安全标头应与 API 响应一起返回，以便向浏览器说明 API 的安全性以及应如何操作。 为提高安全性，您可以发送以下重要标头：

• 缓存控制： 将其设置为无存储，以避免在浏览器中存储敏感信息。
• 内容安全策略： 将其设置为 frame-ancestors “none”，可避免在 iframe 中设置 API 响应。
• 内容类型： 这个标头很重要，因为如果没有它，浏览器就会试图猜测 API 响应的类型，从而导致嗅探攻击。 对于 JSON 响应，可以将其设置为 application/json。
• X-Content-Type-Options： 将其设置为 nosniff，以指示浏览器不要猜测响应的 MIME 类型，而只在 Content-Type 标头中查找。

借助预定义的安全标准和框架设计您的应用程序接口，确保您的应用程序接口符合最新的安全考虑因素。

如果使用的是不记名令牌，那么令牌的过期时间应该很短，因为它需要重新认证用户，这是一件好事。 在 JWT 中，通常有两种令牌：访问令牌和刷新令牌。 刷新令牌的有效期较长，而访问令牌的有效期较短。 无论如何，你的令牌都应该有到期时间。

WAF 又称网络应用程序防火墙，是一个可以监控、过滤和阻止任何恶意网络流量的网关。 它通常是防止通过 HTTP 协议进行恶意攻击的最佳方法。

如果想轻松设置 API 安全性并管理 API 路由及其访问，可以选择 API 网关。 它们还提供监控、日志和分析工具，您可以使用这些工具监控您的 API。

零信任策略背后的理念是不信任任何集中式来源。

从根本上说，任何人都不可信，即使是开发应用程序接口的开发人员。 应该监控和分析每一个网关，以防止安全漏洞。

在这种情况下，自动化就派上用场了。 您可以使用自动化工具定期监控和阻止异常或可疑活动。

你可以尽最大努力来确保你的API安全。但软件中总会有一些漏洞可以被利用。这些漏洞会导致零日漏洞的出现。因此，为了保护你的API，你至少应该确保它们与最新的安全标准保持更新。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com