window.onerror()_javascript 스킬 활용 및 예시 분석

onerror 구문은

을 사용합니다.

onerror에는 기본적으로 세 가지 입력 매개변수가 있습니다.

•msg: 오류 메시지
•url: 오류가 있는 파일
•line: 오류가 있는 코드 줄, 정수
window.onerror = function(msg, url, line){ // 일부 코드 }; 76dc30a2218f22243eb63e771bb54ab1 형식의 경우 인수[0], 인수[1], 인수[2]를 차례로 거쳐 매개변수를 얻을 수 있습니다.

JS에서 가장 일반적으로 사용하는 것은 JS 내결함성

window.onerror=function(){return true;}

기본 기능
returnValue=true를 설정하거나 true를 직접 반환하여 브라우저에 오류 메시지가 표시되지 않도록 할 수 있습니다. 그러나 스크립트 디버거에 의해 디버깅 상자가 나타나는 것을 방지할 수는 없습니다. Onerror는 구문 오류가 아닌 런타임 오류에 의해서만 트리거됩니다.

Onerror는 다음 세 가지 방법으로 트리거될 수 있습니다.

• 잘못된 개체 참조 또는 보안 제한 등의 런타임 오류

• 사진 등 다운로드 오류
•IE9에서는 멀티미디어 데이터 획득 실패 시
가 발생합니다. 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그는 onerror를 지원하지 않습니다.

6c04bd5ca3fcae76e30b72ad730ca86d 태그에 정의된 onerror 속성은 window.onerror와 동일합니다(테스트되었으며 Firefox 및 Opera에서 지원되지만 IE9 및 Chrome에서는 응답하지 않음).

브라우저 호환성

QuirksMode에 나열된 각 브라우저에서 onError 지원

•Chrome 13+

•Firefox 6.1+
•Internet Explorer 5.5 이상
•사파리 5.1+
•Opera 11.61+(11.51에 대한 QuirksMode 테스트는 아직 지원되지 않습니다. 제가 보유하고 있는 11.61에서는 이미 지원합니다.)
window 객체 외에도 onerror를 지원하는 요소:

•a1f02c36ba31691bcfe87b2722de723b 전폭적인 지원

•6919634607f14bdbe1a4299125db9861 IE9/IE10/safari 5.1+/chrome 13+ 지원
3a674e06c111e35179a3a4f5628fe265 및 d5ba1642137c3f32f4f4493ae923989c은 오류 발생을 지원하지 않습니다.

문제 및 해결책

외부 js 파일 참조 오류의 경우

Webkit 및 Mozilla 브라우저는 원래 오류 정보를 변조하여 onerror에서 얻은 마지막 세 입력 매개변수를 얻습니다.

코드 복사 코드는 다음과 같습니다.

"스크립트 오류입니다.","", 0

例如http://a.com/index.html，引入了http://b.com/g.js，如果g.js出错，最终传递到window.onerror的信息会被篡改。

浏览器之所以做这样的处理，是考虑到两个特性：

•3f1c4e4b6b16bbbd69b2ee476dc4f83a 能执行非同源下的第三方js文件。
•3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素会忽略加载的文件的MIME类型，而当作脚本来执行。
在攻击场景中，恶意页面引入了正常页面的js文件，js文件会自动执行，若发生异常触发的报错信息，可能会泄漏某些敏感数据。这些信息最终会被恶意页面的window.onerror处理。

经测试，存在此特性的浏览器(当前最新版)有Firefox、Chrome、Safari、Opera。

Adam Barth(work on the security of the Chrome browser at Google)建议的解决方案是使用CORS (Cross-Origin Resource Sharing)。

简言之，当在页面中 3f1c4e4b6b16bbbd69b2ee476dc4f83a 引入外部js文件时，增加一个属性crossorigin（类似于a1f02c36ba31691bcfe87b2722de723b 的CROS属性）。服务器在接受到请求时，在HTTP Header里增加一个授权字段(值可以是具体的某个域名)：

Access-Control-Allow-Origin: *

浏览器检测到此js已经授权此页面所在域名，则不用再篡改由此js传递到window.onerror的错误信息了。

经测试，此方案尚未被浏览器实现。
已经在Chrome、Firefox的较新版本中支持。

其他参考资料

Internet Explorer http://msdn.microsoft.com/en-us/library/cc197053.aspx

Mozilla Firefox https://developer.mozilla.org/en/DOM/window.onerror

Opera http://dev.opera.com/articles/view/better-error-handling-with-window-onerror/

Wiki http://www.w3.org/wiki/DOM/window.onerror

syntax errors and runtime errors http://www.htmlgoodies.com/primers/jsp/article.php/3610081/Javascript-Basics-Part-11.htm

window.下面是一些实例大家可以参考下：

onerror = function(sMessage,sUrl,sLine){};

onerror函数的三个参数用于确定错误确切的信息，代表的意思依次为：错误信息；发生错误的文件；发生错误的行号。

示例：

<SCRIPT>
window.onerror=fnErrorTrap;
function fnErrorTrap(sMsg,sUrl,sLine){
oErrorLog.innerHTML="<b>An error was thrown and caught.</b><p>";
oErrorLog.innerHTML+="Error: " + sMsg + "<br>";
oErrorLog.innerHTML+="Line: " + sLine + "<br>";
oErrorLog.innerHTML+="URL: " + sUrl + "<br>";
return false;
}
function fnThrow(){
eval(oErrorCode.value);
}
</SCRIPT>
<INPUT TYPE="text" ID=oErrorCode VALUE="someObject.someProperty=true;">
<INPUT TYPE="button" VALUE="Throw Error" onclick="fnThrow()">
<P>
<DIV ID="oErrorLog">
</DIV>

上面示例的方法很值得借鉴。
在捕获js错误时，我们通常使用try{}catch(e){}的方式，然后通过e.errorMessage等方式获取错误信息然后报告错误。但对于onerror事件可能很少问津，我们是否思考过如何报告错误所在的行号？如果想过这个是否也被这个问题所困扰过，是否认为在js里不可能捕获错误的行号呢?其实本人就遇到上述的几个问题，今日读某人写的一段js代码顿然发现了onerror事件，要说onerror这个时间也是n久以前就知道了，但对于其所带有的三个参数和其特殊性质却一直没有去了解过。经过自己的研究测试，对onerror事件有了一些新的认识和了解。在页面没有错误时，window.onerror事件是不存在的，也就是null（废话！没出错如果onerror出现还正常吗？）我们一般通过函数名传递的方式（引用的方式）将要执行的操作函数传递给onerror事件，如window.onerror=reportError;window.onerror=function(){alert('error')}，但我们可能不知道该事件触发时还带有三个默认的参数，他们分别是错误信息，错误页面的url和错误行号。要知道这个可是事件，就如onclick和onmouseover等事件一样，但它是有参数。我们可以这样测试。

<script type="text/javascript">  
  window.onerror=testError;  
  function testError(){  
  arglen=arguments.length;  
  var errorMsg="参数个数："+arglen+"个";  
  for(var i=0;i<arglen;i++){  
  errorMsg+="/n参数"+(i+1)+"："+arguments[i];  
}  
  alert(errorMsg);  
  window.onerror=null;  
  return true;  
}  
function test(){  
  error  
}  
test()  
</script> 

먼저 testError 메소드를 onerror 이벤트에 바인딩한 다음 테스트 메소드에서 오류를 트리거합니다. IE에서 실행하면 다음 프롬프트가 나타납니다.
---------------------------- 마이크로소프트 인터넷 익스플로러 ----- - ------
매개변수 수: 3
매개변수 1: '오류' 정의되지 않음
매개변수 2: file://E:/yanwei/test/testError.html
매개변수 3: 14
--------------------------- 확신하는---------------------- -----
testError 함수는 오류가 발생할 때 세 가지 매개변수를 캡처하는 것을 확인할 수 있습니다. 함수를 onerror 이벤트에 바인딩하면 페이지가 실패할 때 위의 세 가지 매개변수를 캡처할 수 있습니다.
테스트 중에 다음과 같은 문제도 발견되었습니다.
1. 함수 끝에 return true를 추가하면 함수에 오류가 발생해도 시스템 오류 메시지(IE)가 팝업되지 않습니다.
2. 해당 페이지에 여러 개의 오류가 있는 경우 첫 번째 오류만 캡쳐하여 처리한 후 이후 프로그램의 실행을 종료합니다.
3. onerror 이벤트는 모든 오류를 캡처할 수 없습니다. 함수 외부 또는 함수 내부의 오류만 캡처할 수 있습니다(?? 이게 무슨 뜻인가요? 농담이 아닙니다). adasdf 미사용 오류를 캡처합니다. 정의된 오류 function test(){ aaaa; }는 aaaa 정의되지 않은 오류를 캡처할 수 있지만 function test(){} 또는 function test()dd{}의 오류는 캡처할 수 없으며 시스템 오류 메시지가 나타납니다. 곧장.
4. Onerror는 IE, FF 등의 브라우저에서도 동일한 방식으로 실행되며, 둘 다 이 세 가지 매개변수를 포함합니다.