Is it possible to hide my REST URL that I using via AJAX to populate page data? I don't want others taking and consuming from my REST API, but need to use it to display content in my site.
How do I hide my REST API URLs from the end user?
javascriptrest
Is it possible to hide my REST URL that I using via AJAX to populate page data? I don't want others taking and consuming from my REST API, but need to use it to display content in my site.
How do I hide my REST API URLs from the end user?
To remove a property from an object (mutating the object), you can do it like this:
delete myObject.regex;
// or,
delete myObject['regex'];
// or,
var prop = "regex";
delete myObject[prop];
Demo
var myObject = {
"ircEvent": "PRIVMSG",
"method": "newURI",
"regex": "^http://.*"
};
delete myObject.regex;
console.log(myObject);
For anyone interested in reading more about it, Stack Overflow user kangax has written an incredibly in-depth blog post about the delete
statement on their blog, Understanding delete. It is highly recommended.
If you'd like a new object with all the keys of the original except some, you could use the destructuring.
Demo
let myObject = {
"ircEvent": "PRIVMSG",
"method": "newURI",
"regex": "^http://.*"
};
const {regex, ...newObj} = myObject;
console.log(newObj); // has no 'regex' key
console.log(myObject); // remains unchanged
There are three primary browser APIs for copying to the clipboard:
Async Clipboard API [navigator.clipboard.writeText]
document.execCommand('copy')
(deprecated) 👎
Overriding the copy event
Don't expect clipboard related commands to work whilst you are testing code in the console. Generally, the page is required to be active (Async Clipboard API) or requires user interaction (e.g. a user click) to allow (document.execCommand('copy')
) to access the clipboard see below for more detail.
Note that since this post was originally written deprecation of permissions in cross-origin IFRAMEs and other IFRAME "sandboxing" prevents the embedded demos "Run code snippet" buttons and "codepen.io example" from working in some browsers (including Chrome and Microsoft Edge).
To develop create your own web page, serve that page over an HTTPS connection to test and develop against.
Here is a test/demo page which demonstrates the code working: https://deanmarktaylor.github.io/clipboard-test/
Due to the level of browser support for the new Async Clipboard API, you will likely want to fall back to the document.execCommand('copy')
method to get good browser coverage.
Here is a simple example (may not work embedded in this site, read "important" note above):
function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>
(codepen.io example may not work, read "important" note above) Note that this snippet is not working well in Stack Overflow's embedded preview you can try it here: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors=1011
Note that there is an ability to "request permission" and test for access to the clipboard via the permissions API in Chrome 66.
var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
The rest of this post goes into the nuances and detail of the document.execCommand('copy')
API.
The JavaScript (deprecated) 👎document.execCommand('copy')
support has grown, see the links below for browser updates:
(may not work embedded in this site, read "important" note above)
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.focus();
copyTextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
<p>
<button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
<textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>
The above simple example works great if there is a textarea
or input
element visible on the screen.
In some cases, you might wish to copy text to the clipboard without displaying an input
/ textarea
element. This is one example of a way to work around this (basically insert an element, copy to clipboard, remove element):
Tested with Google Chrome 44, Firefox 42.0a1, and Internet Explorer 11.0.8600.17814.
(may not work embedded in this site, read "important" note above)
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
//
// *** This styling is an extra step which is likely not required. ***
//
// Why is it here? To ensure:
// 1. the element is able to have focus and selection.
// 2. if the element was to flash render it has minimal visual impact.
// 3. less flakyness with selection and copying which **might** occur if
// the textarea element is not visible.
//
// The likelihood is the element won't even render, not even a
// flash, so some of these are just precautions. However in
// Internet Explorer the element is visible whilst the popup
// box asking the user for permission for the web page to
// copy to the clipboard.
//
// Place in the top-left corner of screen regardless of scroll position.
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
// Ensure it has a small width and height. Setting to 1px / 1em
// doesn't work as this gives a negative w/h on some browsers.
textArea.style.width = '2em';
textArea.style.height = '2em';
// We don't need padding, reducing the size if it does flash render.
textArea.style.padding = 0;
// Clean up any borders.
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
// Avoid flash of the white box if rendered for any reason.
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>
All document.execCommand('copy')
calls must take place as a direct result of a user action, e.g. click event handler. This is a measure to prevent messing with the user's clipboard when they don't expect it.
See the Google Developers post here for more info.
Note the full Clipboard API draft specification can be found here: https://w3c.github.io/clipboard-apis/
document.queryCommandSupported('copy')
should return true
if the command "is supported by the browser".document.queryCommandEnabled('copy')
return true
if the document.execCommand('copy')
will succeed if called now. Checking to ensure the command was called from a user-initiated thread and other requirements are met.However, as an example of browser compatibility issues, Google Chrome from ~April to ~October 2015 only returned true
from document.queryCommandSupported('copy')
if the command was called from a user-initiated thread.
Note compatibility detail below.
Whilst a simple call to document.execCommand('copy')
wrapped in a try
/catch
block called as a result of a user click will get you the most compatibility use the following has some provisos:
Any call to document.execCommand
, document.queryCommandSupported
or document.queryCommandEnabled
should be wrapped in a try
/catch
block.
Different browser implementations and browser versions throw differing types of exceptions when called instead of returning false
.
Different browser implementations are still in flux and the Clipboard API is still in draft, so remember to do your testing.
Best Solution
It's not possible to hide the URL From the end user in JavaScript. They can simply open up the Network panel in Chrome, or just turn on Fiddler to see it.
In your particular case, the only real way you can hide the URL from the user is to proxy the REST call to your API from your server-side code.
If you must use JavaScript, you can always create and use APIKeys and simply monitor their usage and terminate API Keys that are taking up too much bandwidth; but again -- this isn't going to stop someone from being able to use your API, it'll just let you know when you receive an unexpected amount of traffic from unexpected places.
You could take it further by cycling API keys every day, so if someone wants to use your API; they have to change their code every day -- but again, this won't stop someone, just slow them down.
The only fullproof way is the way I mentioned in my first paragraph -- but that can't be done from client-side JavaScript alone.
Update in the age of Single Page Applications
What I wrote holds true, even for Single Page Applications (SPA); though you can hide the URL in the address bar by having different routing for your client-side application than your server-rendered pages.
The user can still inspect the traffic in their browser's console to check where the requests are going (there's no getting around that), but you can at least display different paths in the address bar.