前端两个重点:性能优化、安全

前端中有哪些可以优化的呢?
主要分为以下几类:

加载优化:

减少HTTP请求、缓存资源、压缩代码、无阻塞、首屏加载、按需加载、预加载、压缩图像、减少Cookies、避免重定向、异步加载第三方资源。

执行优化:

CSS写在头部、JS写在尾部并异步、避免img、iframe等的src为空、避免重置图像大小、图像尽量避免使用DataURL。

渲染优化:

设置viewport、减少DOM节点、优化动画、优化高频事件、GPU加速。

样式优化:

避免在HTML中书写style、避免CSS表达式、移除CSS空规则、正确使用display、不滥用float。

脚本优化:

减少重绘和回流、缓存DOM选择与计算、缓存length的值、尽量使用事件代理、使用id选择器、touch事件优化。

安全

前端常见安全问题的7个方面:

  1. iframe
  2. opener
  3. CSRF(跨站请求伪造)
  4. XSS(跨站脚本攻击)
  5. ClickJacking(点击劫持)
  6. HSTS(HTTP严格传输安全)
  7. CND劫持

1、iframe

a.如何让自己的网站不被其他网站的 iframe 引用?

// 检测当前网站是否被第三方iframe引用
// 若相等证明没有被第三方引用,若不等证明被第三方引用。当发现被引用时强制跳转百度。
if(top.location != self.location){
    top.location.href = 'http://www.baidu.com'
}

如何禁用,被使用的 iframe 对当前网站某些操作?

sandbox是html5的新属性,主要是提高iframe安全系数。iframe因安全问题而臭名昭著,这主要是因为iframe常被用于嵌入到第三方中,然后执行某些恶意操作。
现在有一场景:我的网站需要 iframe 引用某网站,但是不想被该网站操作DOM、不想加载某些js(广告、弹框等)、当前窗口被强行跳转链接等,我们可以设置 sandbox 属性。如使用多项用空格分隔。

  • allow-same-origin:允许被视为同源,即可操作父级DOM或cookie等
  • allow-top-navigation:允许当前iframe的引用网页通过url跳转链接或加载
  • allow-forms:允许表单提交
  • allow-scripts:允许执行脚本文件
  • allow-popups:允许浏览器打开新窗口进行跳转
  • “”:设置为空时上面所有允许全部禁止

2、opener

如果在项目中需要 打开新标签 进行跳转一般会有两种方式

// 1) HTML -> <a target='_blank' href='http://www.baidu.com'>
// 2)  JS  -> window.open('http://www.baidu.com')
 /* 
 * 这两种方式看起来没有问题,但是存在漏洞。
 * 通过这两种方式打开的页面可以使用 window.opener 来访问源页面的 window 对象。
     window.opener.location.replace('https://www.baidu.com') 
  * 即使在跨域状态下 opener 仍可以调用 location.replace 方法。
 */

使用 rel 属性 解决:

<a target="_blank" href="" rel="noopener noreferrer nofollow">a标签跳转url</a>

<!-- 
  通过 rel 属性进行控制:
  noopener:会将 window.opener 置空,从而源标签页不会进行跳转(存在浏览器兼容问题)
  noreferrer:兼容老浏览器/火狐。禁用HTTP头部Referer属性(后端方式)。
  nofollow:SEO权重优化,详情见 https://blog.csdn.net/qq_33981438/article/details/80909881
 -->

使用 window.open():

<button onclick='openurl("http://www.baidu.com")'>click跳转</button>

function openurl(url) {
    var newTab = window.open();
    newTab.opener = null;
    newTab.location = url;
}
有问题反馈加微信:mue233 私聊送一本电子书,绝对受益良多! 微信公众号:慕意,分享创业、使用的软件和教程~
知识星球精选推荐 » 前端两个重点:性能优化、安全