• 목록
  • 아래로
  • 위로
  • 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로 적용시켜서 관리자페이지와 블로그페이지의 세션값을 동일하게 합니다.

근데 이렇게하면 나중에 보수할때 더 힘들어 지는것으로 알고있고 성능도 문제가 있을 수 있을것 같습니다.

더 나은 방법이 있을까요?





작성자
Hanam09 36 Lv. (50%) 106610/109520EXP

 

안녕!

 

댓글 2

title: 황금 서버 (30일)humit
profile image
+1

SSO에 대해서 검색해보시면 해당 내용에 대해서 도움이 될 수 있을 것 같네요.

comment menu
2019.01.21. 19:56

신고

"humit님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09 작성자 → humit
profile image

감사합니다 humit님,

 

http://wiki.wikisecurity.net/wiki:sso

이제야 정확히 알겠네요..^^

comment menu
2019.01.21. 22:05

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
태그 : ffffff