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
⚠️ **GitHub.com Fallback** ⚠️