OAuth X Frame Options 이슈 - nowol79/knowledge_base GitHub Wiki
Enterprise GitHub OAuth 초기 Authorize application 인증 페이지가 X-Frame-Options:deny 설정이 되어 있어 iframe 페이지에서 호출이 불가능 하다.
grafana를 github OAuth로 로긴하도록 하는 과정에서 grafana 페이지를 iframe안에서 호출해야 할 이슈가 있었다. 상단 메뉴바에 따라 하단 iframe이 바뀌는 구조였어서..
해결을 위해서 grafana 페이지 호출될 때 마다 상단에 static한 메뉴 마크업이 붙도록 apache에 substitute_module을 활용했습니다.
ex)httpd.conf 설정 예
<VirtualHost *>
ServerName example.com
ProxyRequests Off
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
ProxyPass / http://grafana.example.com/
<Location />
AddOutputFilterByType SUBSTITUTE text/html
Substitute "s|</head>|</head><iframe id=\"menu\" width=\"100%\" height=\"50\" frameborder=\"0\"></iframe><script type=\"text/javascript\" src=\"http://example.com/grafana.js\"></script>|ni"
</Location>
</VirtualHost>
var header_menu = '<link href="http://example.com/knit.css" rel="stylesheet">' +
'<script type="text/javascript">' +
'function goGrafana() { parent.location.href="http://grafana.example.com/"; }' +
'</script>' +
'<div id="header" class="navbar navbar-default navbar-fixed-top">' +
'<div class="navbar-header">' +
'<button type=button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">' +
'<span class="icon-bar"></span>' +
'<span class="icon-bar"></span>' +
'<span class="icon-bar"></span>' +
'</button>' +
'<a class="navbar-brand" href="#">Usain</a>' +
'</div>' +
'<div class="collapse navbar-collapse">' +
'<ul class="nav navbar-nav" id="navtabs">' +
'<li class="active"><a href="#" onclick="goGrafana();">RUM</a></li>' +
'<li><a href="#" onclick="">AAA</a></li>' +
'<li><a href=></a></li><li><a href=>BBB</a></li>' +
'<li><a href=>CCC</a></li>' +
'</ul>' +
'</div>' +
'</div>';
var iframe = document.getElementById('menu');
iframe.contentDocument.write(header_menu);
example.com으로 접근하는 요청에 대해서 </head>
태그 뒤에 항상 <iframe>
이 들어가고, grafana.js에서 header_menu 마크업을 iframe body에 넣고, 메뉴 클릭 시 parent에 location이 바뀌도록 했다.
초기 메뉴를 <div>
로 뺐었는데.. 메뉴에서 가지고 있는 knit.css 마크업이 하단 grafana페이지에도 영향을 줘서 전체 마크업이 충돌이 나는 경우가 있어서 iframe으로 분리시켜 버렸다.
github OAuth에서 response로 주는 X-Frame-Options 자체를 중간 proxy해서 제거할까도 생각했는데...
subfilter 사용할 때 Content-Encoding이 gzip 인 경우 압축이 되어 있어 특정 태그를 찾아 삽입하는 동작이 불가능합니다. 그래서 요청 시 Accept-Encoding 정보를 지우고 보내도록 설정해야 한다.
RequestHeader unset Accept-Encoding