[AngularJs] because the scheme does not have a registered handler.

오류

... because the scheme does not have a registered handler.

앵귤러 사용중에 a태그 클릭시 팝업이 뜨도록 소스 수정 중에 발견

<a href="javascript:test()" >신청하기</a>

해당 버튼을 아무리 눌러도 모든 브라우저에서 기능이 동작하지 않고 있었다.

 

 

원인

개발자 도구를 열어서 확인해 보니 아래와 같이 변환되어 있었다.

<a href="unsafe:javascript:test();">

AngularJS에서 href 속성에 함수를 넣으면 "unsafe:"라는 접두어가 붙는 이유를 알아보니 보안 상의 이유였다.

AngularJS는 사용자 입력과 관련된 보안 취약점을 방지하기 위해 몇 가지 보안 메커니즘을 가지고 있다. 그 중 하나는 사용자가 입력한 내용을 안전하게 처리하는 것인데. 예를 들어, 사용자가 입력한 콘텐츠가 HTML 코드를 포함하고 있을 때, AngularJS는 그 문자열을 안전하게 이스케이프(특수 문자를 변환하는 작업)하여 실행되지 않도록 한다.

따라서 AngularJS가 이 URL을 이스케이프하고, "unsafe:"라는 접두어를 붙여 표시함으로써 사용자가 입력한 함수가 악의적인 코드를 실행하는 등의 보안 위험을 방지할 수 있게된다.

브라우저는 "unsafe:" 접두어가 있는 URL을 신뢰하지 않기 때문에 해당 URL을 클릭했을 때 브라우저는 그 링크를 표시하지 않을 수 있다.

 

 

해결방법

1. href에 있는 동작 함수를 ng-click 으로 수정

2. 최상단 모듈 config 추가

app.config(function($compileProvider){
	$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|javascript):/);
});