Syntax to declare JS scripts - javascript

I'm not sure about what's the difference between opening a JS script with
<SCRIPT language='JavaScript'>
or with:
<SCRIPT type="text/JavaScript">
Should JavaScript always be quoted (either with " " or with ' ') or that's not really important?
Thank you for any clarification on this topic!

The language attribute was used in HTML 3.2. HTML 4.0 introduced type (which is consistent with other elements that refer to external media, such as <style>) and made it required. It also deprecated language.
Use type. Do not use language.
In HTML (and XHTML), there is no difference between attribute values delimited using single or double quotes (except that you can't use the character used to delimit the value inside the value without representing it with an entity).

Refer to supreme deity Douglas Crockford's Javascript Code Conventions for all things Javascript:
JavaScript Files
JavaScript programs should be stored
in and delivered as .js files.
JavaScript code should not be embedded
in HTML files unless the code is
specific to a single session. Code in
HTML adds significantly to pageweight
with no opportunity for mitigation by
caching and compression.
<script src=filename.js> tags should
be placed as late in the body as
possible. This reduces the effects of
delays imposed by script loading on
other page components. There is no
need to use the language or type
attributes. It is the server, not the
script tag, that determines the MIME
type.

Older browsers only support language - now the type method using a mimetype of text/javascript is the correct way.
<script language="javascript" type="text/javascript">
is used to support older browsers as well as using the correct way.
<style type="text/css">
is another example of including something (stylesheet) using the correct standard.

You don't need the type and language attribute when using to an external JavaScript file:
<script src="script.js" />
Your browser will automatically figure out what to do, based on the extension of the file. You need type="text/javascript" when doing script-blocks, though.
Edit:
Some might say that this is awful, but these are in fact the words of a Yahoo! JavaScript evangelist (I think it was Douglas Crockford) in the context of website load-performance.
Perhaps I should have elaborated a bit.
Google was a great example of breaking standards without breaking the rendering of their website. (They are now complying to W3C standards, using JavaScript to render their pages). Because of the heavy load on their websites, they decided to strip down their markup to the bare minimum, and use depreciated tags like the dreaded font and i tags.
It doesn't hurt to be pragmatic. Within reason, of course :)

According to the W3 HTML 4.01 reference, only type attribute is required. The langage attribute is not part of the reference, but I think it comes from earlier days, when Microsoft fought against Netscape.
Also, simple quotes are not valid in XHTML 1.0 (the parsing is more restrictive).
This may not be a problem but you should now that's always better to validate your html (either HTML 4.01 or XHTML 1.0).

Use both:
<script language="javascript" type="text/javascript">

You should always enclose attribute values in quotation marks ("). Don't use apostraphes (').
Edit: Made opinion sound like fact here, my bad. Single quotes are technically legal, but in my experience they tend to lead to more issues than double quotes (they tend to crop up in attribute values more often amongst other things) so I always recommend sticking to the latter. Your mileage may vary though!

Related

How to check if a string contains JavaScript code?

I'm doing a forum like web app. Users are allowed to submit rich html text to server such as p tag, div tag, etc. In order to keep the format, server will write these tags back to the users' browser directly(without html encoded). So, I must do a potential dangerous script check to avoid XSS. Any JavaScript code is supposed to be dangerous and not allowed. So, How to detect them or any other better solution?
dangerous example 1:
<script>alert('1')</script>
dangerous example 2:
<script src="..."></script>
dangerous example 3:
click me
Use an HTML Parser
Your requirements are straightforward:
You must disallow all <script> tags, but keep certain rich HTML tags.
You must be able to escape inline Javascript in links. i.e. stringify it or strip the unsafe attributes altogether.
The correct way to handle all of these is to employ a modern standards-compliant HTML parser that is able to syntactically analyse the structure of the rich HTML sent over, identifying the tags sent over and discovering the raw values in attributes. This is, in fact, how sanitisation, as one of the comments mentions, is done.
There are a number of pre-existing HTML parsers that are designed to target XSS-unsafe input. The npm library js-xss, for example, appears to be able to do exactly what you want:
Whitelisting only specific tags
Modify unsafe attributes to return a default value
You can even run this server-side as a command line utility.
Similar libraries already exist for most languages, and you should do a thorough search of your preferred language's package repository. Alternatively, you can launch a subprocess and collect your results directly from js-xss from the command line.
Avoid using regular expressions to parse HTML naively - while it is true most HTML parsers end up using regular expressions under the hood, they do so in a fairly limited fashion for strictly well-defined grammars after correctly lexing them.
Use this regex
<script([^'"]|"(\\.|[^"\\])*"|'(\\.|[^'\\])*')*?<\/script>
for detecting all types of <script> tag
but I suggest using a iframe in sandbox mode to show ALL html code, by doing that you prevent javascript code from being able to do anything bad.
http://www.w3schools.com/tags/att_iframe_sandbox.asp
I hope this helps!

Why does script-type have "text/" prepended to it?

Why does script-type have "text/" prepended to it?
For example:
<script type="text/javascript" />
<link type="text/css"/>
<script id="entry-template" type="text/x-handlebars-template">
Probably the standard javascript/vbscript/css are defined as
<MIME-media-type>/<MIME-sub-type>
What about Handlebars - why does it follow the same format? (and same with few other libs)
And if I wish to add a custom type for my open-source-lib (e.g: nirman)... should it be written as:
<script type="nirman" />
/// OR
<script type="text/nirman" />
?
Thanks
Why does script-type have "text/" prepended to it?
It doesn't … text/javascript was obsoleted in favour of application/javascript.
What about Handlebars - why does it follow the same format?
… but your question seems to be more about why MIME types come in two parts. That is defined by the MIME specification to divide the MIME type into a general category (from a small selection on infrequently updated choices) and a specific type.
And if I wish to add a custom type for my open-source-lib (e.g: nirman)... should it be written as
Neither.
Firstly, if you are writing a scripting language, then you should use application, not text:
text -- textual information … subtypes are to be used for enriched text in forms where application software may enhance the appearance of the text, but such software must not be required in order to get the general idea of the content
application -- some other kind of data, … information to be processed by an application.
Secondly, since you are making this up and don't have a public standard for it, the subtype should be prefixed with X
A media type value beginning with the characters "X-" is a private
value, to be used by consenting systems by mutual agreement. Any
format without a rigorous and public definition must be named with an
"X-" prefix,
So you should use: application/x-nirman
Media type (MIME type) names generally consist of a major media type and a subtype, separated by a slash “/”. This is specified in RFC 2406.
The major type chosen for JavaScript is text, because JavaScript code is text. It can be directly read by human beings – who need to understand JavaScript of course, that’s why it is not plain text (text/plain). Later, various other media types have been proposed for JavaScript, for rather theoretical reasons, but text/javascript is what all browsers recognize.
Handlebars seems to use text/x-handlebars-template.
If you want to use, within a script element, code that is not JavaScript code but will be processed by JavaScript code that interprets it as data of some kind (possibly as program code in some language), then the safest bet is to use text/plain. Not because of logic, but because of a statement in HTML5 CR about scripting languages. It lists a few media type names that “must not be interpreted as scripting language”, and among the alternatives, text/plain is probably the least illogical.
The point here is to prevent browsers from executing the script element content as JavaScript (or as VBScript), so you need to specify a type attribute, with a value that will make the browser refrain from doing what browsers normally do with script elements. The browser will then just store the content in the DOM, for your JavaScript code to deal with.
Yes, this is illogical if your code is, in some sense, program code, and you are doing your best to tell browsers that it isn’t. But it’s not program code natively interpreted by the browser.
Using text/x-nirman or application/x-nirman would most probably work too. Or anything that does not look suspiciously like referring to JavaScript or VBScript.

Various script type attributes and vanilla js, what makes difference in user agents

I usually write script tag without type attribute. However I saw around several different types of script. So I have tested with different types and all looked the same to me except I put wrong type intentionally.
<script>alert(1)</script>
<script type="text/javascript">alert(2);</script>
<script type="text/ecmascript">alert(3);</script>
<script type="application/ecmascript">alert(4);</script>
<script type="application/javascript">alert(5);</script>
<script type="foo/javascript">alert(6);</script>
<script type="text/html">alert(7);</script>
<script type="application/x-javascript">alert(8);</script>
Questions:
If script given without type attribute, as I assume, does it uses browser default type?
It looks like text/* is used for browsers and application/* is used for mobile applications. Am I right about it?
In script type attribute, what makes difference between javascript and ecmascript?
I asked question about between vanilla js and pure js, but the question has been removed. So my guess is they are the same(too obvious maybe). Are the really same?, then why use different names(Javascript, Vanilla Javascript)? By using vanilla script as an external resource, can we do browser independent javascripting?
1. If script given without type attribute, as I assume, does it uses browser default type?
Yes. All browsers always assumed it to be the case and it has now been normalized in HTML5. According to the w3.org the type attribute defaults to "text/javascript".
Relevant extract from the spec :
The type attribute gives the language of the script or format of the
data. If the attribute is present, its value must be a valid MIME
type. The charset parameter must not be specified. The default, which
is used if the attribute is absent, is "text/javascript".
So the best way to put your script, for all browsers, is this :
<script>alert(1);</script>
2. It looks like text/* is used for browsers and application/* is used for mobile applications. Am I right about it?
If the script element is included in an HTML document then the value of the type attribute should be omitted or "text/javascript", even in a mobile application. There were various cases in the past where other types were suggested but now the standard is "text/javascript".
3.In script type attribute, what makes difference between javascript and ecmascript?
There is no difference. As you might know ECMAScript is the name of the normalized standard upon which is based JavaScript. Not only is "text/javascript" the standard way of referring to javascript in the script element but your browser has only one JS engine. It can't choose to try and select another one depending of a flavor you might specify in the type attribute.
4. I asked question about between vanilla js and pure js, but the question has been removed. So my guess is they are the same(too obvious maybe). Are the really same?, then why use different names(Javascript, Vanilla Javascript)? By using vanilla script as an external resource, can we do browser independent javascripting?
"Vanilla something", in English, refers to the basic flavor of something. In computing it commonly refers to a language without additions or plugins. Here it means JavaScript without additional libraries (for example jQuery). This expression is often meant as a way to reassert many things are possible without libraries even while people often think the library is needed. The vanilla-js site humorously supports this argument and that's one more reason you may have often read the "vanilla js" expression. So, of course, "vanilla js" is just JavaScript, that is "pure js".
Note that "vanilla js" isn't especially "browser independent" as many js libraries have as primary goal to provide an uniform layer hiding differences between browsers (most often features available in all browsers except IE).

Minimum characters to include JavaScript using HTML5 <script> tag

Now that the type attribute of the <script> tag can be omitted in HTML5, is this the fewest number of characters required to include external JavaScript on a page?
<script src="URL"></script>
Can anyone optimise it any more than this - what about if a framework such as jQuery was already loaded, is there an even shorter way?
You could omit the quotes for the attribute:
<script src=URL></script>
As well, with XHTML5 the following should work:
<script src="URL" />
If you don't care about the JavaScript being able to reach out and access page content, then
<img src="URL.svg">
where the URL points to an SVG image that uses SVG scripting would allow you to load a script and you could call functions defined in it by sending events to the SVG image to trigger event handlers.
You may be able to get around that restriction by using an SVG served from the same origin but I believe the security consequences of same-origin access for SVG are poorly understood so spec and browser writers are treading cautiously.
Since you asked about jQuery, you can use $.getScript():
$.getScript("f.js");
Of course this assumes your code has already been wrapped, or loaded in via in <script> tags. To be honest, there really isn't much benefit in trying to shave off a few more bytes in this area. It's not like referencing scripts requires a great deal of verbosity anyway.
Keep your code readable, and don't deviate too far from standards and accepted conventions.
[from my comments]
Supposing you already handled script aggregation using for example the excellent Google Closure Compiler and you don't want to use the heavy js loading libraries, a simple optimization is this :
<script src=a></script>
(no quote, no ".js", yes that's silly)
Of course, you can also remove spaces and CR before and after this part.

What is the difference in various ways of defining a script?

What is the difference in various ways of defining a script?
The ways I am talking about is this
<script>....</script>
<script language="javascript">.....</script>
<script type="text/javascript">...........</script>
Since, they all do same things, what is different?
According to w3c spec, type attribute is required, and determines script language, whereas language attribute (which does more or less the same) is deprecated in favor of type, so you should use type attribute.
<script language="javascript">
HTML 3.2 — The first attempt
<script type="text/javascript">
HTML 4.x and XHTML 1.x — using MIME types for everything. This is the current standard. Use this.
<script>
HTML 5 (draft) — "Ah, too many authors don't care, browsers error recover from it anyway, lets all but give up on the possibility other other embedded scripting languages being used"
In HTML 4.01 the type attribute is required. http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-type-SCRIPT
In practice though, all commonly used browsers default this to text/javascript, so there isn't really a need to specify it unless you care about validators or older versions of IE. The HTML5 spec makes it optional. http://www.whatwg.org/specs/web-apps/current-work/#attr-script-type

Categories