你不知道的HTML
[TOC]
利用image测试网速 , 上报数据
对于img标签 , 它的资源是可以跨域的 , 通过src特有的属性 , 但是img标签有一个属性 , crossorigin="anonymous" , 这个属性是告诉后端 , 我需要去跨域 , 如果后端不让我们跨域 , 这张图片就协商不成了
例如下面img标签的 src 为 test.png
<img crossorigin="anonymous" src="test.png" />
<!--这里的图片路径我们由不同的服务器返回 , 根据不同的图片大小 , 以及时间差 , 就可以计算出网速 -->
<script>
var s = Date.now();
var image = new Image();
image.src = 'http://ip地址/test.png' // 假设我们已知这张图片大小为4
image.onload = function (){
var e = Date.now();
var w = 4 / (e - s) * 1000 // 这样就可以算出多少k/s了
}
</script>
第二点 : 做上报数据 --- 上报数据类似于埋点功能 , 系统性能监控平台 , 系统的bug监控 , 打点
具体实现 , 用户在对该页面进行点击 , 离开等一些操作后 , 会自动发送一个特别小的图片过去给服务端 , 服务端会根据传输过去的图片token进行分析,
分析点1 : 为什么不用ajax走网络请求 , 正常来说 , 如果走ajax意味着, 就要设计一个接口 , 以及对应的数据库 , 一般来说 , 这种设计接口是没有必要的 , 只需要用户端主动传输就可以
如果想要js做统计的话是需要 , 以下代码做统计
navigator.sendBeacon("abc.php", analyticsData) // 发送成功返回true , 假设数据大小被限制或者请求不成功 , 返回false
什么是navigator.sendBeacon
- navigator.sendBeacon , 是一个可以将少量数据发送给服务器的web原生api
- 规范定义了一个接口，Web开发人员可以使用该接口来调度异步和无阻塞的数据传递，以最大程度地减少与其他时间紧迫的操作之间的资源争用，同时确保仍处理此类请求并将其传递到目的服务器
- Web应用程序通常需要发出请求，以将事件，状态更新和分析报告给一台或多台服务器。这样的请求通常不需要在客户端上进行响应处理（例如，结果为204或200个HTTP响应代码带有空的响应body），并且不应与其他高优先级操作（例如，获取关键资源，做出反应）抢夺网络资源并计算资源输入，运行动画等。但是，此类单向请求也负责传递关键的应用程序和测量数据，从而迫使开发人员使用昂贵的方法来确保其传递 , 即它不会抢夺优先级高的请求 , 但浏览器又会尽可能保证其发送成功
navigator.sendBeacon 浏览器支持
- 以下数据由http://caniuse.com , 提供
- Chrome 37+
- Firefox (Gecko) 31+
- Internet Explorer 不支持
- Opera 24+
- Safari 不支持
- 安卓浏览器支持
CSS远程攻击漏洞
css的远程攻击, 一般都是利用css都url属性 , 例如: background
<style>
.test{
background: url(js脚本) /*通过这样攻击站点 , 例如一些挖矿注入脚本*/
}
</style>
说个题外话 , 跨域的问题 , 可以使用js压缩进图片 , 解决跨域 jstopng的问题
iframe远程localStorage扩容
本域名的iframe的一个值可以通过postMessage , 可以向另外一个域 , 发信息 , 那个域接到信息 , 可以把信息送回来
注意点 : 什么是postMessage
解释 : window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件。传递给 window.postMessage() 的参数（比如 message ）将通过消息事件对象暴露给接收消息的窗口。
说回iframe在不用二级域中 , 只要设置父级域名相同 , 子域名下都cookie是可以相互访问
html语义化都重要性
更好的seo , 让爬虫知道网站结构 , 利于爬虫标记 , 正确的标签做正确的事情 , 阅读方便
