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

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

加载优化：

减少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;
}