- 2
- Hanam09
- 조회 수 211
안녕하세요 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로 적용시켜서 관리자페이지와 블로그페이지의 세션값을 동일하게 합니다.
근데 이렇게하면 나중에 보수할때 더 힘들어 지는것으로 알고있고 성능도 문제가 있을 수 있을것 같습니다.
더 나은 방법이 있을까요?
humit
gimmepoint
SSO에 대해서 검색해보시면 해당 내용에 대해서 도움이 될 수 있을 것 같네요.