IE(인터넷익스플로러) 고려 로직( js,css) 변경( feat. 폴리필,바벨)

엄청난 사태가 발생했다. 대기업 S에서 자사시스템으로 인터넷 익스플로러를 쓰는데 액티브x 때문에 걷어내지 못하고 여전히 인터넷익스플로러를 쓰고 있다고 한다. 예산 때문에 아직도 쓰고 있다고 한다. 여기에 iframe으로 연결한다.

그래서 인터넷 익스플로러 환경에서 해봐야 한다.

대충 검색해보면 폴리필 , 바벨 이야기를 한다. 이거를 문제는 node.js 기반이 아닌 스프링부트, JSP환경에서 해야 한다. 자 그러면 어떻게 해야 할까? 

바벨은 일단 제외해보고 jquery를 3.x인데 2.x를 만들었다. 그리고 css 와 js 공통을 IE모드일 경우 대비해 만들었다. 자 일단 공통이 생기니 나머지 스크립트는 화살표(=>), 백틱(`), 그리고 스코프 변수(const,let) 를 못쓴다.

화살표 다 function이나 for문으로 다 바꾸고, 백틱도 다 바꾸고 const,let은 var로 변경~!

뛰어난 인텔리제이 디버깅 기술과 AI의 도움으로 1달 예상한것이 2일 남짓 90% 윤곽이 나왔다.

사실 , 하루만에 할 것이었으나...

함정이 있었다~!

 

하루 가까이 고민한 것은 바로 세션...

다 고쳐도 안되는 이유는 same-site와 secure 속성이 안먹어서 쿠키가 날라간다.

이 생각을 전혀 못하고 있다가...

인텔리제이 디버그 모드로 인터셉터에서 세션이 사라지는 것을 찾아냈다.

(IE는 디버깅을 아래 거로 한다.)

%systemroot%\system32\f12\IEChooser.exe  )

 

결국 https를 사용하는 것으로 해결했다....

기존 크롬은 알아서 로컬은 예외로 해주는데...

 IE는 구려서 그런 배려(?)가 없었던 것을 몰랐다.

 

그래서 https로 secure속성 적용하고 same-site는 여전히 안되니 CSRF토큰을 하든 해야 한다.

마지막으로 IE의 iframe에서 쿠키전달을 위해 P3P헤더를 고려...

 P3P: CP="This is a P3P policy! See http://example.com/privacy"

postMessage를 사용할수도 있지만... 그건 일단 저쪽이랑 소통이 안되니 일단.. 냅둠..