Broad Network

HTML Resource Insecurities and Prevention

HTML Insecurities and Prevention – Part 1

Foreword: In this part of the series I talk about HTML vulnerabilities and prevention.

By: Chrysanthus Date Published: 1 Jan 2001


This is part 1 of my series, HTML Insecurities and Prevention. In this part of the series I talk about HTML vulnerabilities and prevention.

At the bottom of this page, you have links to the different series you should have read before coming here. This series explains HTML insecurities or leaks and how to prevent and limit the threats.


A resource is a file at the server. Any HTML element that has a src attribute would bring (download) a resource to the web page. In this series I talk mainly about the HTML document, script element, style sheet of link element, image element, video element, and iframe element resources. Do not forget that the main HTML document at the client, that downloads other resources is also a resource.

The origin is a source (website) whose URI (URL) begins with scheme, followed by a host, and then a port, as in . The scheme here is http. The domain is and the port is 80. In this URL, the file accessed by the browser is index.html. When the file is index.html, it may not be written at the URL. So you can have the URL, , which would be typed at the address bar of the browser as . Here, index.html would be a kind of home page with its subdirectories and database different from .

These two URLs have the same origin. behaves as an origin, but it is not a unique origin (it is not officially an origin). is a unique origin.

The following two resources have the same origin:

When the port is not typed, it is assumed to be port 80. The following two resources have the same origin, if cpanel is port 8080 :

The following two resources have the same origin:

The first one is for the HTML document, index.html (home page) and the second one is for the HTML document, products.htm.

The origin can also be an identifier (code) generated by the browser, if the URI is not in conformity with the tuple (three components): scheme://host:port .

Same Origin and Cross Origin
Two resources are of the same origin if they have the same source origin (same identifier or same scheme, host, and port). If the origins are not the same, then the resources are said to be of cross origin.

A web page displayed at the user’s computer can have resources from more than one origin. The fear is that one resource can access and corrupt another resource. A resource can read the value (e.g. password or email address) of an element of another resource. A resource can modify the element of another resource. A resource can delete the element of another resource. A resource can navigate another resource (reach a hyperlink of the other resource and activate it – effectively clicking it).

In this series, I will talk mainly about threats between a cross origin resource and the main HTML document (and vice versa). I will not talk about threats between one cross origin resource and another cross origin resource in the same HTML document. I will also talk about threats from an iframe in one of the next parts of the series.

For a resource (e.g. an audio element) to be hostile, it needs to come to the client’s computer with script embedded (in it). The script would work with DOM. The user does not see the script or any indication of the embedded script.

Note: The script element itself, whose src attribute has the URL of a cross origin, can be hostile.

A style sheet from a cross origin is not too dangerous, in the sense that it would only modify the presentation of elements of the HTML document. However, you should still take precaution with it (see below).

Some rear scripts can be dangerous to the extent that they would access data from the client’s computer or the client’s local network. However, I will not go into the details of such scripts in this series.

Note that content (such as technology description for a new product) may be meant for the user (client) and note for a cross origin resource. Such content might look ordinary, but must be prevented from being read by any cross origin resource.


Solving the Problem
Normally, the browser forbids resource from one origin to access resource from cross (another) origin; meaning a resource would only access resource from same origin, while the web page is displayed at the client’s computer. The browser allows by default, resources from the same origin to access one another, because it is assumed the resources were placed in the website server by the same person or company (who placed resources that are safe).

It is now up to the author (programmer of website) to permit resource from cross origin to access the main HTML document. Preventing a potentially hostile resource from causing harm to the HTML document is not as difficult as it might seem; you just need to know how to use the crossorigin attribute. I will talk about the prevention from iframe insecurities in a different part of this series.

Elements with href or src Attribute
The following elements have the href or scr attribute: link, img, audio, video, script. The href or src attribute downloads a resource. href is used only for the link element. The rest of the elements use src. These five elements have the crossorigin attribute. The explanation is the same for all of them. I will use the audio element for illustration.

If the web page (HTML document) and all the resources are of the same origin, then you do not need the crossorigin attribute. So the following code in the page is fine:

<audio src="mysound.ogg" autoplay>

Here, it is assumed that the HTML document and the audio file were created or provided by the same person (company), in the same site (and so the resources are safe).

Normally, a resource from cross origin, cannot access the HTML document (or another cross origin resource). If you, the author of the web page, trust the resource from the cross origin, and you do not mind if the resource would behave freely (in the page), then you will have to use the following crossorigin attribute and value:

<audio src="mysound.ogg" autoplay crossorigin=anonymous>

So the crossorigin attribute is an enumerated attribute with the possible values: anonymous and use-credentials.

Use-credentials means: cookies, HTTP authentication, and client-side SSL certificates that would be sent from the cross origin site to the browser and HTML document, based on the client's previous interactions with the cross origin. If the credentials are not correct, then the cross origin resource is not displayed; otherwise it is displayed.

Using the value, use-credentials, leads to more security than the value, anonymous. With use-credentials, the cross origin resource identifies itself; also some precautions have been taken to make the resource safe. With anonymous, you only know the URL of the recourse (which may change ownership or be corrupted as it travels through the Internet to reach the client).

That is it for this part of the series. We stop here and continue in the next part.


Related Links

Basics of HTML 5
Basics of ECMAScript
CSS Basics
Text Elements in HTML
Grouping Content
Microsyntax Dates and Times in HTML
Sectioning Content
Common Idioms without Dedicated Elements
HTML Embedded Content
HTML Insecurities and Prevention
Presentation Mathematical Markup Language
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course



Become the Writer's Fan
Send the Writer a Message