인라인 JS 실행 방지

Question

웹 페이지에서 외부 HTML을 WYSIWYG 편집기로로드하는 상황이 있습니다. 외부 HTML은 신뢰할 수있는 출처에서 왔으며 여러 페이지의 두 특정 <div> 태그 사이에있는 내용을 포함합니다.

제 문제는 일부 페이지에 인라인 자바 스크립트 이벤트 핸들러가 있다는 것입니다. WYSIWYG 편집기에서 작업 할 때 특정 이벤트가이 js를 실행하게합니다.

대부분 콘솔의 내용이 ... is not defined 인 오류로 채우는 것 외에는 아무 것도하지 않으며 이것이 모두 문제가되지는 않습니다. 그러나 여전히 지저분하고 어색하게 될 수있는 alert(...)과 같은 것을 실행할 수있는 어딘가의 페이지가 없는지 나는 알지 못합니다. 코드는 모두 신뢰할 수 있지만 의도 한 컨텍스트에서 분리되면 바람직하지 않은 결과가 발생할 수 있습니다.

바람직하게는 인라인 스크립트를 수정하지 않고이 실행을 전역 적으로 차단하는 방법을 찾고 싶습니다. 나는 각 처리기에 =false;을 부착하는 것과 같은 작업을 할 수 있지만, 들어오는 요소를 모두 확인해야하며 정규 표현식을 사용하더라도 성능이 저하됩니다. 또한 편집 된 HTML을 서버에 다시 제출하기 전에 제거해야합니다.이 작업은 큰 고통처럼 보이며 완벽하게 수행하기가 어렵습니다.

이 온라인 코드가이 특정 컨텍스트 내에서 실행되는 것을 방지 할 수있는 방법이 있습니까?

Answer 1

나는 이것을 sitepoint forum에서 복사했는데, 당신과 비슷한 질문입니다. 이것은 div를 부모로부터 꺼내어 다시 가져 오는 접근법을 취합니다. 이 예제 코드는 당신이 여기에 원하는 경우 :

var div = document.getElementById('div'); 
var nextSibling = div.nextSibling; 
var parent = div.parentNode; 
parent.removeChild(div); 
function reCreateElement() { 
    if (nextSibling) { 
     parent.insertBefore(div, nextSibling); 
    } else { 
     parent.appendChild(div); 
    } 
} 
setTimeout(reCreateElement, 100); 

// Below is the stuff we don't want to run! 
document.getElementById('div').onclick = function() { 
alert('CLICKED!'); 
} 

Answer 2

당신이 지원하려고하는 브라우저에 따라 '콘텐츠 보안 정책'헤더를 체크 아웃 할 수 있습니다. 브라우저 지원에 대한 자세한 내용은 http://caniuse.com/contentsecuritypolicy을 확인하십시오.

브라우저가 목록에 있으면 CSP가 원하는 것을 정확하게 수행 할 수 있습니다. 기본적으로 이벤트 핸들러는 비활성화됩니다. 이벤트 처리기를 차단하는 것 외에도 페이지에 포함 된 모든 코드의 실행을 차단합니다. 따라서 html 페이지에있는 모든 js 코드를 별도의 js로 옮기고 그 파일 이름을 안전 목록에 지정하고 거기에서 js를로드해야합니다.

CSP는 Http 헤더로 설정되지만 새로운 사양으로 메타 태그를 사용하여 설정할 수도 있습니다. Checkout https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#html-meta-element--experimental.

과 같은 웹킷 지원 브라우저 (Chrome/Safari)의 경우 외부 소스의로드를 제한합니다. 수락 된 출처 목록을 목록에 추가하고 자신에게 적합한 것을 탐색 할 수 있습니다.

파이어 폭스의 경우 사양에 나와 있지만 메타 태그가 아직 지원되지 않는다고 생각합니다. https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy.

요약하면 웹 페이지를 호스팅하는 웹 서버의 헤더를 설정할 수 있고 (Chrome/Safari 지원 만 원한다면 제외) 대상 브라우저가 CSP를 지원하면 요약 할 수 있습니다 .