- 2
- Hanam09
- 조회 수 263
안녕하세요 hanam09입니다.
웹사이트를 만드는데 최적화 부분에서 걸림돌이 있어 이렇게 질문드립니다.
Q. 서로 다른 도메인간 세션연동부분에 대하여.
참고: https://blog.ihnkyou.gq/post/59f66c5589d0bc674ab85f34d1dd3ef6
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 | <!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=clientInfo"></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({ "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> |
보시다시피.... 포스트를 불러오는걸 모두 클라이언트에서 합니다.
문제는 그게 아니라 조오~기 삭제버튼을 누르면 삭제가 되어야 합니다.
단, 관리자권한을 가진 사람만요.
그러기 위해서 저는 관리자페이지(다른도메인)에서 크로스 오리진 요청을 허용해두고
블로그에서 관리자페이지에 세션 동기화 요청을 하면 관리페이지에서 세션쿠키값을 넘겨줍니다.
1 2 3 4 5 6 7 8 9 | 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로 적용시켜서 관리자페이지와 블로그페이지의 세션값을 동일하게 합니다.
근데 이렇게하면 나중에 보수할때 더 힘들어 지는것으로 알고있고 성능도 문제가 있을 수 있을것 같습니다.
더 나은 방법이 있을까요?
humit
NUBE
joyful
SSO에 대해서 검색해보시면 해당 내용에 대해서 도움이 될 수 있을 것 같네요.