스크립트 밀어넣기(Script Injection)란?
원하는 웹페이지에 스크립트 (여기서는 js)를 넣어 실행시키는 행위이다. 해킹 기법에도 이런 스크립트 주입공격 (SQL injection )이 있지만, 이와는 달리 합법적인 것이다.
구글 확장프로그램에서의 스크립트 밀어넣기는 chrome.tabs.exeuteScript()메소드로 사용된다.
이 스크립트 밀어넣기를 사용하려면 먼저 manifest permissions를 수정해주어야 한다.
manifest.json
"permissions" : [
"tabs",
"<all_urls>"
],그 다음 chrome.tabs.exeuteScript()를 사용한다.
chorme.tabs.executeScript(null,{
file: "fileName.js"
}, function(){
//콜백
})null을 첫번째 인자로 사용하면 현재 탭에 스크립트 밀어넣기가 작동한다. 다른 탭에 밀어넣고 싶다면 tab의 id를 인자로 사용해야 한다.
사용예제
스크립트 밀어넣기로 getSource.js를 현재 탭 웹페이지에서 실행시켜 popup.html로 body.innerText를 가져오는 예제를 만들어 보자.
popup.js
chrome.extension.onMessage.addListener(function(request, sender) {
if (request.action == "getSource") {
document.body.innerText = request.source;
}
});
function onWindowLoad() {
chrome.tabs.executeScript(null, {
file: "getSource.js"
}, function() {
console.log(Injection Success)
});
}
window.onload = onWindowLoad;
getSource.js
function get_source(document_body){
return document_body.innerText;
}
chrome.extension.sendMessage({
action: "getSource",
source: get_source(document.body)
});처음 popup창이 열어지는 것 부터 동작이 실행된다. window.onload로 페이지가 로드되면 onwindowLoad함수가 실행된다.여기서 chrome.tabs.executeScript로 getsource.js를 현재탭에 스크립트 인잭션을 해준다. 이 메소드의 첫번쨰 인자로 받는 것은 탭의 id인데 null로 하면 현재 탭이 선택된다.
그 다음 현재 탭에 inject된 getsource를 보면 sendMessage가 호출되면서 get_sourc함수가 호출되고 지정한 문서의 body.innerText를 리턴값으로 받고 source키의 값으로 지정하여 메시지를 보낸다.
그럼 아까전에 popup.js에서 onMessage.addListner 메소드가 request를 받아 getsource메시지를 확인하고 popup.html에 받은 데이터를 띄우게 된다.
