前端两个重点：性能优化、安全
前端中有哪些可以优化的呢？
主要分为以下几类：
加载优化：
减少HTTP请求、缓存资源、压缩代码、无阻塞、首屏加载、按需加载、预加载、压缩图像、减少Cookies、避免重定向、异步加载第三方资源。
执行优化：
CSS写在头部、JS写在尾部并异步、避免img、iframe等的src为空、避免重置图像大小、图像尽量避免使用DataURL。
渲染优化：
设置viewport、减少DOM节点、优化动画、优化高频事件、GPU加速。
样式优化：
避免在HTML中书写style、避免CSS表达式、移除CSS空规则、正确使用display、不滥用float。
脚本优化：
减少重绘和回流、缓存DOM选择与计算、缓存length的值、尽量使用事件代理、使用id选择器、touch事件优化。
安全
前端常见安全问题的7个方面：
- iframe
- opener
- CSRF（跨站请求伪造）
- XSS（跨站脚本攻击）
- ClickJacking（点击劫持）
- HSTS（HTTP严格传输安全）
- 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;
}
