developit/*DOM Fun: executable script type attribute values.md

## *DOM Fun: executable script type attribute values.md

      
    Raw
  

              *DOM Fun: executable script type attribute values.md
            
          
    Welcome to the wacky world of almost 30 years of web

All of the following values for the <script type=" ••• "> will cause inline or external JavaScript to execute:


Value
Note


""
The default value of script.type (eg: no type attribute present)


"text/javascript"
The official JavaScript MIME type


"application/javascript"
Legacy MIME type from when semantics mattered


"text/x-javascript"
Legacy MIME type from before JavaScript was accepted as a valid MIME type


"application/x-javascript"
Same as above, but more pedantic about MIME semantics


"  text/javascript "
Arbitrary spaces are allowed, but only at the start/end (applies to all except "")


"text/ecmascript"
New legacy MIME type from before folks realized we wouldn't need a new one


"application/ecmascript"
Same as above, but 20y later still pedantic about semantics (consistency++)


"text/x-ecmascript"
Woah, maybe someone did realize we wouldn't need an ECMAScript MIME type?


"application/x-ecmascript"
Added by Gandalf


... and then of course "module", which is just "module".

  
## script-types-test-page.html
<!DOCTYPE html>
<script>
  function log() {
    const script = document.currentScript;
    console.log({ type: script.type, attribute: script.getAttribute('type'), script });
  }
</script>

<script type="x/y" src="data:,log()"></script>
<script type src="data:,log()"></script>
<script type="" src="data:,log()"></script>
<script type=" " src="data:,log()"></script>
<script type="\t" src="data:,log()"></script>
<script type="jscript" src="data:,log()"></script>
<script type="j" src="data:,log()"></script>
<script type="javascript" src="data:,log()"></script>
<script type="application/javascript" src="data:,log()"></script>
<script type="application/x-javascript" src="data:,log()"></script>
<script type="application/y-javascript" src="data:,log()"></script>
<script type="text/javascript" src="data:,log()"></script>
<script type="text/x-javascript" src="data:,log()"></script>
<script type="text/y-javascript" src="data:,log()"></script>
<script type="text/javascript+react" src="data:,log()"></script>
<script type="text/javascript;react" src="data:,log()"></script>
<script type="text/javascript;charset=utf8" src="data:,log()"></script>
<script type="text/javascript " src="data:,log()"></script>
<script type="  text/javascript " src="data:,log()"></script>
<script type="text/ javascript" src="data:,log()"></script>
<script type="/javascript" src="data:,log()"></script>
<script type="text/" src="data:,log()"></script>
<script type="text/ecmascript" src="data:,log()"></script>
<script type="application/ecmascript" src="data:,log()"></script>
<script type="application/ECMAScript" src="data:,log()"></script>
<script type="text/x-ecmascript" src="data:,log()"></script>
<script type="application/x-ecmascript" src="data:,log()"></script>
<script type="text/vbscript" src="data:,log()"></script>
Value	Note
`""`	The default value of `script.type` (eg: no `type` attribute present)
`"text/javascript"`	The official JavaScript MIME type
`"application/javascript"`	Legacy MIME type from when semantics mattered
`"text/x-javascript"`	Legacy MIME type from before JavaScript was accepted as a valid MIME type
`"application/x-javascript"`	Same as above, but more pedantic about MIME semantics
`" text/javascript "`	Arbitrary spaces are allowed, but only at the start/end (applies to all except "")
`"text/ecmascript"`	New legacy MIME type from before folks realized we wouldn't need a new one
`"application/ecmascript"`	Same as above, but 20y later still pedantic about semantics (consistency++)
`"text/x-ecmascript"`	Woah, maybe someone did realize we wouldn't need an ECMAScript MIME type?
`"application/x-ecmascript"`	Added by Gandalf
	<!DOCTYPE html>
	<script>
	function log() {
	const script = document.currentScript;
	console.log({ type: script.type, attribute: script.getAttribute('type'), script });
	}
	</script>

	<script type="x/y" src="data:,log()"></script>
	<script type src="data:,log()"></script>
	<script type="" src="data:,log()"></script>
	<script type=" " src="data:,log()"></script>
	<script type="\t" src="data:,log()"></script>
	<script type="jscript" src="data:,log()"></script>
	<script type="j" src="data:,log()"></script>
	<script type="javascript" src="data:,log()"></script>
	<script type="application/javascript" src="data:,log()"></script>
	<script type="application/x-javascript" src="data:,log()"></script>
	<script type="application/y-javascript" src="data:,log()"></script>
	<script type="text/javascript" src="data:,log()"></script>
	<script type="text/x-javascript" src="data:,log()"></script>
	<script type="text/y-javascript" src="data:,log()"></script>
	<script type="text/javascript+react" src="data:,log()"></script>
	<script type="text/javascript;react" src="data:,log()"></script>
	<script type="text/javascript;charset=utf8" src="data:,log()"></script>
	<script type="text/javascript " src="data:,log()"></script>
	<script type=" text/javascript " src="data:,log()"></script>
	<script type="text/ javascript" src="data:,log()"></script>
	<script type="/javascript" src="data:,log()"></script>
	<script type="text/" src="data:,log()"></script>
	<script type="text/ecmascript" src="data:,log()"></script>
	<script type="application/ecmascript" src="data:,log()"></script>
	<script type="application/ECMAScript" src="data:,log()"></script>
	<script type="text/x-ecmascript" src="data:,log()"></script>
	<script type="application/x-ecmascript" src="data:,log()"></script>
	<script type="text/vbscript" src="data:,log()"></script>