HTML / EJS 페이지에 외부 스크립트가 첨부되어 있습니다. 스크립트는 'createElement'및 'setAttribute'명령을 사용하여 페이지에 이미지를 채 웁니다. 또한 생성 된 이미지 중 하나가 '클릭'될 때 기능을 실행하기 위해 'onclick'속성을 생성합니다. 외부 '.js'파일의 코드는 다음과 유사합니다.
addEventListener("load", initialize);
const vitals = document.querySelector('#passed');
const _convert = vitals.dataset.pix.split(",");
//convert the passed ('dataset') string into an array...
function initialize() {
...
//**ADD THE PHOTO...
_item = document.createElement("img");
_item.setAttribute("id", "pix_" + _str);
_item.setAttribute("src", "/gallery/photo/" + _convert[_count]);
_item.setAttribute("onclick", "reRouter(this);");
_item.setAttribute("alt", "picture of " + _str);
_item.setAttribute("width", '100%');
document.getElementById("group_" + _tally).appendChild(_item);
...
}
function reRouter(_sent) {
//do stuff based upon the 'clicked' image...
//the Content Security Policy error is thrown ONLY upon a click of an image created in the 'initialize' function above...WHY?
}
'초기화'기능이 제대로 실행되는 것 같으며 원하는대로 표시된 폴더의 이미지로 페이지가 채워집니다. 그러나 이러한 이미지 중 하나에서 '마우스 클릭'을 수행하면 다음과 같은 콘텐츠 보안 정책 위반이 발생합니다.
"다음 콘텐츠 보안 정책 지시문을 위반하여 인라인 이벤트 핸들러 실행 거부 :"script-src-attr 'none' ". 'unsafe-inline'키워드, 해시 ( 'sha256 -...') 또는 인라인 실행을 사용하려면 nonce ( 'nonce -...')가 필요합니다. "
마우스를 클릭하면 왜 그런 오류가 발생합니까? '초기화'기능이 정상적으로 실행되고 오류가 발생하지 않는 것은 이상합니다. 이미지에서 마우스를 '클릭'할 때만 발생합니다. 어떤 조언이라도 대단히 감사합니다.
외부 스크립트는 CSP에 나열한 소스에서 가져온 것일 수 있습니다. onclick 코드는 'unsafe-inline'을 지정하지 않는 한 차단되는 사실상 인라인 자바 스크립트입니다. Chrome이 해시를 제안하더라도 이벤트 핸들러에 대해 onclick으로 허용하지 않습니다. CSP 레벨 3 (아직 널리 지원되지 않음)에서는 'unsafe-hashes'로이 작업을 수행 할 수 있습니다 : https://content-security-policy.com/script-src/
해결책은 onclick 이벤트를 처리하기 위해 외부 스크립트에 이벤트 리스너를 추가하는 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다