javaScript权威指南：跨站脚本Location和history窗口或帧的一些操作

Posted 2021-04-30 前端JavaScript

跨站脚本，或者叫做XSS，这个术语用来表示一类安全问题，也就是攻击者向目标Web站点注入html标记或者脚本。

通常，防XSS攻击的方式是，在使用任何不可信的数据来创建动态的文档内容之前，从其中移除HTML标记。可以通过添加如下的一行代码来移除<script>标记两边的尖括号，从而来修复前面给出的greet.html文件。

name = name.replace(/</g,"<").replace(/>/g,">")

跨站脚本使得一个有害的弱点能够立足于Web的架构之中。

恶意代码可以使用Window.setInterval()命令这样的技术来避免被关闭。类似的攻击会通过分配很多内存来占用系统。

>>>>>>>>>>>>>>>>>>>>>>>>>>>

用户脚本是一种创新，其中用户定义的脚本在被浏览器提交之前用于HTML文档。

SVG是一种基于XML的图形格式，它允许嵌入的javascript调用。

XUL是一种基于XML的语法，用来描述用户界面。

ActionScript是一种类似JavaScript的语言，它用于Flash电影中。

>>>>>>>>>>>>>>>>>>>>>>>>>>>

计时器

任何编程环境的一项重要的功能就是规划代码在未来的某个时刻执行。核心JavaScript语言并没有提供这样的功能，但是客户端JavaScript确实以全局函数setTimeout()、clearTimeout()、setInterval()和clearInterval()的形式提供了这一功能。

Location和History对象。

这两个对象提供了当前显示的文档的URL的访问，并且允许载入新的文档或者让浏览器后退到一个之前浏览过的文档。

窗口location属性引用的是Location对象，它代表该窗口中当前显示的文档的URL。Location对象的href属性是一个字符串，它包含URL的完整文本。Location对象的toString()方法返回href属性的值，因此，可以使用location代替location.href。

可移植地查询窗口几何属性：

var Geometry = ();

if(window.screenLeft){

Geometry.getWindowX = function(){ return window.screenLeft;}

Geometry.getWindowY = function(){

return window.screenTop;}

}

else if(window.screenX){

Geometry.getWindowX = function(){

return window.screenX;}

Geometry.getWindowY = function(){

return window.screenY;}

}

if(window.innerWidth){

Geometry.getViewportWidth = function(){

return window.innerWidth;}

Geometry.getViewportHeight = function(){

return window.innerHeight;}

Geometry.getHorizontalScroll = function(){

return window.pageXOffset;}

Geometry.getVerticalScroll = function(){

return window.pageYOffset;}

}

// These functions are for IE6

else if(document.documentElement && document.documentElement.clientWidth){

Geometry.getViewportWidth = function(){

return document.documentElement.clientWidth;}

Geometry.getViewportHeight = function(){ return docment.documentElement.clientHeight;}

Geometry.getHorizontalScroll = function(){return document.documentElement.scrollLeft;}

Geometry.getVerticalScroll = function(){ return docment.docmentElement.scrollTop;}

}

else if(document.body.clientWidth){

//These are for IE4,IE5,IE6 without a DOCTYPE

Geometry.getViewportWidth = function(){

return document.body.clientWidth;}

Geometry.getViewportHeight = function(){ return docment.body.clientHeight;}

Geometry.getHorizontalScroll = function(){return document.body.scrollLeft;}

Geometry.getVerticalScroll = function(){ return docment.body.scrollTop;}

}

if(document.documentElement && document.documentElement.scrollWidth){

Geometry.getDocumentWidth = function(){

return document.documentElement.scrollHeight;}

Geometry.getDocumentHeight = function(){

return document.documentElement.scrollHeight;}

}

else if(document.body.scrollWidth){

Geometry.getDocumentWidth = function(){

return document.body.scrollHeight;}

Geometry.getDocumentHeight = function(){

return document.body.scrollHeight;}

}

Navigator对象有五个属性用于提供正在运行的浏览器版本信息：

appName

Web浏览器的简单名称。在IE中，就是“Microsoft Inernet Explorer”。在源自Netscape代码基础的Firefox和其他的浏览器中，这一属性是“Netscape”

appVersion

浏览器的版本号和其他版本信息。注意，这应该被视为“内部”版本号，因为它不总是与显示给用户的版本号一致。

userAgent

浏览器在它的USER-AGENT HTTP头部中发送的字符串。这个属性通常包含appName和appVersion中的所有信息，并且，常常也可能包含其他的细节。

appCodeName

浏览器的代码名。Netscape用代码名“mozilla”作为这一属性的值。为了兼容，IE也采用这种方式。（一般浏览器的信息中都是以mozilla开头？原因是NN<Netscape Navigator的官方简称>很长一段时间保持着web标准绝对垄断的市场占有率，故而“Mozilla”成为了几乎所有浏览器向Web服务器发送的标识验证字符串，最先采用这一办法的是微软公司，其IE验证字符串为Mozilla/<Mozilla版本号>(compatible；MSIE< MSIE版本号>[注1]）

platform

运行浏览器的硬件平台。

例：

var browser = "BROWSER INFORMATION:\n";

for(var propname in navigator){

browser += propname + ": " + navigator[propname] + "\n"

}

alert(browser);

window.open();

这个方法有四个可选参数，返回的是代表打开的窗口的Window对象。

open()的第一个参数是要在新窗口中显示的文档的URL。如果这个参数被省略了，那么新打开的窗口将是空的。

open()的第二个参数是新打开的窗口的名字。这个名字可以作为<a>标记或<form>标记的target属性的值。

open()的第三个参数是特性列表，这些特性声明了窗口的大小和它的GUI装饰。如果省略了这个参数，那么新窗口就会用一个默认的大小，而且具有一套标准的特性，即菜单栏、状态栏、工具栏等。如果指定了这个参数，就可以明确地规定新窗口的大小和要具有的特性。

var w = window.open("smallwin.html","smallwin","width=400,height=350,status=yes,resizable=yes");

在指定第三个参数时，所有没有明确声明的特性都会被省略。

open()的第四个参数只在第二个参数命名的是一个存在的窗口时才有用。它是一个布尔值，声明了由第一个参数指定的URL是应该替换掉的窗口浏览历史的当前项（true），还是应该在窗口浏览历史中创建一个新的项（false），后者是默认的设置。

open()的返回值是代表创新的窗口Window对象。所以在自己的JavaScript代码中使用这个Window对象来引用新创建的窗口，就像使用隐式的Window对象window来引用运行代码的窗口一样。

window.close();方法关闭窗口，

即使一个窗口关闭了，代表它的Window对象仍然存在。但除了检测它的closed属性外，就不应该在使用它的其他属性或方法了。如果窗口被关闭，则属性为true。记住，用户是可以在任何时候任何地点关闭窗口的，因此要避免出错，就要定期的检测要使用的窗口是否仍然是打开的，这是一个不错的建议。

Window对象定义了移动窗口和重新设置窗口大小的方法。使用这些方法通常被认为是很糟糕的方式:用户应该对自己的桌面上的所有窗口的大小和位置具有唯一的控制权。

方法moveTo()可以将窗口的左上角移动到指定的坐标。同样，方法moveBy()可以将窗口上移、下移或者左移、右移指定数量的像素。方法resizeTo()和resizeBy()可以按照相对数量和绝对数量调整窗口的大小。

方法focus()和blur()提供了对窗口的高级控制。调用focus()会请求系统将键盘焦点赋予窗口，调用blur()则会放弃键盘焦点。此外，方法focus()还会把窗口移到堆栈顺序的顶部，是窗口可见。

Window对象还具有一些在窗口或帧中滚动文档的方法。scrollBy()会将窗口中显示的文档向左、向右或者向上、向下滚动指定数量的像素。scrollTo()会将文档滚动到一个绝对位置。

在现代浏览器中，文档的HTML元素有offsetLeft和offsetTop属性来指定元素的X坐标和Y坐标。一旦已经确定了元素的位置，可以使用scrollTo()来滚动一个窗口，以使任何指定元素位于窗口的左上角位置。

滚动的另外一种方法是调用文档元素的focus()方法，它可以接收键盘焦点。作为把焦点传递到元素的过程的一部分，滚动文档以使元素变得可见。

大多数现代浏览器支持另一种有用的滚动方法，这就是在任意的HTML元素上调用scrollIntoView()方法使该元素可见。scrollIntoView()可以在任何HTML元素上工作，而且不仅仅是那种接收键盘焦点的元素。

可以滚动一个在脚本控制下的窗口的最后一种方法就是，在所有想要滚动的文档的地方使用<a name="">标记来定义锚。然后Location对象的hash属性来使用这些锚名。

window.location.hash = '#top';

这种技术利用了HTML的能力，通过使用指定的锚来在文档中导航。

脚本所产生的指定的锚可能会打乱了用户的浏览历史，这在某些情况下可能被当作麻烦。使用Location.replace()来替代：

window.location.replac('#top');

window方法示例：

<script>

var hounce = {

x:0,y:0,w:200,h:200,

dx:5,dy:5;

interval:100,

win:null,

timer:null,

}

start:function(){

bounce.x = (screen.width = bounce.w)/2;

bounce.y = (screen.height - bounce.h)/2;

bounce.win = window.open('javascript:"<h1>BOUNCE!</h1>"',"",

"left=" + bounce.w + ",height=" + bounce.h+",status=yes");

bounce.timer = setInterval(bounce.nextFrame,bounce .interval);

}

stop:function(){

clearInterval(bounce.timer);

if(!bounce.win.closed) bounce.win.close();

}

nextFrame:function(){

if(bounce.win.closed){

clearInterval(bounce.timer);

return;

}

if((bounce.x+bounce.dx > (screen.availWidth - bounce.w)) || (bounce.x + bounce.dx < 0)){

bounce.dy = -bounce.dy;

}

bounce.x += bounce.dx;

bounce.y += bounce.dy;

bounce.win.moveTo(bounce.x,bounce.y);

bounce.win.defaultStatus = "("+ bounce.x +","+ bounce.y +")";

}

</script>

<button onclick="bounce.start()">Start</button>

<button onclick="bounce.stop()">Stop</button>

简单的对话框

alert()向用户显示一条消息并等待用户关闭对话框。

confirm()要求用户点击一个OK或Cancel按钮来确认或取消操作。

prompt()请求用户输入一个字符串。

当一个JavaScript错误发生时，传递给错误处理程序的参数有三个。第一个是描述错误的消息，它可以是“missing operator in expression”（表达式中缺少运算符）、“self is read-only”（只读的）或“myname is not defined”（还没有定义名称）。第二个参数是一个字符串，它存放引发错误的JavaScript代码所在的文档的URL。第三个参数是文档中发生错误大的行代码。错误处理程序可以利用这三个参数做任何事情。

任何窗口或帧中的JavaScript代码都可以将自己的窗口和帧引用为window或self。既然每个窗口和帧都是自己的代码的一个全局对象，只有当需要引用这个全局对象本身的时候，才有必要使用window或self。

每个窗口都有frames属性。这个属性引用一个window对象的数组，其中每个元素代表的是这个窗口中包含的帧。

每个窗口还含有一个parent属性，它引用包含这个窗口的Window对象。parent.frames[1];如果一个窗口时顶级窗口，而不是帧，那么parent属性引用的就是这个窗口本身：parent ＝＝ self;

如果一个帧包含在另一个帧中，而后者又包含在顶级窗口中，那么该帧就可以使用parent.parent来引用顶级窗口。top属性是一个通用的快捷方式，无论一个帧被嵌套了几层，它的top属性引用的都是包含它的顶级窗口。

帧通常是由<frameset>和<frame>标记创建的。但在HTML4中，<iframe>标记也可以用来在文档中创建“内联帧”。

给窗口或者帧指定名字的一个重要原因是那个名字可以用作标记<a>或<form>的属性target的值。这样就可以高速浏览器把激活链接或者提交表单的结果显示在哪里。

例如：

<a href="chapter01.html" target="mainwin">Chapter 1, Introduction</a>

当用户点击这个超链接时，浏览器将把指定的URL所指的文档装载进来，但不是在具有该链接的窗口中显示这个URL，而是在名为mainwin的窗口中将它显示出来。如果没有名为mainwin的窗口，那么点击这个链接就会创建一个名为mainwin的新窗口，并且将指定的URL装载进去。

很重要的窗口脚本化技术：

1、用location.href查询当前的URL并且通过设置location属性来载入新的文档

2、使用History对象的back()和forward()方法

3、使用SetTimeout()延迟函数的调用

4、使用window.open()打开一个新的浏览器窗口

5、在一个帧中使用Javascript和另一个帧交互

6、处理同源策略所施加的限制

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

例：一个导航栏

<frameset row="*,75">

<frame name="main">

<frame >

</frameset>

<script>

function back(){

document.navbar.url.value = "";

try{parent.main.history.back();}

catch(e){alert("Same-origin policy blocks History.back(): " +e.message);}

setTimeout(updateURL,1000);

}

function forward(){

document.navbar.url.value = "";

try{parent.main.history.forward();}

catch(e){alert("Same-origin policy blocks History.forward():"+e.message);}

setTimeout(updateURL,1000);

}

function updateURL(){

try{document.navbar.url.value = parent.main.location.href;}

catch(e){document.navbar.url.value = "<Same-origin policy prevents URL access>";}

}

function fixup(url){

if(url.substring()0,7 != "http://"){url = "http://" + url;}

return url;

}

function go(){

parent.main.location = fixup(document.navbar.url.value);

}

function displayInNewWindow(){

window.open(fixup(document.navbar.url.value));

}

</script>

<form name="navbar" onsubmit="go(); return false;">

<input type="button" value="Back" onclick="back();" />

<input type="button" value="Forward" onclick="forward();" />

URL:<input type="text" name="url" size="50" />

<input type="button" value="Go" onclick="go();" />

<input type="button" value="Open New window" onclick="displayInNewWindow();" />

</form>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

[注1]：http://baike.haosou.com/doc/4255855-4458346.html

访问密码 246e