I'm in the midst of exploring SSO with JWT & Wordpress, I'm not too sure if it's a good practice or does this setup/flow have any security vulnerabilities.
Currently JWT/SSO method i'm using is based on this answer/method which is getting JWT token using iFrame method instead of redirection method eg: from domain1.com > sso.com (retrieve JWT) > domain1.com
Please refer below for my setup/codebase fmi:
Main SSO domain (using Wordpress and JWT)
Platform 1 (using plain PHP)
Platform 2 (using plain PHP)
sso.com/login (Wordpress)
<h3>Passport</h3>
<br>
<input type="text" name="username" value="admin"/><br>
<input type="text" name="password" value="admin"/><br>
<br>
<a href="javascript:void(0);" id='submit_btn'>Submit</a>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
$(document).on('click','#submit_btn',function(){
$.ajax({
url: "https://sso.com/wp-json/jwt-auth/v1/token",
type: "POST",
data: {
username : $('input[name=username]').val(),
password : $('input[name=password]').val(),
},
success: function(data){
localStorage.setItem('token',data.token);
//Which means sso.com/validation able retrieve localStorage('token'); too!
}
});
});//endClick
</script>
Platform 1 & Platform 2 (PHP)
Questions: is it safe if i'm using postMessage to retrieve JWT token from iframe/sso.com? Any security vulnerability i need to concern?
<html>
<head>
<meta charset="UTF-8">
<title>Platform 1</title>
</head>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
var passport_url = 'https://sso.com/validation/';
passport_url+= '?parent='+encodeURI(window.location.href);
$('<iframe>', {
src : passport_url,
id : 'passport',
frameborder : 0,
scrolling : 'no',
style : 'display:none;',
width : 0,
height : 0,
}).appendTo('body');
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// listen to message from sso.com/validation
eventer(messageEvent,function(e) {
alert("Token received: \n"+e.data)
//got the token! will be authenticate using ajax and redirect to logged in page...
},false);
</script>
</body>
</html>
sso.com/validation (Wordpress)
Questions: Since we'll have multiple platform eg: domain1.com, domain2.com, etc, is it a good practice to pass a dynamic parameter in postMessage function using parentUrl?
<script>
var token = localStorage.getItem('token');
if(token && is_inIFrame())
{
//or using PHP validate "Parent" ... using config/application.php
var parentUrl = getParameterByName('parent');
parent.postMessage(token,parentUrl);
}
function is_inIFrame() {try {return window.self !== window.top;} catch (e) {return true;}}
function getParameterByName(name, url) {if (!url) url = window.location.href;name = name.replace(/[\[\]]/g, '\\$&');var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),results = regex.exec(url);if (!results) return null;if (!results[2]) return '';return decodeURIComponent(results[2].replace(/\+/g, ' '));}
</script>
tldr; is this the right direction to create SSO/JWT authentication with cross domains with PHP? is above method is a secure way to code it?
