Popus and window methods

팝업은 사용자에게 문서를 추가적으로 보여주는 오랜된 방법 중 하나임

다음과 같이 사용한다. window.open('url')

저 명령어가 수행되면 새로운 창이 뜨게 된다. (요즘엔 새 탭으로 뜨게 된다)

요즘에는 팝업을 잘 사용하지 않고 있다.

• fetch와 같이 다이나믹하게 콘텐츠를 불러올 수 있음
• div와 같은 요소들을 다이나믹하게 보여줄 수 있음
• 모바일에서는 까다로움

그럼에도 불구하고 여전히 사용되고 있긴한데,

• 팝업은 자바스크립트 환경과 독립된 부분이니, 신뢰할 수 없는 사이트를 열 때 안전하다.

  • 이게 무슨 말이냐.. 자바스크립트 환경이 독립적이기 때문에 팝업창의 내용을 자바스크립트로 변경할 수 없다 정도로 해석된다.
• 쉬운 방법

• 팝업은 url도 바꿀 수 있고, opener window에게 메세지를 전달 할 수 있음

  • 여기서 operner window는 팝업을 여는 윈도우를 말함

Popup blocking

팝업창을 불러올 때, 대부분의 브라우저가 팝업을 차단해버린다.

왜? 막 광고팝업으로 다닥다닥 붙여있는 사이트 때문에ㅋㅋ 사용자한테 팝업을 차단해준다.

그런데 이를 방지할 수 있는 방법이 있다.

onclick 이벤트를 통해서 팝업을 띄우는 것이다.

button.onclick = () => {
    window.open('https://blog.kwonmory.com');
}

이 방법이 좀 더 사용자로부터 원치않는 팝업으로부터 보호하는 방법이다.

그리고 브라우저 마다 차이가 좀 있다는 사실

window.open

음..간단하게만 다루자. 뭐가 있다는 정도로

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를 통해 닫혀있는지 체크도 가능하다.

팝업 리사이즈

당장 알 필요는 없지만 이런거 정도 있다만 알고 있으면 좋을 것 같다.

• moveBy(x,y)
• moveTo(x,y)
• resizeBy(width, height)
• resizeTo(width, height)

이는 브라우저가 남용을 방지하기 위해서 차단하고 있는 메서드다.

그래서 팝업 창에서 안정적으로 사용할 수 있다.

그리고 자바스크립트는 창을 최대화, 축소화는 하지 못한다고 함

팝업 스크롤

• scrollBy(x,y)
• scrollTo(x,y)

• elem.scrollIntoView(top = true)

  • 스크롤을 맨 처음으로 할 것인지 결정하는 것, false면 맨 밑에서부터 시작

팝업 포커스, 블러

간단하게 창에 초점을 가게 하거나, 초점을 피하게 하거나 할 수 있다.

재미있는게 있는데

window.onblur = () => window.focus();

이겈ㅋㅋㅋㅋ 못나가게 하는 코드네ㅋㅋㅋ

모바일 브라우저에서는 무시한다고 한다.

Cross-window communication

Same Origin

protocol하고 도메인하고 포트가 같은 주소를 Origin이라고 한다.

팝업이라던지, iframe을 통할 경우 same origin을 신경 써야한다.

fetch와 같은 요청도 마찬가지

origin이 같지 않을 경우, 해당 창의 내용(변수, 문서 등)에 엑세스 할 수 없다.

그외 부분은 따로 필요할 때 봐야겠다.

The clickjacking attack

클릭하는 요소를 악의적인 곳으로 이동되게 바꾸는 공격? 이라고 보면 되겠다.

내가 클릭하려고 하는 요소 위에 다른 곳으로 이동시키는 요소를 둔다.

클릭하면 악의적인 곳으로 이동하게끔 만들어지도록 하는 것이다.

X-Frame-Options

서버 사이드 헤더부분에 X-Frame-Options을 통해 프레임 내부에 페이지 표시를 허용하거나 금지할 수 있게 해줌

meta태그에 http-equiv=“X-Frame-OPtions”… 부분은 무시된다.

• DENY

  • 프레임 페이지 출력 안함

• SAMEORIGIN

  • Same Origin일 경우에만 출력

• ALOOW_FROM domain

  • 허락된 도메인일 경우 출력

iframe을 이용하는 경우가 얼마나 될까 ㅇㅅㅇ.. 이용할 때 자세히 보자.

마무리

전체적으로 우선선위가 떨어지는 부분들이 많았던 것 같다.

이를 경우 다 보는게 아니라 필요할 때 찾아보는게 효과적이라 생각한다.

그래서 어떤 것이 있는지만 살펴보는 시간을 가졌다.