How to force Authentication on REST API for Password protected page using custom table and fetch() without Plugin
I am implementing the REST API with fetch() promises as requests on a Password protected page with a custom table without using a plugin (only using the WP REST API that has been merged into WordPress core - thumbs up WordPress team, that was a smart move, thank you).
All worked fine, except I couldn't make the Authorization work in the header of the HTTP request (always passed, even with no JWT or false token, see last step 6.) at the end).
Here are my steps:
1.) Create custom table in MySQL
MySQL database on my WordPress installation with custom table your_custom_table, 4 columns (id, column_1, column_2, timestamp) and 6 initials records.
2.) Create Password Protected Page
Code (HTML with inline script ... /script):
form id=form1 name=form1
button id=get onclick=getValues()GET/button
button id=insert onclick=insertValues()CREATE/button
button id=update onclick=updateValues()UPDATE/button
/form
script
let yourData = [];
let yourDataNew = {};
let yourDataUpdated = {};
let token = ;
function getValues() {
event.preventDefault();
//READ data
getYourData();
};
function insertValues() {
event.preventDefault();
//CREATE new datarecord
yourDataNew = {column_1: test-1, column_2: test-2};
insertYourData(yourDataNew);
};
function updateValues() {
event.preventDefault();
//UPDATE datarecord
let idOfLastRecord = yourData[yourData.length-1].id;
yourDataUpdated = {id: idOfLastRecord, column_1: test-1-modified, column_2: test-2-modified};
updateYourData(yourDataUpdated);
};
//GET value of Access Cookie wp-postpass_{hash}
token = (; +document.cookie).split(; wp-postpass_675xxxxxx =).pop().split(;).shift();
//token = '24P%24BhPU2oE3ux8v4FFfSFbB9onTPNnglM.'
console.log('TOKEN: ' + token);
// Here comes the REST API part:
// HTTP requests with fetch() promises
function getYourData() {
let url = 'https://oilamerica.com.pa/wp-json/wp/v2/your_private_page/data';
fetch(url, {
method: 'GET',
credentials: 'same-origin',
headers:{
'Content-Type': 'application/json',
//credentials: 'same-origin', -- no authorization needed
'Accept': 'application/json',
//'Authorization': 'Bearer ' + token -- no authorization needed
}
}).then(res = res.json())
.then(response = get_success(response))
.catch(error = failure(error));
};
function insertYourData(data) {
let url = 'https://oilamerica.com.pa/wp-json/wp/v2/your_private_page/data';
fetch(url, {
method: 'POST',
credentials: 'same-origin',
headers:{
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': 'Bearer ' + token
},
body: JSON.stringify(data)
}).then(res = res.json())
.then(response = create_success(response))
.catch(error = failure(error));
};
function updateYourData(data) {
let url = 'https://oilamerica.com.pa/wp-json/wp/v2/your_private_page/data';
fetch(url, {
method: 'PUT',
credentials: 'same-origin',
headers:{
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': 'Bearer ' + token
},
body: JSON.stringify(data)
}).then(res = res.json())
.then(response = update_success(response))
.catch(error = failure(error));
};
// fetch() promises success functions:
function get_success(json) {
data = JSON.stringify(json);
yourData = JSON.parse(data);
console.log('GET');
console.log(yourData);
};
function create_success(json) {
let insertResponse = JSON.stringify(json);
insertResponse = JSON.parse(insertResponse);
console.log('CREATE');
console.log(insertResponse);
};
function update_success(json) {
let updateResponse = JSON.stringify(json);
updateResponse = JSON.parse(updateResponse);
console.log('UPDATE');
console.log(updateResponse);
};
function failure(error) {
console.log(Error: + error);
};
/script
After adding Password Protected page Your Private Page I got following result:
The resulting page with Password login.
Note that page shows in widgets of pages, even if you don't include page in your menu, whereas in Private the page is invisible for non-authorized visitors.
3.) Edited function.php of my installed theme
Code (Added my PHP code in function.php of my installed theme)
/**
* Add here your custom CRUD functions
*/
function get_your_data($request) {
global $wpdb;
$yourdata = $wpdb-get_results(SELECT * FROM your_custom_table);
return rest_ensure_response( $yourdata );
};
function insert_your_data($request) {
global $wpdb;
$contentType = isset($_SERVER[CONTENT_TYPE]) ? trim($_SERVER[CONTENT_TYPE]) : '';
if ($contentType === application/json) {
$content = trim(file_get_contents(php://input));
$decoded = json_decode($content, true);
$newrecord = $wpdb-insert( 'your_custom_table', array( 'column_1' = $decoded['column_1'], 'column_2' = $decoded['column_2']));
};
if($newrecord){
return rest_ensure_response($newrecord);
}else{
//something gone wrong
return rest_ensure_response('failed');
};
header(Content-Type: application/json; charset=UTF-8);
};
function update_your_data() {
global $wpdb;
$contentType = isset($_SERVER[CONTENT_TYPE]) ? trim($_SERVER[CONTENT_TYPE]) : '';
if ($contentType === application/json) {
$content = trim(file_get_contents(php://input));
$decoded = json_decode($content, true);
$updatedrecord = $wpdb-update( 'your_custom_table', array( 'column_1' = $decoded['column_1'], 'column_2' = $decoded['column_2']), array('id' = $decoded['id']), array( '%s' ));
};
if($updatedrecord){
return rest_ensure_response($updatedrecord);
}else{
//something gone wrong
return rest_ensure_response('failed');
};
header(Content-Type: application/json; charset=UTF-8);
};
add_action('rest_api_init', function() {
/**
* Register here your custom routes for your CRUD functions here
*/
register_rest_route( 'wp/v2/your_private_page', '/data', array(
array(
'methods' = 'GET',
'callback' = 'get_your_data'
),
array(
'methods' = 'POST',
'callback' = 'insert_your_data'
),
array(
'methods' = 'PUT',
'callback' = 'update_your_data'
),
));
});
4.) Testing the Cookie Value retrieving part (JWT token)
Retrieving the cookie wp_postpass_ 675xxxxxx value (which is the JWT token) and worked fine
5.) Testing my CRUD functions (GET, POST and PUT)
GET: worked fine (without Authorization, as reading the data is public on our frontend anyway)
POST: worked fine (with Authorization, i.e. protected)
New record was inserted correctly to my custom table:
PUT: worked fine (with Authorization, i.e. protected)
Last record has been updated correctly at my custom table
6.) Testing my CRUD functions WITHOUT token
I simulated unauthorized access by:
- Eliminating token manually
- Posting a false token in HTTP header
'Authorization': 'Bearer ' + false-token - trying to execute my inline
script ... /scriptfrom another page that has no password protection
And then came the BIG SURPRISE :
In all 3 cases my 'POST' and 'PUT' requests PASSED !! (I expected a FAIL).
That means, 'Authorization': 'Bearer ' + token did not force automatically Authorization in order to prevent unauthorized access to my REST API.
Now therefore, here comes my Question:
How can I force Authorization to my requests to my REST API, so that unauthorized visitors cannot modify our data ('POST' and 'PUT')?
Any comments and suggestions are so welcome.
Thank you.
Topic endpoints authorization rest-api security custom-post-types Wordpress
Category Web
