You wanna be a software engineer at Google?
Sorry, this is not the part of our discussion today 😁
<script>tag have both
srcand content both?
Well the answer is Yes!! But the rendering is browser specific.
Many of the modern browsers don't run content at all when the script tag has
src. If the injection is unsuccessful the browser will log the error as
net::ERR_ABORTED 404 (Not Found) and if it is successful it will execute the
According to html.spec.whatwg.org
For the Content model of
- If there is no src attribute, depends on the value of the type attribute, but must match script content restrictions.
- If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.
Many programmers tend to put the content inside
script and then use DOM methods to get the content as string and then eval it. But this is not a good idea and hence must not be used.
HTML5 Draft specification suggests that
<script> elements with
src attribute must only include commented out code which gives the documentation of the script.
Again, there's a catch here as well. The following script will produce
<script src="main.js"> var example = 'Consider this string: <!-- <script>'; console.log(example); </script>
The reason for the error is that browser does not find the closing tag for the
<script> tag as
</script> is considered to be the closing tag for
<script> on line:2
What is going on here is that for legacy reasons, "<!--" and
<script>strings in script elements in HTML need to be balanced in order for the parser to consider closing the block.
To avoid such issues we can escape the
<script> string as
<\script> and thus our problems would be solved.
<script>tag can have both src and content where content shall only include the commented out code that provides the documentation about the src used.
- While using
<script>as string always use escape sequence to avoid unnecessary problems.
<script>string must be escaped as
That's all for today! Hope you enjoyed the article and gained some
insights on the topic.
Or, Did I made you more confused? 😄