Update app.py

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template, request, jsonify, session
+from flask import Flask, render_template, request, jsonify, session, Response
 import requests
 from bs4 import BeautifulSoup
 import os
@@ -161,6 +161,49 @@ def scrape_all_like_status(token):
 def home():
     return render_template('index.html')
 
+@app.route('/proxy/<path:url>')
+def proxy(url):
+    try:
+        # URL 디코딩 및 프로토콜 추가 (필요한 경우)
+        if not url.startswith(('http://', 'https://')):
+            url = 'https://' + url
+            
+        # 요청 헤더 설정
+        headers = {
+            'User-Agent': request.headers.get('User-Agent', 'Mozilla/5.0'),
+            'Accept': 'text/html,application/xhtml+xml,application/xml',
+            'Accept-Language': 'ko,en-US;q=0.9,en;q=0.8',
+        }
+        
+        # 토큰이 있으면 추가
+        if 'token' in session:
+            headers['Authorization'] = f"Bearer {session['token']}"
+        
+        # 원격 사이트에 요청
+        response = requests.get(url, headers=headers, stream=True)
+        
+        # 원격 사이트의 응답 헤더를 가져옴
+        response_headers = dict(response.headers)
+        
+        # 프록시 응답에서 제외할 헤더
+        excluded_headers = ['content-encoding', 'content-length', 'transfer-encoding', 'connection', 
+                           'host', 'x-frame-options', 'content-security-policy']
+        
+        # 필요한 헤더만 유지
+        headers = [(name, value) for name, value in response_headers.items()
+                   if name.lower() not in excluded_headers]
+        
+        # X-Frame-Options 및 CSP 헤더 제거/변경
+        headers.append(('X-Frame-Options', 'ALLOWALL'))
+        headers.append(('Content-Security-Policy', "frame-ancestors 'self' *"))
+        
+        # 응답 생성 및 전송
+        return Response(response.iter_content(chunk_size=1024), headers=headers,
+                         status=response.status_code, content_type=response.headers.get('content-type'))
+    except Exception as e:
+        logger.error(f"프록시 오류: {str(e)}")
+        return jsonify({"error": "프록시 요청 처리 중 오류가 발생했습니다."}), 500
+
 @app.route('/api/login', methods=['POST'])
 def login():
     token = request.form.get('token', '')
@@ -751,19 +794,29 @@ if __name__ == '__main__':
   
   <script>
     // DOM 요소 참조
-    const elements = {
-      tokenInput: document.getElementById('tokenInput'),
-      loginButton: document.getElementById('loginButton'),
-      logoutButton: document.getElementById('logoutButton'),
-      refreshButton: document.getElementById('refreshButton'),
-      currentUser: document.getElementById('currentUser'),
-      gridContainer: document.getElementById('gridContainer'),
-      loadingIndicator: document.getElementById('loadingIndicator'),
-      statusMessage: document.getElementById('statusMessage'),
-      searchInput: document.getElementById('searchInput'),
-      loginSection: document.getElementById('loginSection'),
-      loggedInSection: document.getElementById('loggedInSection'),
-      likeStatus: document.getElementById('likeStatus'),
+// DOM 요소 참조
+const elements = {
+  tokenInput: document.getElementById('tokenInput'),
+  loginButton: document.getElementById('loginButton'),
+  logoutButton: document.getElementById('logoutButton'),
+  refreshButton: document.getElementById('refreshButton'),
+  currentUser: document.getElementById('currentUser'),
+  gridContainer: document.getElementById('gridContainer'),
+  loadingIndicator: document.getElementById('loadingIndicator'),
+  statusMessage: document.getElementById('statusMessage'),
+  searchInput: document.getElementById('searchInput'),
+  loginSection: document.getElementById('loginSection'),
+  loggedInSection: document.getElementById('loggedInSection'),
+  likeStatus: document.getElementById('likeStatus'),
+  totalUrlCount: document.getElementById('totalUrlCount'),
+  likedUrlCount: document.getElementById('likedUrlCount'),
+  allUrlsBtn: document.getElementById('allUrlsBtn'),
+  likedUrlsBtn: document.getElementById('likedUrlsBtn'),
+  embedToggle: document.getElementById('embedToggle')
+};
+
+
+likeStatus: document.getElementById('likeStatus'),
       totalUrlCount: document.getElementById('totalUrlCount'),
       likedUrlCount: document.getElementById('likedUrlCount'),
       allUrlsBtn: document.getElementById('allUrlsBtn'),
@@ -816,11 +869,7 @@ if __name__ == '__main__':
       elements.likedUrlCount.textContent = likedCount;
     }
     
-    // 세션 상태
-
-
-
-// 세션 상태 확인
+    // 세션 상태 확인
     async function checkSessionStatus() {
       try {
         const response = await fetch('/api/session-status');
@@ -1065,13 +1114,101 @@ if __name__ == '__main__':
           const iframeContainer = document.createElement('div');
           iframeContainer.className = 'iframe-container';
           
+          // 로딩 인디케이터
+          const loadingIndicator = document.createElement('div');
+          loadingIndicator.className = 'loading-indicator';
+          loadingIndicator.style.position = 'absolute';
+          loadingIndicator.style.top = '0';
+          loadingIndicator.style.left = '0';
+          loadingIndicator.style.width = '100%';
+          loadingIndicator.style.height = '100%';
+          loadingIndicator.style.backgroundColor = '#f8f9fa';
+          loadingIndicator.style.display = 'flex';
+          loadingIndicator.style.alignItems = 'center';
+          loadingIndicator.style.justifyContent = 'center';
+          loadingIndicator.style.flexDirection = 'column';
+          loadingIndicator.style.zIndex = '10';
+          
+          const spinner = document.createElement('div');
+          spinner.className = 'spinner';
+          spinner.style.width = '40px';
+          spinner.style.height = '40px';
+          spinner.style.border = '4px solid #f3f3f3';
+          spinner.style.borderTop = '4px solid #3498db';
+          spinner.style.borderRadius = '50%';
+          spinner.style.animation = 'spin 1s linear infinite';
+          
+          const loadingText = document.createElement('div');
+          loadingText.textContent = '콘텐츠 로딩 중...';
+          loadingText.style.marginTop = '10px';
+          
+          loadingIndicator.appendChild(spinner);
+          loadingIndicator.appendChild(loadingText);
+          
+          // 프록시를 통한 URL 인코딩
+          const originalUrl = item.url;
+          const proxyUrl = `/proxy/${encodeURIComponent(originalUrl.replace(/^https?:\/\//, ''))}`;
+          
+          // iframe 생성
           const iframe = document.createElement('iframe');
-          iframe.src = item.url;
+          iframe.src = proxyUrl;
           iframe.title = item.title;
-          iframe.sandbox = 'allow-scripts allow-same-origin allow-forms';
-          iframe.loading = 'lazy';
+          iframe.width = '100%';
+          iframe.height = '100%';
+          iframe.style.border = 'none';
+          iframe.style.backgroundColor = 'white';
+          
+          // iframe 로드 이벤트
+          iframe.onload = () => {
+            loadingIndicator.style.display = 'none';
+          };
+          
+          // 로드 타임아웃 - 10초 후에도 로드되지 않으면 대체 UI 표시
+          let loadTimeout = setTimeout(() => {
+            if (loadingIndicator.style.display !== 'none') {
+              loadingIndicator.innerHTML = '';
+              
+              const errorIcon = document.createElement('div');
+              errorIcon.style.fontSize = '32px';
+              errorIcon.textContent = '⚠️';
+              
+              const errorText = document.createElement('div');
+              errorText.textContent = '콘텐츠를 로드할 수 없습니다';
+              errorText.style.margin = '10px 0';
+              errorText.style.fontWeight = 'bold';
+              
+              const errorDesc = document.createElement('div');
+              errorDesc.textContent = '이 콘텐츠는 외부 임베딩을 허용하지 않을 수 있습니다.';
+              errorDesc.style.fontSize = '0.9rem';
+              errorDesc.style.marginBottom = '15px';
+              errorDesc.style.textAlign = 'center';
+              
+              const visitLink = document.createElement('a');
+              visitLink.href = originalUrl;
+              visitLink.target = '_blank';
+              visitLink.textContent = '새 창에서 직접 방문하기';
+              visitLink.style.color = 'white';
+              visitLink.style.backgroundColor = '#3498db';
+              visitLink.style.padding = '8px 16px';
+              visitLink.style.borderRadius = '4px';
+              visitLink.style.textDecoration = 'none';
+              
+              loadingIndicator.appendChild(errorIcon);
+              loadingIndicator.appendChild(errorText);
+              loadingIndicator.appendChild(errorDesc);
+              loadingIndicator.appendChild(visitLink);
+            }
+          }, 10000);
+          
+          // iframe 오류 처리
+          iframe.onerror = () => {
+            clearTimeout(loadTimeout);
+            loadingIndicator.innerHTML = '콘텐츠를 로드할 수 없습니다. <a href="' + originalUrl + '" target="_blank">직접 방문하기</a>';
+          };
           
           iframeContainer.appendChild(iframe);
+          iframeContainer.appendChild(loadingIndicator);
+          
           content.appendChild(iframeContainer);
         } else {
           // 임베딩 없는 경우 링크만 표시
@@ -1168,4 +1305,4 @@ if __name__ == '__main__':
 </html>
 ''')
     
-    app.run(debug=True, host='0.0.0.0', port=7860)    
+    app.run(debug=True, host='0.0.0.0', port=7860)