- 2
- Hanam09
- 조회 수 240
안녕하세요 hanam09입니다.
웹사이트를 만드는데 최적화 부분에서 걸림돌이 있어 이렇게 질문드립니다.
Q. 서로 다른 도메인간 세션연동부분에 대하여.
참고: https://blog.ihnkyou.gq/post/59f66c5589d0bc674ab85f34d1dd3ef6
<!DOCTYPE html> <html> <head> <title>Thinking Cell - Blog/view</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <script type="text/javascript" src="https://api.ihnkyou.gq/api/module.js?module=xmlHttp"></script> <script type="text/javascript" src="https://api.ihnkyou.gq/api/module.js?module=base64"></script> <script type="text/javascript" src="https://api.ihnkyou.gq/api/module.js?module=clientInfo"></script> <script type="text/javascript" src="https://api.ihnkyou.gq/api/module.js?module=PushCtrl"></script> <script type="text/javascript">document.domain = "ihnkyou.gq";var post = this.location.pathname.replace("/post/","");</script> </head> <body> <div class="header"> <div class="sides"> <a href="/" class="logo">BLOG</a> </div> <div class="sides"><label><a class="menu"></a><input type="checkbox" id="Open" hidden></label></div> <div class="info"> <h4><a href="#category">Honesty, morality, justice</a></h4> <h1>내 중심의, 나를 위한, 나의 블로그</h1> </div> </div> <section class="content"> <div id="post"> <div id="post_container"> <h2 id="post_head">포스트를 찾을 수 없습니다!</h2> <div id="post_body">Post ID에 일치하는 경로가 없습니다.</div> <span id="post_lastUpdateTime" class="footer"></span> <span id="r" class="footer" onclick="SyncSess()">삭제</span> </div> <div id="post_comments"> <div id="form-top"> <input type="text" style="border-radius: 4px;border: 1px solid gray;" id="Customer" placeholder="Your Name"><span>한개의 게시글당 한개의 댓글만 작성가능합니다. 게시글에 중복작성할 경우 기존의 댓글이 갱신됩니다.</span> </div> <div class="Card_Comment_Send"><div class="Card_SendOpinion"><textarea></textarea><div class="btn-submit" onclick="Comment_Send(this.parentNode.children[0].value,document.getElementById('Customer').value)">입력</div></div></div> <hr> </div> </div> </section> <!-- post,Comment style --> <style type="text/css"> #form-top { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #post { border: 1px solid #bdc3c7; padding: 15px; } .footer { position: relative; bottom: -100px; } #r { float: right; } #post_container { margin-bottom: 100px; } .cmt_wrotetime { float: right; } .comment { border: thin solid #2c3e50; border-radius: 4px; padding: 2%; margin-top: 25px; } textarea { height: 60px; width: 93%; display: block; resize: none; } .btn-submit { padding: 20px 20px 0 20px; float: right; background-color: #3498db; color: #ffffff; cursor: pointer; } .Card_SendOpinion { width: 100%; display: flex; } </style> <!-- Comment Send --> <script type="text/javascript"> function Comment_Send(comment,name) { if (comment.trim()==="") { window.alert("내용을 입력하여 주세요."); return null; } else { AJAX({ "url" : "https://blog.ihnkyou.gq/api/Comment", "method" : "POST", "data" : "identity="+Base64.Encode(Client.IPAddress)+"&comment="+encodeURI(comment)+"&post="+post+((name.trim() === "")?(""):("&Nick="+encodeURI(name))), "Callback" : function() { if (this.status == 200&&this.readyState==4) { location.reload(); } }, "headers" : { "content-type" : "application/x-www-form-urlencoded; charset=utf-8" } }); } } </script> <!-- getPost by id --> <script type="text/javascript"> function ReadPost() { AJAX({ "url" : "/api/posts.json", "method" : "GET", "data" : null, "Callback" : function() { if (this.readyState === 4&&this.status === 200) { var postData = JSON.parse(this.response)[post]; if (postData===undefined) { document.getElementById("post_comments").hidden = true; return; } document.getElementById("post_head").innerText = postData.subject; document.getElementById("post_body").innerHTML = postData.content; document.getElementById("post_lastUpdateTime").innerText = postData.time; for (var i = Object.keys(postData.comments).length - 1; i >= 0; i--) { if (Object.keys(postData.comments)[i] === Base64.Encode(Client.IPAddress)) { if (postData.comments[Object.keys(postData.comments)[i]][2]===undefined) { AddComment(Object.keys(postData.comments)[i]+"(You)",postData.comments[Object.keys(postData.comments)[i]][1],postData.comments[Object.keys(postData.comments)[i]][0]) } else { AddComment(postData.comments[Object.keys(postData.comments)[i]][2]+"(You)",postData.comments[Object.keys(postData.comments)[i]][1],postData.comments[Object.keys(postData.comments)[i]][0]) } } else { if (postData.comments[Object.keys(postData.comments)[i]][2]===undefined) { AddComment(Object.keys(postData.comments)[i],postData.comments[Object.keys(postData.comments)[i]][1],postData.comments[Object.keys(postData.comments)[i]][0]) } else { AddComment(postData.comments[Object.keys(postData.comments)[i]][2],postData.comments[Object.keys(postData.comments)[i]][1],postData.comments[Object.keys(postData.comments)[i]][0]) } } } } } }) } function AddComment(User,Time,Cmt) { var pas = new DOMParser(); var Template = '<div class="comment"><div class="comment_header"><span class="cmt_name"></span><span class="cmt_wrotetime"></span></div><p class="cmt_body"></p></div>'; var html = document.createElement("div"); var header = document.createElement("div"); var name = document.createElement("span"); var w_time = document.createElement("span"); var c_body = document.createElement("p"); html.className = "comment"; header.className= "comment_header"; name.className= "cmt_name"; w_time.className="cmt_wrotetime"; c_body.className="cmt_body"; name.innerText = User; w_time.innerText = Time; c_body.innerText = Cmt; html.appendChild(header) header.appendChild(name); header.appendChild(w_time); html.appendChild(c_body); document.getElementById("post_comments").appendChild(html); } ReadPost(); </script> <!--Remove Post--> <script type="text/javascript"> function SyncSess() { AJAX({ "url" : "https://gift.ihnkyou.gq/engine/App_blog/sync.php", "method" : "GET", "withCredentials" : true, "data" : null, "Callback" : function() { if (this.readyState==4&&this.status==200) { PushCtrl(JSON.parse(this.response)) } } }); } function unPost() { AJAX({ "url" : "/api/unpost", "method" : "POST", "headers" : { "content-type" : "application/x-www-form-urlencoded; charset=utf-8" }, "data" : "post="+post, "Callback" : function() { if (this.readyState == 4&&this.status==200) { PushCtrl(JSON.parse(this.response)); } } }) } </script> <!-- Rendering blog style --> <style type="text/css">@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";@import "https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i";html,body{margin:0;height:120%;font-family:"Josefin Sans",sans-serif}.header{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;align-content:flex-start;height:50vw;min-height:400px;max-height:550px;min-width:300px;color:#eee}.header:after{content:"";width:100%;height:40%;position:absolute;bottom:0;left:0;z-index:-1;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(27,32,48,1) 100%)}.header:before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0) scale(1,1);transform:translateZ(0);background:#1b2030 url(https://unsplash.it/1999/999?image=1063) top center no-repeat;background-size:cover;background-attachment:fixed;animation:grow 60s linear 10ms infinite;transition:all .2s ease-in-out;z-index:-2}.header a{color:#eee}.menu{cursor: pointer;display:block;width:30px;height:30px;border:2px solid #fff;border-radius:3px;position:absolute;right:20px;top:20px;text-decoration:none}.menu:after{content:"";display:block;width:20px;height:3px;background:#fff;position:absolute;margin:0 auto;top:5px;left:0;right:0;box-shadow:0 8px,0 16px}.logo{border:2px solid #fff;border-radius:3px;text-decoration:none;display:inline-block;margin:20px;padding:5px 10px;font-weight:600;font-size:1.2em;box-sizing:border-box}.sides,.info{flex:0 0 auto;width:50%}.info{width:100%;padding:15% 10% 0;text-align:center;text-shadow:0 2px 3px rgba(0,0,0,0.2)}.author{display:inline-block;width:50px;height:50px;border-radius:50%;background:url(http://favim.com/media/uploads/images/610/140308/black-n-white-cute-funny-iron-man-Favim.com-1462744.jpg) center no-repeat;background-size:cover;box-shadow:0 2px 3px rgba(0,0,0,0.3);margin-bottom:3px}.info h4,.meta{font-size:.7em}.meta{font-style:italic}@keyframes grow{0%{transform:scale(1)}50%{transform:scale(1.2)}}.content{padding:5% 10%;text-align:justify}.btn{color:#333;border:2px solid;border-radius:3px;text-decoration:none;display:inline-block;padding:5px 10px;font-weight:600}.twtr{margin-top:100px}.btn.twtr:after{content:"\1F426";padding-left:5px}</style> </body> </html>
보시다시피.... 포스트를 불러오는걸 모두 클라이언트에서 합니다.
문제는 그게 아니라 조오~기 삭제버튼을 누르면 삭제가 되어야 합니다.
단, 관리자권한을 가진 사람만요.
그러기 위해서 저는 관리자페이지(다른도메인)에서 크로스 오리진 요청을 허용해두고
블로그에서 관리자페이지에 세션 동기화 요청을 하면 관리페이지에서 세션쿠키값을 넘겨줍니다.
https://gift.ihnkyou.gq/engine/App_blog/sync.php { "App": "Sync Session", "CustomKit" : { "Session" : "sess_key=4gdvt83l9rv6fhbsppsegqs2h4" }, "do" : "AJAX({\"url\" : \"/api/sync\",\"method\" : \"POST\",\"headers\" : {\"content-type\":\"application/x-www-form-urlencoded; charset=utf-8\"},\"data\": PushCtrl.kit.Session,\"Callback\" : function(){if(this.readyState==4&&this.status==200){unPost();}}})" }
이런식으로요.
저 CustomKit안에 세션키 보이시죠?
저걸 받으면 저 밑에 JSON에 버젓이 막혀있는 스크립트코드를 실행합니다.
저 코드는 "AJAX요청을 생성하고 이 도메인의 /api/sync/로 관리자 페이지로부터 받은 세션값을 보내고 요청이 완료되면 unpost함수를 실행하라"라고 하는겁니다.
api/sync 경로에는 클라이언트로부터 받은 값을 세션id로 적용시켜서 관리자페이지와 블로그페이지의 세션값을 동일하게 합니다.
근데 이렇게하면 나중에 보수할때 더 힘들어 지는것으로 알고있고 성능도 문제가 있을 수 있을것 같습니다.
더 나은 방법이 있을까요?
SSO에 대해서 검색해보시면 해당 내용에 대해서 도움이 될 수 있을 것 같네요.