In CSS call JS function and variable __ function

In CSS to call the JS program. This technology is in the network security, called the CSS Cross station.

We know that CSS can control the attributes of some HTML elements, such as background-image, and so on, and in the URL to add Javascript:alert () and so on similar code can be used to execute code.

The CSS code I used is as follows:

<style type= "Text/css" >
body{
height:200px;
Background:url (Javascript:alert ("test!"));
}

Inserting this code randomly into any page will execute the JS code.

Obviously this opens up for many of the CSS with the free editing function of many BSP (blog service provider) attack ideas, and the attack on the CSS is currently a small number of precautions.

From another point of view, the design system in the JS design can consider the use of CSS for inclusion and reference. This is a good one from the JS control css to the CSS control js a reaction.


And deep issue a view, specific to verify: wherever you can put the URL, you can try to put JavaScript, may be successful!

Keywords: CSS call javascript code CSS call JS code


Introduction to expression usage in CSS

Defined
IE5 and its later versions support the use of expression in CSS to associate CSS properties with Javas cript expressions, where CSS attributes can be intrinsic or custom attributes of an element. This means that the CSS property can be followed by a javas cript expression, and the value of the CSS property equals the result of the Javas cript expression calculation. You can refer directly to the properties and methods of an element itself in an expression, or you can use a different browser object. The expression is as if it were in a member function of this element.

Assigning values to intrinsic attributes of an element

For example, you can place the position of an element according to the size of the browser.

#myDiv {
position:absolute;
width:100px;
height:100px;
Left:expression (document.body.offsetwidth-110 + "px");
Top:expression (document.body.offsetheight-110 + "px");
background:red;
}

Assigning values to element custom attributes

For example, eliminate the link dashed box on the page. The usual practice is to:

<a href= "link1.htm" onfocus= "This.blur ()" >link1</a> <a href= "link2.htm" onfocus= "This.blur
()" >link2</a>

Coarse look may also reflect the use of expression advantage, but if your page has dozens of or even hundreds of links, at this time you will also mechanical ctrl+c,ctrl+v Mody, not to mention the two comparisons, which produces more redundant code.

The use of expression is as follows:

<style type= "Text/css" >
a {star:expression (Onfocus=this.blur)}
</style>
<a href= " Link1.htm ">link1</a>
<a href=" link2.htm ">link2</a>

Description: The inside of the star is its own arbitrary definition of attributes, you can follow their own preferences to define another, and then included in the expression () of the statement is a JS script, in the custom attribute and expression between do not forget to have a quotation mark, because the essence or CSS, So put it inside the style label, not s cript. OK, so it is easy to use a word to achieve the link in the Page dashed box elimination. But you should not be complacent, if the trigger effect is a CSS attribute changes, then the results will be different from your original intention. For example, if you want to change the color of a text box in a page by moving it out of the mouse, you might take it for granted that you should write

<style type= "Text/css" >
input 
{star:expression (onmouseover=this.style.backgroundcolor= "#FF0000";
Onmouseout=this.style.backgroundcolor= "#FFFFFF")}
</style>
<style type= "Text/css" >
Input {star:expression (onmouseover=this.style.backgroundcolor= "#FF0000";
Onmouseout=this.style.backgroundcolor= "#FFFFFF")}
</style>
<input type= "text" >
< Input type= "text" >
<input type= "text" >

But the result is a script error, the correct writing should be the definition of CSS style into the function, as follows:

<style type= "Text/css" >
input {star:expression (onmouseover=function ()
{this.style.backgroundcolor= "#FF0000"},
Onmouseout=function () {this.style.backgroundcolor= "#FFFFFF"})}
</style>
<input Type= "text" >
<input type= "text" >
<input type= "text" >

!!! Attention
Not very much, it is generally not recommended to use expression because expression is more demanding on browser resources. Can be used without, will cause performance problems.

There is a normal execution under IE and Firefox, but it can be a malfunction in chrome, for example:

First look at a paragraph of HTML code, in the following code, the picture width is unknown, we have in the CSS to limit the picture to 50px:

<div id= "Test" >

< /div>

such as in Firefox or higher version of IE can be written directly max-width. In the low version of IE, we might write the following code:

#test img{width:expression (This.width > 50?) ' 50px ': true); max-width:50px; }

However, the code above has a performance problem and performance is very poor. Why poor, you can look at the previous written: expression why poor performance.

To understand the problem of performance, I wrote the code as follows:

#test img{width:expression (this.width > function (ABC) {abc.style.width = ' 50px ';} (this): ' Auto '); max-width:50px;}

After writing, in IE and Firefox are normal.

However, in Chrome is different, all the CSS below this line can not load, such as the code below, the last line of CSS in Chrome is not executed;

#test img{padding:10px;}
#test img{width:expression (this.width > function (ABC) {abc.style.width = ' 50px ';} (this): ' Auto '); max-width:50px;} 
#test img{border:20px Solid #FFCC00}

In IE and Firefox, you can see that the picture has a yellow border, but it's not in chrome.

The problem with expression in chrome is to know that there's something to be avoided when writing code.
Expression things can not be used, but also with performance problems, in order to understand the performance problem is out of a chrome question.
To understand the solution to the problem of chrome, there are performance problems, do not know if there is no better way to compatibility between the two, it is not necessary to be outside with JS to run.

Later found to be the problem in the code, if written so there is no problem, less write a bracket:

(function (ABC) {abc.style.width = ' 50px ';}) (this)