浏览器的解码顺序(html解码、url解码以及js解码)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<a href="javascript:alert('<?php echo $_GET['input'];?>');">test</a>
</body>
</html>

代码如上,当参数input的值为:%26lt%5cu4e00%26gt的时候,点击test文本,弹窗内容为:<一>
想知道,从输入参数到弹窗的整个过程中浏览器是如何对%26lt%5cu4e00%26gt进行顺序解码的?

服务端收到请求,进入代码逻辑处理时

input的值,被URLDecode,变为&lt\u4e00&gt
浏览器从服务端获取的页面数据就已经变成了&lt\u4e00&gt
此时通过查看页面源码(注意不是页面右键点检查元素)可以看到

<a href="javascript:alert('&lt\u4e00&gt');">test</a>

浏览器在渲染的时候

作为URL的href字符串 javascript:alert('&lt\u4e00&gt'); 被HTMLEntity解码,变为

<a href="javascript:alert('<\u4e00>');">test</a>

这一步可以通过在页面上右键点击test链接,选择检查元素,可以看出实际渲染出的dom元素

点击test链接时

执行的其实是一句javascript代码,其中有一个字符串,'<\u4e00>',里面有一个转义字符\u4e00,对其进行逆转义,由前导符\u可知这是一个unicode编码的转义,将这6个字节的字符串'\u4e00'转化为一个实际上占3个字节空间的unicode字符'一',此时整个字符串占用的内存空间为

< >
3c e4 b8 80 3e

如果你直接在代码里写成 alert('<一>');,这个字符串的内部存储方式也是这样的

最终渲染alert框时

由系统将上字节码,翻译为可显示的对应编码的字符,渲染在屏幕上

  • 新萌遇到node报错,请前辈指点
  • js和jq那个比较重要。
  • js变量赋值的问题
  • IE表单上传问题
  • 为什么很少看到人用 __proto__ 直接来实现面向对象?
  • 如何设置nw.js中print的pdf_path?
  • sublime有对比插件吗?就是可以把两个文件放在一起对比差异的功能!我想死!
  • 这个网站老是能嵌入到我浏览的页面中?
  • 异步操作在火狐和chrome上的执行差异问题。
  • Vue中img标签src地址编译的问题?
  • 如何使用基于koa2的koa-jwt?