窥探 Script 标签 0x01 什么是 script 标签？

script 标签允许你包罗一些动态脚本或数据块到文档中，script 标签长短闭合的，你也可以将动态脚本或数据块当做 script 的文本节点。就是内联脚本。

一般我们最常用的就是写一些 JavaScript 脚本在 script 标签里，但是 script 也可以用来存储一些数据，好比当你设置 type="text/react" 的 script 时就可以在里面放 react 代码，但是游览器是不会执行它无法识另外 type 的，因此 script 还可以用来存放一些姑且 APP 数据。

<script src="http://www.mamicode.com/game-engine.js"></script> <script type="text/x-game-map"> ........U.........e o............A....e .....A.....AAA....e .A..AAA...AAAAA...e </script>

也可以通过 documents.scripts[0].text 获取到第一个脚本的内容，可以改削它，但是不会有任何感化。

0x02 src 属性

当你指定了 src 属性时，外部脚本的内容是不受的；同时你的 script 标签内必需是空的。如果没有指定 src，就称这段脚本是内联的，内联脚本受到脚本内容限制。

什么是脚本内容限制？

<script> alert(‘hello <script‘) // 报错, DOM 解析器会认为 <script 是一个 script 标签开头 alert(‘hello <!--‘) // 报错，DOM 解析器会认为 <!-- 是一个注释开头 if (1<script) { } // 报错，DOM 解析器会认为 <script 是一个 script 标签开头 if (x<!--y ) { } // 报错，DOM 节气息会认为 <!-- 是一个注释开头 alert(‘hello <\script‘) // 正常，添加了转义 alert(‘hello <\!--‘) // 正常，添加了转义 </script>

所以看得出来，如果你使用打包工具，，为了减少 CRP 而将脚本内联到文档里，代码要注意是否切合脚本内容限制；如果你还压缩了代码，更需要注意这一点。

0x03 defer 和 async 属性 <script defer=defer src="http://www.mamicode.com/xxx"></script> <!-- 这段脚本不会梗阻 DOM 解析，会并发的下载脚本，并在 DOM 解析完成之后才会执行 --> <script async src="http://www.mamicode.com/xxx"></script> <!-- 这段脚本不会梗阻 DOM 解析，会并发的下载脚本，并在脚本下载完成后暂停 DOM 解析，然后执行脚本 --> 0x04 type=module和 nomodule 属性

在 script 中，默认的 type="text/javascript"，还可以是 中的任意一种。如果 script 里写的是 JavaScript，保举省略 type 属性。不指定 defer 和 async 下的经典脚本的执行会梗阻 DOM 解析。

如果 type=module，则说明标签引用的是一个 ES 模块。

<script type="module"> import {addTextToBody} from ‘./utils.js‘; addTextToBody(‘Modules are pretty cool.‘); </script>

?

// utils.js export function addTextToBody(text) { const div = document.createElement(‘div‘); div.textContent = text; document.body.appendChild(div); }

仅仅撑持“裸导入”

// Supported: import {foo} from ‘https://jakearchibald.com/utils/bar.js‘; import {foo} from ‘/utils/bar.js‘; import {foo} from ‘./bar.js‘; import {foo} from ‘../bar.js‘; // Not supported: import {foo} from ‘bar.js‘; import {foo} from ‘utils/bar.js‘;

撑持 type=module 的游览器会自动忽略带有 nomodule 的 script 标签。便利你回退到不撑持 module 的老式的用户代办代理。

<script type="module" src="http://www.mamicode.com/module.js"></script> <script nomodule src="http://www.mamicode.com/fallback.js"></script>

而且 type=module 默认带有 defer

<!-- This script will execute after… --> <script type="module" src="http://www.mamicode.com/1.js"></script> <!-- …this script… --> <script src="http://www.mamicode.com/2.js"></script> <!-- …but before this script. --> <script defer src="http://www.mamicode.com/3.js"></script>

执行的挨次是 2.js，1.js，3.js

即等于内联的 module，依然具有 defer 属性。

<!-- This script will execute after… --> <script type="module"> addTextToBody("Inline module executed"); </script> <!-- …this script… --> <script src="http://www.mamicode.com/1.js"></script> <!-- …and this script… --> <script defer> addTextToBody("Inline script executed"); </script> <!-- …but before this script. --> <script defer src="http://www.mamicode.com/2.js"></script>

模块脚本只会执行一次

<!-- 1.js only executes once --> <script type="module" src="http://www.mamicode.com/1.js"></script> <script type="module" src="http://www.mamicode.com/1.js"></script> <script type="module"> import "./1.js"; </script> <!-- Whereas normal scripts execute multiple times --> <script src="http://www.mamicode.com/2.js"></script> <script src="http://www.mamicode.com/2.js"></script>

必需切合同源计谋

<!-- This will not execute, as it fails a CORS check --> <script type="module" src="http://www.mamicode.com/https:/….now.sh/no-cors"></script> <!-- This will not execute, as one of its imports fails a CORS check --> <script type="module"> import ‘https://….now.sh/no-cors‘; addTextToBody("This will not execute."); </script> <!-- This will execute as it passes CORS checks --> <script type="module" src="http://www.mamicode.com/https:/….now.sh/cors"></script>