Breaking free from JavaScript[/CSS] within <script>[/<style>] tags: Discovering the flaws in the current system

Being primarily a server-side web developer, my exposure to JavaScript has been limited to externally referenced files and event handlers with minimal initialization functions between <script> tags.

Recently, I discovered that the data within <script> tags is not typically escaped and cannot be escaped without causing issues for the JavaScript parser in all browsers. This realization brought to light the challenge of using CDATA for in-HTML JavaScript blocks to pass validation in XHTML.

As someone who values encoding and escaping standards, I find this exemption from HTML escaping rules for <script> (unlike JS-event handlers such as onclick) puzzling. Why was this decision made? Was it a result of historical development or a deliberate choice?

The same inconsistency applies to CSS and the <style> tag. Is there a specific reason behind these exceptions, or has the rationale been lost over time?

javascripthtmlcssescaping

Answer №1

Using characters like & and < in scripts is a common need, but escaping them can be cumbersome.

However, tags like <script> and <style> do not allow for child elements, so there is no need to easily include a tag within them.

This is why HTML defines <script> and <style> as containing CDATA in the DTD, eliminating the need to manually handle it in the document and simplifying things.

In contrast, XHTML operates differently. With XML being simpler than SGML in many ways, its DTDs do not have the same feature. As a result, explicit CDATA markers (or entities) are necessary in XHTML. The confusion arises when people label their XHTML as HTML by serving it with a text/html content-type instead of application/xhtml+xml, causing complications.

When it comes to intrinsic event attributes, SGML does not provide a way to specify that special characters should not be treated as such. It is recommended to keep event attribute contents minimal, focusing on function calls, or better yet, avoiding them in favor of unobtrusive JavaScript.

Answer №2

One of the reasons CDATA is important in Javascript is because it involves characters that must be escaped in HTML. Do you agree?

Which do you find more logical?

if (5 &gt; 4 &amp;&amp; 2 &lt; 3) alert('dude');

Or

if (5 > 4 && 2 < 3) alert('dude');

In most cases, CSS and Javascript should be linked to separate files instead of being inline in HTML to avoid any escaping issues altogether.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Convert a comma-delimited string containing a numerical value into a floating point number, for example, 3.00

I need to extract a number from a value that is returned with commas around it. My goal is to convert this value into a number so that I can compare it against another number in my code later on. However, I'm facing difficulties in reliably extracting ...

javascriptnode.jsjsonstringfloating-point

Vue.js - computed property not rendering in repeated list

It seems like the issue lies in the timing rather than being related to asynchronous operations. I'm currently iterating through an object and displaying a list of items. One of the values requires calculation using a method. While the direct values ...

javascriptvue.jsvuejs2vue-componentv-for

Is there a way to automatically load a page?

Is there a way to automatically load another page without clicking on a link? I have a website with PayPal options available, and I want to know if there is a way to load the PayPal code without the need for a click. Can anyone help with this issue? < ...

phpjqueryhtmlpaypal

Using the "i" parameter in a Lodash for loop results in undefined, however, it functions properly with specific values set

My goal is to use Lodash to search for specific integer values in an object and then store some of those values in an array. The integers are variable and come from a separate array, but I am consistently getting undefined as the result. If I manually inp ...

javascriptnode.jsobjectlodash

What is the best way to connect a CSS file with multiple pages located within a specific folder in HTML/CSS?

In my CS 205 class project, I am tasked with creating a website. To accomplish this, I used Notepad++ for the HTML files and Notepad for the CSS files. The site consists of an index.html page along with other content pages, each designed separately in Note ...

csshtml

What is the best way to send props to a component that is exported using a Store Provider?

I'm trying to export my react component along with the redux store Provider. In order to achieve this, I've wrapped the component with an exportWithState callback. However, I'm facing an issue where I can't seem to access the props that ...

javascriptreactjsreact-props

PHP is unable to decode JSON that has been converted from JavaScript

When I send an array as a POST request, I first convert it to JSON using the JSON.stringify() method. However, I encountered an issue when trying to decode it in PHP. // JavaScript var arr1 = ['a', 'b', 'c', 'd', & ...

javascriptphparraysjson

Trigger an alert message upon loading the HTML page with search text

I need to search for specific text on a webpage and receive an alert if the text is found. <script type='text/javascript'> window.onload = function() { if ((document.documentElement.textContent || document.documentElement.innerText ...

javascriptjqueryhtml

Arranging Html Bootstrap Columns in a vertical stacking layout instead of being displayed next

Hey there, I've been encountering an issue where my columns are stacking on top of each other instead of being positioned side by side. Take a look at this screenshot of my page: The content above the shopping cart should ideally be aligned to the rig ...

htmlcssangularbootstrap-4

Guide to receiving dynamic argument variables in jQuery using $.get

I am currently working on developing an Ajax function call. In this function, the argument q will be dynamically defined, and the $.get method will return either true or false based on the data received from the Ajax call. <a href="any.php" class ...

javascriptjqueryajax

Steps to enable the submit button in angular

Here's the code snippet: SampleComponent.html <nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue" (ngModelChange)="onChangeStatus($event)"> <label nz-radio nzValue="passed">Passed</label> <label nz-rad ...

javascriptangulartypescript

Using an Ajax call within an event handler function

After spending a full day attempting to execute an AJAX call within an event handler function, I've tried various combinations of when(), then(), and done(), as well as setting async: false. However, I keep encountering undefined errors despite my eff ...

javascriptjqueryajax

show the most up-to-date data in the array upon selecting a particular element

I'm working on a project with an array of objects representing different pets. Each pet card should display specific information about the pet when clicked, but I'm struggling to make only the relevant information show up. How can I achieve this ...

javascriptarraysdomarraylist

Dimensions of Bootstrap carousel

I am attempting to create a Bootstrap carousel with full-width images (width: 100%) and a fixed height. However, when I set the width to 100%, the height automatically takes on the same value. I am unsure if the issue lies within my files. <div id="m ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issue with Javascript function not triggering on Django dropdown selection change event

I have a question. I have a JS function that I downloaded from the internet and is being used in a Django project. In my template.html file, I have a <select class="select_filter" onchange="myFunc(this.value);"></select>. Ad ...

javascriptjquerydjango

Manipulating Vue.js data within HREF attributes using PHP

Does anyone know how to successfully pass the data from Vue into PHP? I've attempted a few methods, but when I try to use the resulting link in the href attribute (href = $ where $ name), it shows a strange string instead of the expected URL from the ...

javascriptphphtmlvue.js

Accessing S3 bucket contents in Angular using Observables

Looking for guidance on structuring a service method in Angular4 to create an s3.listObjects call and return the contents of an S3 bucket as an Observable. Here is my current attempt, unfortunately not yielding successful results: public retrieveFilesFro ...

javascriptangularamazon-web-servicesamazon-s3rxjs

What is the preferred method for initiating a call from a JSP to a servlet using an href link?

Currently, I am successfully using href to call a servlet URL. However, I would like to add parameters and receive a response from this request. Is it possible to achieve this? I attempted an AJAX call but encountered a CORS issue when trying to call an ex ...

javascriptjavaajaxjspservlets

In JS/JSON, a new line of data is generated every hour

Recently, I have been experimenting with DiscordJS and exploring its logging functionality. I am aware that the method I am using is outdated and may not be the most secure for actively changing data, but I am intrigued. let count = JSON.parse(fs.readFile ...

javascriptnode.jsjsondiscord.js

Is it possible to use the LINK method/verb with AngularJS $http?

Can the $http method in AngularJS be used to send ajax requests using the LINK/UNLINK method? I have checked the AngularJS documentation and only found a list of available methods: $http.get $http.head $http.post $http.put $http.delete $http.jsonp $http. ...

javascriptajaxangularjshttphttp-method