10월 12일, 2020
팝업은 사용자에게 문서를 추가적으로 보여주는 오랜된 방법 중 하나임
다음과 같이 사용한다. window.open('url')
저 명령어가 수행되면 새로운 창이 뜨게 된다. (요즘엔 새 탭으로 뜨게 된다)
요즘에는 팝업을 잘 사용하지 않고 있다.
그럼에도 불구하고 여전히 사용되고 있긴한데,
팝업은 자바스크립트 환경과 독립된 부분이니, 신뢰할 수 없는 사이트를 열 때 안전하다.
팝업은 url도 바꿀 수 있고, opener window에게 메세지를 전달 할 수 있음
팝업창을 불러올 때, 대부분의 브라우저가 팝업을 차단해버린다.
왜? 막 광고팝업으로 다닥다닥 붙여있는 사이트 때문에ㅋㅋ 사용자한테 팝업을 차단해준다.
그런데 이를 방지할 수 있는 방법이 있다.
onclick 이벤트를 통해서 팝업을 띄우는 것이다.
button.onclick = () => {
window.open('https://blog.kwonmory.com');
}
이 방법이 좀 더 사용자로부터 원치않는 팝업으로부터 보호하는 방법이다.
그리고 브라우저 마다 차이가 좀 있다는 사실
음..간단하게만 다루자. 뭐가 있다는 정도로
window.opne(url, name, params)
url은 주소, name은 window의 이름정도로 생각하면 되는데 지정해줄 수 있다.
params에서는 팝업이 띄어지는 위치랑 크기, 메뉴바, 툴바, 사이즈변경여부, 스크롤변경여부 등을 설정할 수 있다.
팝업을 열게되면 새 창에 대한 참조를 반환하게 된다.
이를 통해 속성을 조작하거나 위치를 변경할 수 있는 작업이 가능하다.
// 출처 코어 자바스크립트 사이트
let newWin = window.open("about:blank", "hello", "width=200,height=200");
newWin.document.write("Hello, world!");
그리고 팝업을 열고나서 바로 속성에 접근하게 되면 속성이 없을 수가 있다.
그래서 onload()를 이용하여 로드가 된다음에 접근해야된다.
window.opener
를 통해서 접근이 가능하다.
// 출처 코어 자바스크립트 사이트
let newWin = window.open("about:blank", "hello", "width=200,height=200");
newWin.document.write(
"<script>window.opener.document.body.innerHTML = 'Test'<\/script>"
);
win.close()
를 통해 닫을 수 있고 win.closed
를 통해 닫혀있는지 체크도 가능하다.
당장 알 필요는 없지만 이런거 정도 있다만 알고 있으면 좋을 것 같다.
이는 브라우저가 남용을 방지하기 위해서 차단하고 있는 메서드다.
그래서 팝업 창에서 안정적으로 사용할 수 있다.
그리고 자바스크립트는 창을 최대화, 축소화는 하지 못한다고 함
elem.scrollIntoView(top = true)
간단하게 창에 초점을 가게 하거나, 초점을 피하게 하거나 할 수 있다.
재미있는게 있는데
window.onblur = () => window.focus();
이겈ㅋㅋㅋㅋ 못나가게 하는 코드네ㅋㅋㅋ
모바일 브라우저에서는 무시한다고 한다.
protocol하고 도메인하고 포트가 같은 주소를 Origin이라고 한다.
팝업이라던지, iframe을 통할 경우 same origin을 신경 써야한다.
fetch와 같은 요청도 마찬가지
origin이 같지 않을 경우, 해당 창의 내용(변수, 문서 등)에 엑세스 할 수 없다.
그외 부분은 따로 필요할 때 봐야겠다.
클릭하는 요소를 악의적인 곳으로 이동되게 바꾸는 공격? 이라고 보면 되겠다.
내가 클릭하려고 하는 요소 위에 다른 곳으로 이동시키는 요소를 둔다.
클릭하면 악의적인 곳으로 이동하게끔 만들어지도록 하는 것이다.
서버 사이드 헤더부분에 X-Frame-Options
을 통해 프레임 내부에 페이지 표시를 허용하거나 금지할 수 있게 해줌
meta태그에 http-equiv=“X-Frame-OPtions”… 부분은 무시된다.
DENY
SAMEORIGIN
ALOOW_FROM domain
iframe을 이용하는 경우가 얼마나 될까 ㅇㅅㅇ.. 이용할 때 자세히 보자.
전체적으로 우선선위가 떨어지는 부분들이 많았던 것 같다.
이를 경우 다 보는게 아니라 필요할 때 찾아보는게 효과적이라 생각한다.
그래서 어떤 것이 있는지만 살펴보는 시간을 가졌다.